{{-- @extends('admin.layouts.admin') --}}

{{-- @section('content') --}}
<x-admin-layout>
    <div class="w-full min-h-screen overflow-x-hidden border-t flex flex-col bg-[#dbe5ec]">
        <main class="w-full flex-grow p-4 sm:p-6 lg:p-8">
            <div class="admin-page-heading">
                <div>
                    <p class="admin-eyebrow">Panel de control</p>
                    <h1 class="admin-page-title"><i class="fas fa-chart-line"></i> Estadísticas</h1>
                    <p class="admin-page-subtitle">Consulta el estado general de tu plataforma.</p>
                </div>
            </div>
            <div class="admin-page-card">
                @include('admin.partials.index-list-header', ['title' => 'Resumen de actividad', 'subtitle' => 'Indicadores principales de tu administración.', 'status' => 'Datos actualizados'])
                <div class="p-2 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-6">

                <div class="max-w-sm rounded overflow-hidden shadow-lg bg-white ">
                    <div class="px-10 py-6">
                        <div class="font-bold text-xl mb-2 text-center">Categorías</div>
                        <p class="text-gray-700 text-5xl text-center">
                            {{ $categories }}
                        </p>
                    </div>
                </div>

                <div class="max-w-sm rounded overflow-hidden shadow-lg bg-white ">
                    <div class="px-10 py-6">
                        <div class="font-bold text-xl mb-2 text-center">Publicaciones</div>
                        <p class="text-gray-700 text-5xl text-center">
                            {{ $posts }}
                        </p>
                    </div>
                </div>

                <div class="max-w-sm rounded overflow-hidden shadow-lg bg-white ">
                    <div class="px-10 py-6">
                        <div class="font-bold text-xl mb-2 text-center">Etiquetas</div>
                        <p class="text-gray-700 text-5xl text-center">
                            {{ $tags }}
                        </p>
                    </div>
                </div>

                <div class="max-w-sm rounded overflow-hidden shadow-lg bg-white ">
                    <div class="px-10 py-6">
                        <div class="font-bold text-xl mb-2 text-center">Usuarios</div>
                        <p class="text-gray-700 text-5xl text-center">
                            {{ $users }}
                        </p>
                    </div>
                </div>

                <div class="max-w-sm rounded overflow-hidden shadow-lg bg-white ">
                    <div class="px-10 py-6">
                        <div class="font-bold text-xl mb-2 text-center">Suscriptores del boletín</div>
                        <p class="text-gray-700 text-5xl text-center">
                            {{ $news_letter_users }}
                        </p>
                    </div>
                </div>

                </div>
            </div>
        </main>
    </div>

</x-admin-layout>

{{-- @endsection --}}