{% extends 'flowbite_test/layout.html.twig' %}

{% import 'flowbite_components/macros.html.twig' as flowbite %}

{% block title %}Démonstration du Layout Complet{% endblock %}

{% block breadcrumb %}
    {# Utilisation du composant breadcrumb #}
    {% include 'flowbite_components/layout/_breadcrumb.html.twig' with {
        items: [
            {label: 'Accueil', url: path('flowbite_demo_index')},
            {label: 'Démonstrations', url: '#'},
            {label: 'Layout Complet'}
        ]
    } %}
{% endblock %}

{% block content %}
    {# En-tête de la page #}
    <div class="mb-8">
        <h1 class="text-3xl font-bold text-heading mb-2">Démonstration du Layout Complet</h1>
        <p class="text-body">
            Cette page démontre tous les composants du layout modulaire Flowbite : header avec menu utilisateur enrichi,
            sidebar responsive, breadcrumbs, notifications, et bouton scroll-to-top.
        </p>
    </div>

    {# Section: Vue d'ensemble du Layout #}
    <div class="mb-8">
        <h2 class="text-2xl font-semibold text-heading mb-4">
            <i class="fas fa-layer-group text-fg-brand mr-2"></i>
            Vue d'ensemble du Layout
        </h2>

        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            {# Card: Header #}
            {{ flowbite.card(
                'Header & Navbar',
                '<ul class="text-sm text-body space-y-2">
                    <li><i class="fas fa-check text-green-500 mr-2"></i>Position fixe en haut</li>
                    <li><i class="fas fa-check text-green-500 mr-2"></i>Logo et nom de l\'application</li>
                    <li><i class="fas fa-check text-green-500 mr-2"></i>Bouton toggle sidebar (mobile)</li>
                    <li><i class="fas fa-check text-green-500 mr-2"></i>Notifications avec badge</li>
                    <li><i class="fas fa-check text-green-500 mr-2"></i>Menu utilisateur enrichi</li>
                </ul>',
                null,
                'fa-bars'
            ) }}

            {# Card: Sidebar #}
            {{ flowbite.card(
                'Sidebar Navigation',
                '<ul class="text-sm text-body space-y-2">
                    <li><i class="fas fa-check text-green-500 mr-2"></i>Navigation latérale</li>
                    <li><i class="fas fa-check text-green-500 mr-2"></i>Icônes SVG personnalisables</li>
                    <li><i class="fas fa-check text-green-500 mr-2"></i>Badges pour compteurs</li>
                    <li><i class="fas fa-check text-green-500 mr-2"></i>Responsive (drawer mobile)</li>
                    <li><i class="fas fa-check text-green-500 mr-2"></i>Highlight de la route active</li>
                </ul>',
                null,
                'fa-sidebar'
            ) }}

            {# Card: Composants #}
            {{ flowbite.card(
                'Composants Additionnels',
                '<ul class="text-sm text-body space-y-2">
                    <li><i class="fas fa-check text-green-500 mr-2"></i>Breadcrumbs (fil d\'Ariane)</li>
                    <li><i class="fas fa-check text-green-500 mr-2"></i>Zone de notifications</li>
                    <li><i class="fas fa-check text-green-500 mr-2"></i>Messages flash Symfony</li>
                    <li><i class="fas fa-check text-green-500 mr-2"></i>Bouton scroll-to-top</li>
                    <li><i class="fas fa-check text-green-500 mr-2"></i>Auto-dismiss (5 secondes)</li>
                </ul>',
                null,
                'fa-puzzle-piece'
            ) }}
        </div>
    </div>

    {# Section: Exemples de composants #}
    <div class="mb-8">
        <h2 class="text-2xl font-semibold text-heading mb-4">
            <i class="fas fa-swatchbook text-fg-brand mr-2"></i>
            Exemples de Composants Flowbite
        </h2>

        {# Alerts #}
        <div class="mb-6">
            <h3 class="text-lg font-medium text-heading mb-3">Alerts</h3>
            <div class="space-y-3">
                {{ flowbite.alert('success', 'Opération réussie! Vos modifications ont été enregistrées.', true) }}
                {{ flowbite.alert('info', 'Information: Cette fonctionnalité sera bientôt disponible.', true) }}
                {{ flowbite.alert('warning', 'Attention: Veuillez vérifier vos informations avant de continuer.', true) }}
                {{ flowbite.alert('error', 'Erreur: Impossible de se connecter au serveur.', true) }}
            </div>
        </div>

        {# Buttons #}
        <div class="mb-6">
            <h3 class="text-lg font-medium text-heading mb-3">Boutons</h3>
            <div class="flex flex-wrap gap-3">
                {{ flowbite.button('Primary', 'primary', 'md') }}
                {{ flowbite.button('Secondary', 'secondary', 'md') }}
                {{ flowbite.button('Success', 'success', 'md', 'fa-check') }}
                {{ flowbite.button('Danger', 'danger', 'md', 'fa-trash') }}
                {{ flowbite.button('Warning', 'warning', 'md', 'fa-exclamation-triangle') }}
            </div>
        </div>

        {# Badges #}
        <div class="mb-6">
            <h3 class="text-lg font-medium text-heading mb-3">Badges</h3>
            <div class="flex flex-wrap gap-3">
                {{ flowbite.badge('Bleu', 'blue') }}
                {{ flowbite.badge('Vert', 'green', 'fa-check') }}
                {{ flowbite.badge('Rouge', 'red', 'fa-times') }}
                {{ flowbite.badge('Jaune', 'yellow', 'fa-star') }}
                {{ flowbite.badge('Violet', 'purple') }}
                {{ flowbite.badge('Rose', 'pink') }}
            </div>
        </div>

        {# Progress Bars #}
        <div class="mb-6">
            <h3 class="text-lg font-medium text-heading mb-3">Barres de Progression</h3>
            <div class="space-y-4">
                {{ flowbite.progressBar('Téléchargement', 75, 'blue', true) }}
                {{ flowbite.progressBar('Installation', 45, 'green', true) }}
                {{ flowbite.progressBar('Traitement', 90, 'yellow', true) }}
            </div>
        </div>

        {# Avatars #}
        <div class="mb-6">
            <h3 class="text-lg font-medium text-heading mb-3">Avatars</h3>
            <div class="flex gap-3">
                {{ flowbite.avatar('JD', 'blue', false) }}
                {{ flowbite.avatar('MM', 'green', true) }}
                {{ flowbite.avatar('AB', 'purple', false) }}
                {{ flowbite.avatar('CD', 'gray', true) }}
            </div>
        </div>
    </div>

    {# Section: Formulaire exemple #}
    <div class="mb-8">
        <h2 class="text-2xl font-semibold text-heading mb-4">
            <i class="fas fa-edit text-fg-brand mr-2"></i>
            Formulaire Exemple
        </h2>

        <form class="space-y-4 max-w-2xl">
            {{ flowbite.input('username', 'Nom d\'utilisateur', 'text', 'Entrez votre nom', '', true, null, 'fa-user') }}
            {{ flowbite.input('email', 'Adresse email', 'email', 'exemple@email.com', '', true, null, 'fa-envelope') }}

            {% set countries = [
                {value: 'FR', label: 'France'},
                {value: 'BE', label: 'Belgique'},
                {value: 'CH', label: 'Suisse'},
                {value: 'CA', label: 'Canada'}
            ] %}
            {{ flowbite.select('country', 'Pays', countries, 'FR', true) }}

            <div class="flex gap-3">
                {{ flowbite.button('Enregistrer', 'success', 'md', 'fa-save') }}
                {{ flowbite.button('Annuler', 'secondary', 'md', 'fa-times') }}
            </div>
        </form>
    </div>

    {# Section: Structure des Fichiers #}
    <div class="mb-8">
        <h2 class="text-2xl font-semibold text-heading mb-4">
            <i class="fas fa-folder-tree text-fg-brand mr-2"></i>
            Structure des Fichiers du Layout
        </h2>

        <div class="bg-neutral-secondary-soft rounded-base p-4 font-mono text-sm">
            <pre class="text-body">
templates/
├── flowbite_components/
│   ├── layout/
│   │   ├── _header.html.twig          <span class="text-green-600"># Navbar avec menu utilisateur</span>
│   │   ├── _sidebar.html.twig         <span class="text-green-600"># Navigation latérale</span>
│   │   ├── _breadcrumb.html.twig      <span class="text-green-600"># Fil d'Ariane</span>
│   │   ├── _notifications_zone.html.twig  <span class="text-green-600"># Zone de toasts</span>
│   │   └── _scroll_to_top.html.twig   <span class="text-green-600"># Bouton retour en haut</span>
│   └── macros.html.twig               <span class="text-green-600"># Macros réutilisables</span>
└── flowbite_test/
    ├── layout.html.twig               <span class="text-green-600"># Layout de base assemblé</span>
    └── full_layout_demo.html.twig     <span class="text-green-600"># Cette page de démo</span>
            </pre>
        </div>
    </div>

    {# Section: Comment utiliser #}
    <div class="mb-8">
        <h2 class="text-2xl font-semibold text-heading mb-4">
            <i class="fas fa-code text-fg-brand mr-2"></i>
            Comment Utiliser ce Layout
        </h2>

        <div class="prose max-w-none">
            <h3 class="text-lg font-medium text-heading mb-3">1. Étendre le layout de base</h3>
            <div class="bg-neutral-secondary-soft rounded-base p-4 mb-4">
                <pre class="text-sm font-mono text-body">{% verbatim %}{% extends 'flowbite_test/layout.html.twig' %}

{% block title %}Ma Page{% endblock %}

{% block content %}
    {# Votre contenu ici #}
{% endblock %}{% endverbatim %}</pre>
            </div>

            <h3 class="text-lg font-medium text-heading mb-3">2. Ajouter des breadcrumbs</h3>
            <div class="bg-neutral-secondary-soft rounded-base p-4 mb-4">
                <pre class="text-sm font-mono text-body">{% verbatim %}{% block breadcrumb %}
    {% include 'flowbite_components/layout/_breadcrumb.html.twig' with {
        items: [
            {label: 'Accueil', url: path('app_home')},
            {label: 'Ma Section', url: path('my_section')},
            {label: 'Ma Page'}
        ]
    } %}
{% endblock %}{% endverbatim %}</pre>
            </div>

            <h3 class="text-lg font-medium text-heading mb-3">3. Utiliser les macros Flowbite</h3>
            <div class="bg-neutral-secondary-soft rounded-base p-4 mb-4">
                <pre class="text-sm font-mono text-body">{% verbatim %}{% import 'flowbite_components/macros.html.twig' as flowbite %}

{{ flowbite.button('Mon Bouton', 'primary', 'md', 'fa-save') }}
{{ flowbite.alert('success', 'Opération réussie!', true) }}
{{ flowbite.card('Titre', 'Contenu de la carte', null, 'fa-star') }}{% endverbatim %}</pre>
            </div>
        </div>
    </div>

    {# Section: Testez le scroll #}
    <div class="mb-8">
        <h2 class="text-2xl font-semibold text-heading mb-4">
            <i class="fas fa-arrow-up text-fg-brand mr-2"></i>
            Testez le Bouton Scroll-to-Top
        </h2>
        <p class="text-body mb-4">
            Scrollez vers le bas de cette page pour voir apparaître le bouton "Retour en haut" en bas à droite.
            Le bouton apparaît automatiquement après avoir scrollé de 300px et permet de remonter en haut de la page avec une animation smooth.
        </p>

        {# Contenu de remplissage pour le scroll #}
        <div class="space-y-6">
            {% for i in 1..10 %}
            <div class="p-6 bg-neutral-secondary-soft rounded-base">
                <h3 class="text-lg font-medium text-heading mb-2">Section de test #{{ i }}</h3>
                <p class="text-body">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
                </p>
            </div>
            {% endfor %}
        </div>
    </div>

    {# Section: Fonctionnalités responsive #}
    <div class="mb-8">
        <h2 class="text-2xl font-semibold text-heading mb-4">
            <i class="fas fa-mobile-alt text-fg-brand mr-2"></i>
            Fonctionnalités Responsive
        </h2>

        <div class="bg-blue-50 border border-blue-200 rounded-base p-4">
            <p class="text-body mb-2">
                <strong class="text-heading">💡 Astuce:</strong> Réduisez la taille de votre fenêtre pour voir le layout s'adapter:
            </p>
            <ul class="list-disc list-inside text-body space-y-1 ml-4">
                <li>Sur mobile (< 640px): La sidebar se transforme en drawer avec overlay</li>
                <li>Le bouton hamburger apparaît dans le header</li>
                <li>Les espacements et tailles s'adaptent automatiquement</li>
                <li>Le contenu principal occupe toute la largeur</li>
            </ul>
        </div>
    </div>

{% endblock %}