@extends('layout')
@section('title')
    {{ config('admin.name')  }}
@endsection
@section('content')
    <div id="carousel" class="carousel slide">
        <div class="carousel-inner">
            <div class="carousel-item active">
                <img src="https://via.placeholder.com/800x300.png?text=1" class="d-block w-100" alt="..." width="100%" height="300">
            </div>
            <div class="carousel-item">
                <img src="https://via.placeholder.com/800x300.png?text=2" class="d-block w-100" alt="..." width="100%" height="300">
            </div>
            <div class="carousel-item">
                <img src="https://via.placeholder.com/800x300.png?text=3" class="d-block w-100" alt="..." width="100%" height="300">
            </div>
        </div>
        <button class="carousel-control-prev" type="button" data-bs-target="#carousel" data-bs-slide="prev" width="100%" height="300">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Previous</span>
        </button>
        <button class="carousel-control-next" type="button" data-bs-target="#carousel" data-bs-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Next</span>
        </button>
    </div>
    <div class="container px-3 py-3">
        <div class="row g-2">
            <div class="feature col">
                <a href="#" class="feature-icon d-block">
                    <img src="https://via.placeholder.com/600x300.png?text=4" alt="" width="100%" />
                </a>
                <h3 class="fs-2 mt-2 text-center">
                    <a href="#">共性指标</a>
                </h3>
            </div>
            <div class="feature col">
                <a href="#" class="feature-icon d-block">
                    <img src="https://via.placeholder.com/600x300.png?text=5" alt="" width="100%" />
                </a>
                <h3 class="fs-2 mt-2 text-center">
                    <a href="#">进阶指标</a>
                </h3>
            </div>
        </div>
    </div>
    <div class="container px-3 py-3">
        <div class="card bg-danger">
            <div class="card-header text-white">
                五星党员
            </div>
            <ol class="list-group list-group-flush list-group-numbered">
                <li class="list-group-item d-flex gap-3 py-3">
                    <img src="https://via.placeholder.com/32x32.png?text=A" alt="" width="32" height="32" class="rounded-circle flex-shrink-0">
                    <div class="d-flex w-100 justify-content-between align-items-center">
                        <b>姓名1</b>
                        <small class="opacity-50 text-nowrap">党支部</small>
                    </div>
                </li>
                <li class="list-group-item d-flex gap-3 py-3">
                    <img src="https://via.placeholder.com/32x32.png?text=A" alt="" width="32" height="32" class="rounded-circle flex-shrink-0">
                    <div class="d-flex w-100 justify-content-between align-items-center">
                        <b>姓名2</b>
                        <small class="opacity-50 text-nowrap">党支部</small>
                    </div>
                </li>
                <li class="list-group-item d-flex gap-3 py-3">
                    <img src="https://via.placeholder.com/32x32.png?text=A" alt="" width="32" height="32" class="rounded-circle flex-shrink-0">
                    <div class="d-flex w-100 justify-content-between align-items-center">
                        <b>姓名3</b>
                        <small class="opacity-50 text-nowrap">党支部</small>
                    </div>
                </li>
                <li class="list-group-item d-flex gap-3 py-3">
                    <img src="https://via.placeholder.com/32x32.png?text=A" alt="" width="32" height="32" class="rounded-circle flex-shrink-0">
                    <div class="d-flex w-100 justify-content-between align-items-center">
                        <b>姓名4</b>
                        <small class="opacity-50 text-nowrap">党支部</small>
                    </div>
                </li>
            </ol>
        </div>
    </div>
    <div class="container px-3 py-3">
        <div class="card bg-warning">
            <div class="card-header text-white">五星支部</div>
            <ol class="list-group list-group-flush list-group-numbered">
                <li class="list-group-item d-flex gap-3 py-3">
                    <div class="d-flex w-100 justify-content-between align-items-center">
                        <b>党支部1</b>
                    </div>
                </li>
                <li class="list-group-item d-flex gap-3 py-3">
                    <div class="d-flex w-100 justify-content-between align-items-center">
                        <b>党支部2</b>
                    </div>
                </li>
                <li class="list-group-item d-flex gap-3 py-3">
                    <div class="d-flex w-100 justify-content-between align-items-center">
                        <b>党支部2</b>
                    </div>
                </li>
                <li class="list-group-item d-flex gap-3 py-3">
                    <div class="d-flex w-100 justify-content-between align-items-center">
                        <b>党支部2</b>
                    </div>
                </li>
            </ol>
        </div>
    </div>
@endsection