<!DOCTYPE html>

<html lang="fr">

<head>
    <meta charset="UTF-8">
    <title>{% block title %}Administration{% endblock %} - E-Cosplay</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- Chargement de l'entrée principale de Vite pour les CSS et le JS -->
    {{ vite_asset('admin.js', []) }}

    <!-- Tailwind CSS est inclus via le fichier app.css/app.js géré par Vite -->
    {% block stylesheets %}{% endblock %}


</head>
<!-- DARK MODE: bg-gray-900 pour le fond principal -->
<!-- La body reste un conteneur flex horizontal -->
<body class="bg-gray-900 min-h-screen flex antialiased">

<!-- 1. Sidebar (Barre Latérale) - bg-gray-800 -->

<!-- MODIFICATION MAJEURE : Suppression de 'fixed' et 'h-screen' de la sidebar.
Elle défilera donc avec le reste du contenu de la page.
L'overflow-y-auto n'est plus nécessaire ici car c'est le <body> qui gère le scroll. -->

<aside id="sidebar" class="w-64 bg-gray-800 text-white flex-shrink-0 transition-transform duration-300 transform -translate-x-full md:translate-x-0 z-40">
    <a href="{{ path('app_home') }}" target="_blank" class="p-6 block">
        <h1 class="text-3xl font-bold tracking-wider">E-Cosplay</h1>
    </a>

    <nav class="mt-8">
        <!-- Dashboard -->
        <a href="{{ path('admin_dashboard') }}" class="flex items-center py-2 px-6 text-gray-400 hover:bg-gray-700 hover:text-white transition duration-200 rounded-r-lg">
            <svg class="w-5 h-5 mr-3" 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="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path></svg>
            Dashboard
        </a>

        <!-- Membres (Utilisateurs) -->
        <a href="{{ path('admin_members') }}" class="flex items-center py-2 px-6 text-gray-400 hover:bg-gray-700 hover:text-white transition duration-200 mt-1 rounded-r-lg">
            <svg class="w-5 h-5 mr-3" 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>
            Membres
        </a>

        <!-- Produits -->
        <a href="{{ path('admin_products') }}" class="flex items-center py-2 px-6 text-gray-400 hover:bg-gray-700 hover:text-white transition duration-200 mt-1 rounded-r-lg">
            <svg class="w-5 h-5 mr-3" 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="M12 8c1.657 0 3 .895 3 2s-1.343 2-3 2-3 .895-3 2 1.343 2 3 2m0-8h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
            Produits
        </a>

        <!-- Événements -->
        <a href="{{ path('admin_events') }}" class="flex items-center py-2 px-6 text-gray-400 hover:bg-gray-700 hover:text-white transition duration-200 mt-1 rounded-r-lg">
            <svg class="w-5 h-5 mr-3" 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>
            Événements
        </a>

        <!-- AG (Assemblée Générale) -->
        <a href="{{ path('admin_ag') }}" class="flex items-center py-2 px-6 text-gray-400 hover:bg-gray-700 hover:text-white transition duration-200 mt-1 rounded-r-lg">
            <svg class="w-5 h-5 mr-3" 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="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.523 5.754 18 7.5 18s3.332.477 4.5 1.247m0-13C13.168 5.477 14.754 5 16.5 5s3.332.477 4.5 1.253v13C19.832 18.523 18.246 18 16.5 18s-3.332.477-4.5 1.247"></path></svg>
            AG (Assemblée Générale)
        </a>
        <a href="{{ path('admin_ag') }}" class="flex items-center py-2 px-6 text-gray-400 hover:bg-gray-700 hover:text-white transition duration-200 mt-1 rounded-r-lg">
            <svg class="w-5 h-5 mr-3" 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="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.523 5.754 18 7.5 18s3.332.477 4.5 1.247m0-13C13.168 5.477 14.754 5 16.5 5s3.332.477 4.5 1.253v13C19.832 18.523 18.246 18 16.5 18s-3.332.477-4.5 1.247"></path></svg>
            EPage - Validation
        </a>
        <a href="{{ path('admin_ag') }}" class="flex items-center py-2 px-6 text-gray-400 hover:bg-gray-700 hover:text-white transition duration-200 mt-1 rounded-r-lg">
            <svg class="w-5 h-5 mr-3" 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="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.523 5.754 18 7.5 18s3.332.477 4.5 1.247m0-13C13.168 5.477 14.754 5 16.5 5s3.332.477 4.5 1.253v13C19.832 18.523 18.246 18 16.5 18s-3.332.477-4.5 1.247"></path></svg>
            EPage - Cosplayeur(s)
        </a>
        <a href="{{ path('admin_epage_invite') }}" class="flex items-center py-2 px-6 text-gray-400 hover:bg-gray-700 hover:text-white transition duration-200 mt-1 rounded-r-lg">
            <svg class="w-5 h-5 mr-3" 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="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.523 5.754 18 7.5 18s3.332.477 4.5 1.247m0-13C13.168 5.477 14.754 5 16.5 5s3.332.477 4.5 1.253v13C19.832 18.523 18.246 18 16.5 18s-3.332.477-4.5 1.247"></path></svg>
            EPage - Invitation
        </a>
    </nav>
</aside>

<div id="main-content" class="flex flex-col flex-1">

    <!-- 2.1. Navbar (Barre de Navigation Supérieure) - bg-gray-800 -->
    <!-- La navbar est toujours sticky pour rester en haut de l'écran lors du défilement -->
    <header class="bg-gray-800 shadow-xl p-4 flex justify-between items-center sticky top-0 z-30">
        <!-- Bouton pour afficher/cacher la sidebar sur mobile -->
        <button id="sidebar-toggle" class="text-gray-400 md:hidden p-2 rounded-md hover:bg-gray-700 focus:outline-none">
            <svg class="w-6 h-6" 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="M4 6h16M4 12h16m-7 6h7"></path></svg>
        </button>

        <!-- Titre de la page (Visible uniquement ici pour la cohérence) -->
        <h2 class="text-xl font-semibold text-white hidden sm:block">
            {% block page_title %}Tableau de Bord{% endblock %}
        </h2>

        <!-- Profil et Déconnexion -->
        <div class="flex items-center space-x-4">
            <div class="flex items-center cursor-pointer group">
        <span class="text-gray-200 font-medium hidden sm:inline">
        {# Assurez-vous que app.user est défini #}
            {% if app.user is defined and app.user %}
                {{ app.user.username }}
            {% else %}
                Admin
            {% endif %}
    </span>


            </div>
        </div>
    </header>

    <!-- 2.2. Contenu de la Page (Titre et Corps) -->
    <!-- Retrait de overflow-y-auto pour que le <body> défile -->
    <main class="p-6 flex-1">

        <!-- Affichage du Titre de la Page (pour les écrans larges) -->
        <h1 class="text-3xl font-bold text-white mb-6 hidden sm:block">
            {{ block('page_title') }}
        </h1>

        <!-- Le contenu réel de la page s'insère ici -->
        <div class="w-full">
            {% block body %}{% endblock %}
        </div>
    </main>

    <!-- 2.3. Footer (Pied de Page) - bg-gray-800 -->
    <footer class="p-4 bg-gray-800 border-t border-gray-700 text-center text-sm text-gray-400 flex-shrink-0">
        Développé par SARL SITECONSEIL. Tous droits réservés.
        <a href="https://www.siteconseil.fr/" target="_blank" rel="noopener noreferrer" class="text-indigo-400 hover:text-indigo-300 transition duration-150 font-medium ml-1">
            https://www.siteconseil.fr/
        </a>
    </footer>


</div>

<!-- Script pour la gestion du menu mobile -->


{% block javascripts %}{% endblock %}

</body>
</html>
