{% extends 'admin/base.twig' %}

{# Définition des titres pour le navigateur et l'affichage #}
{% block title 'Tableau de bord' %}
{% block page_title 'Tableau de bord' %}

{# Variables de données simulées (MOCK DATA) - À REMPLACER par les vraies variables passées au template #}
{% set pendingOrdersCount = 0 %}

{% block body %}
    <div class="space-y-8">
        {# Section des Cartes de Statistiques (KPIs) #}
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">

            {# Carte 1: Nombre de Membres #}
            <div class="bg-gray-800 p-6 rounded-xl shadow-2xl border border-gray-700 hover:border-indigo-500 transition duration-300">
                <div class="flex items-center justify-between">
                    <div class="text-indigo-400">
                        <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20h5v-2a3 3 0 00-5.356-1.857M9 20H4v-2a3 3 0 015-2.236M9 20v-2a3 3 0 00-5-2.236M9 20h5m-5 0h5M12 4a4 4 0 100 8 4 4 0 000-8z"></path></svg>
                    </div>
                    <p class="text-sm font-medium text-gray-400">
                        Membres de l'association
                    </p>
                </div>
                <div class="mt-4">
                    <p class="text-4xl font-extrabold text-white">
                        {{ memberCount | number_format(0, ',', ' ') }}
                    </p>
                    <p class="text-sm text-gray-500 mt-1">
                        Total des inscriptions actives.
                    </p>
                </div>
            </div>
            <div class="bg-gray-800 p-6 rounded-xl shadow-2xl border border-gray-700 hover:border-indigo-500 transition duration-300">
                <div class="flex items-center justify-between">
                    <div class="text-indigo-400">
                        <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20h5v-2a3 3 0 00-5.356-1.857M9 20H4v-2a3 3 0 015-2.236M9 20v-2a3 3 0 00-5-2.236M9 20h5m-5 0h5M12 4a4 4 0 100 8 4 4 0 000-8z"></path></svg>
                    </div>
                    <p class="text-sm font-medium text-gray-400">
                        Membres de l'association
                    </p>
                </div>
                <div class="mt-4">
                    <p class="text-4xl font-extrabold text-white">
                        {{ joins | number_format(0, ',', ' ') }}
                    </p>
                    <p class="text-sm text-gray-500 mt-1">
                        Total des candidatures en cours
                    </p>
                </div>
            </div>

            {# Carte 2: Commandes en Attente #}
            <div class="bg-gray-800 p-6 rounded-xl shadow-2xl border border-gray-700 hover:border-red-500 transition duration-300">
                <div class="flex items-center justify-between">
                    <div class="text-red-400">
                        <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"></path></svg>
                    </div>
                    <p class="text-sm font-medium text-gray-400">
                        Commandes en attente
                    </p>
                </div>
                <div class="mt-4">
                    <p class="text-4xl font-extrabold text-white">
                        {{ pendingOrdersCount }}
                    </p>
                    <p class="text-sm text-gray-500 mt-1">
                        Nécessitent un traitement.
                    </p>
                </div>
            </div>


            {# Carte 4: Espace pour un autre KPI (ex: Nouveaux événements) #}
            <div class="bg-gray-800 p-6 rounded-xl shadow-2xl border border-gray-700 hover:border-yellow-500 transition duration-300">
                <div class="flex items-center justify-between">
                    <div class="text-yellow-400">
                        <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h.01M16 11h.01M9 16h.01M15 16h.01M16 12h-8m8 4H8m8 4H8m-5 4h18a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path></svg>
                    </div>
                    <p class="text-sm font-medium text-gray-400">
                        Événements à venir
                    </p>
                </div>
                <div class="mt-4">
                    <p class="text-4xl font-extrabold text-white">
                        0
                    </p>
                    <p class="text-sm text-gray-500 mt-1">
                        Planifiés pour les 3 prochains mois.
                    </p>
                </div>
            </div>
        </div>
    </div>
{% endblock %}
