{% extends 'base.html.twig' %}

{% block title %}Modal - Design System - Bubul{% endblock %}

{% block body %}
<div class="min-h-screen bg-gray-50">

    {# ===== HEADER ===== #}
    <header class="bg-white border-b border-gray-200 sticky top-0 z-10">
        <div class="max-w-7xl mx-auto px-6 py-4">
            <div class="flex items-center gap-4">
                <a href="{{ path('admin_design_system') }}" class="text-gray-400 hover:text-gray-600 transition-colors">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
                    </svg>
                </a>
                <div>
                    <div class="flex items-center gap-2">
                        <span class="text-sm text-gray-500">Molecules</span>
                        <span class="text-gray-300">/</span>
                        <h1 class="text-xl font-bold text-gray-900 font-[Poppins]">Modal</h1>
                    </div>
                    <p class="text-sm text-gray-500">Dialogues modaux pour confirmations et formulaires</p>
                </div>
            </div>
        </div>
    </header>

    <div class="max-w-7xl mx-auto px-6 py-8">

        {# ===== COMPOSITION ===== #}
        <section class="mb-12 bg-green-50 rounded-xl p-6 border border-green-200">
            <h2 class="text-lg font-semibold text-green-900 mb-4">Composition</h2>
            <div class="flex flex-wrap items-center gap-3">
                <span class="px-3 py-1.5 bg-gray-100 text-gray-700 rounded border border-gray-200 font-medium text-sm">Overlay</span>
                <span class="text-green-400 font-bold">+</span>
                <span class="px-3 py-1.5 bg-blue-100 text-blue-700 rounded border border-blue-200 font-medium text-sm">Icon</span>
                <span class="text-green-400 font-bold">+</span>
                <span class="px-3 py-1.5 bg-purple-100 text-purple-700 rounded border border-purple-200 font-medium text-sm">Typography</span>
                <span class="text-green-400 font-bold">+</span>
                <span class="px-3 py-1.5 bg-orange-100 text-orange-700 rounded border border-orange-200 font-medium text-sm">Button</span>
                <span class="text-green-600 font-bold text-lg">=</span>
                <span class="px-4 py-2 bg-green-500 text-white rounded-lg font-semibold shadow-sm">Modal</span>
            </div>
        </section>

        {# ===== CONTENU FLEXIBLE ===== #}
        <section class="mb-12 bg-blue-50 rounded-xl p-6 border border-blue-200">
            <h2 class="text-lg font-semibold text-blue-900 mb-4 flex items-center gap-2">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                Que peut-on mettre dans un Modal ?
            </h2>
            <p class="text-sm text-blue-800 mb-4">
                Le Modal utilise <code class="bg-blue-100 px-1 rounded">{% verbatim %}{% embed %}{% endverbatim %}</code>,
                tu peux donc injecter <strong>n'importe quel contenu HTML</strong> dans le body.
            </p>
            <div class="grid md:grid-cols-2 gap-4">
                <div class="bg-white rounded-lg p-4 border border-blue-100">
                    <h3 class="font-semibold text-gray-900 mb-2 text-sm">{% verbatim %}{% block body %}{% endverbatim %}</h3>
                    <ul class="text-xs text-gray-600 space-y-1">
                        <li>- Formulaires complets</li>
                        <li>- Barre de recherche + resultats</li>
                        <li>- Listes d'utilisateurs</li>
                        <li>- Images, previews</li>
                        <li>- Tableaux de donnees</li>
                        <li>- Autres composants (Cards, Alerts...)</li>
                    </ul>
                </div>
                <div class="bg-white rounded-lg p-4 border border-blue-100">
                    <h3 class="font-semibold text-gray-900 mb-2 text-sm">{% verbatim %}{% block footer %}{% endverbatim %}</h3>
                    <ul class="text-xs text-gray-600 space-y-1">
                        <li>- Boutons Annuler / Confirmer</li>
                        <li>- Bouton Submit de formulaire</li>
                        <li>- Liens d'action</li>
                        <li>- Checkbox "Ne plus afficher"</li>
                    </ul>
                </div>
            </div>
        </section>

        {# ===== VARIANTES ===== #}
        <section class="mb-12 bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
            <div class="px-6 py-4 border-b border-gray-200 bg-gray-50">
                <h2 class="text-lg font-semibold text-gray-900">Variantes predefinies</h2>
                <p class="text-sm text-gray-500 mt-1">Parametre : <code class="bg-gray-200 px-1 rounded">variant</code> - Configure automatiquement l'icone et les couleurs</p>
            </div>
            <div class="p-6">
                <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
                    {% include '_atoms/button/button.html.twig' with {
                        label: 'Info',
                        variant: 'outline',
                        color: 'info',
                        icon: 'info',
                        attr: { onclick: "openModal('demo-info')" }
                    } %}
                    {% include '_atoms/button/button.html.twig' with {
                        label: 'Success',
                        variant: 'outline',
                        color: 'success',
                        icon: 'check-circle',
                        attr: { onclick: "openModal('demo-success')" }
                    } %}
                    {% include '_atoms/button/button.html.twig' with {
                        label: 'Warning',
                        variant: 'outline',
                        color: 'warning',
                        icon: 'warning',
                        attr: { onclick: "openModal('demo-warning')" }
                    } %}
                    {% include '_atoms/button/button.html.twig' with {
                        label: 'Danger (Delete)',
                        variant: 'outline',
                        color: 'error',
                        icon: 'trash',
                        attr: { onclick: "openModal('demo-danger')" }
                    } %}
                </div>

                <div class="mt-6 bg-gray-900 rounded-lg p-4 overflow-x-auto">
                    <pre class="text-sm text-gray-100"><code>{% verbatim %}{# Footer automatique avec actionLabel, actionIcon, cancelLabel #}
{% embed '_molecules/modal/modal.html.twig' with {
    id: 'delete-modal',
    title: 'Supprimer l element',
    subtitle: 'Cette action est irreversible',
    variant: 'danger',
    actionLabel: 'Supprimer',
    actionIcon: 'trash',
    cancelLabel: 'Annuler'
} %}
    {% block body %}...{% endblock %}
    {# Pas besoin de block footer ! #}
{% endembed %}{% endverbatim %}</code></pre>
                </div>
            </div>
        </section>

        {# ===== FORMULAIRES ===== #}
        <section class="mb-12 bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
            <div class="px-6 py-4 border-b border-gray-200 bg-gray-50">
                <h2 class="text-lg font-semibold text-gray-900">Avec formulaire</h2>
                <p class="text-sm text-gray-500 mt-1">Le modal focus automatiquement le premier input a l'ouverture</p>
            </div>
            <div class="p-6">
                <div class="flex flex-wrap gap-4">
                    {% include '_atoms/button/button.html.twig' with {
                        label: 'Formulaire simple',
                        variant: 'primary',
                        icon: 'edit',
                        attr: { onclick: "openModal('demo-form-simple')" }
                    } %}
                    {% include '_atoms/button/button.html.twig' with {
                        label: 'Recherche utilisateurs',
                        variant: 'outline',
                        icon: 'search',
                        attr: { onclick: "openModal('demo-search')" }
                    } %}
                    {% include '_atoms/button/button.html.twig' with {
                        label: 'Formulaire complet',
                        variant: 'outline',
                        icon: 'user-add',
                        attr: { onclick: "openModal('demo-form-full')" }
                    } %}
                </div>
            </div>
        </section>

        {# ===== SIDE PANEL ===== #}
        <section class="mb-12 bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
            <div class="px-6 py-4 border-b border-gray-200 bg-gray-50">
                <h2 class="text-lg font-semibold text-gray-900">Side Panel</h2>
                <p class="text-sm text-gray-500 mt-1">Parametre : <code class="bg-gray-200 px-1 rounded">position: right | left</code> - Panel lateral au lieu de modal centre</p>
            </div>
            <div class="p-6">
                <div class="flex flex-wrap gap-4 mb-6">
                    {% include '_atoms/button/button.html.twig' with {
                        label: 'Panel Droite',
                        variant: 'primary',
                        icon: 'chevron-right',
                        attr: { onclick: "openModal('demo-panel-right')" }
                    } %}
                    {% include '_atoms/button/button.html.twig' with {
                        label: 'Panel Gauche',
                        variant: 'outline',
                        icon: 'chevron-left',
                        attr: { onclick: "openModal('demo-panel-left')" }
                    } %}
                    {% include '_atoms/button/button.html.twig' with {
                        label: 'Panel Parametres',
                        variant: 'ghost',
                        icon: 'settings',
                        attr: { onclick: "openModal('demo-panel-settings')" }
                    } %}
                </div>

                <div class="bg-gray-900 rounded-lg p-4 overflow-x-auto">
                    <pre class="text-sm text-gray-100"><code>{% verbatim %}{% embed '_molecules/modal/modal.html.twig' with {
    id: 'settings-panel',
    title: 'Parametres',
    icon: 'settings',
    position: 'right',
    size: 'md',
    actionLabel: 'Enregistrer',
    cancelLabel: 'Annuler'
} %}
    {% block body %}
        {# Contenu scrollable automatiquement #}
        ...
    {% endblock %}
{% endembed %}{% endverbatim %}</code></pre>
                </div>

                <div class="mt-4 p-4 bg-blue-50 rounded-lg border border-blue-200">
                    <p class="text-sm text-blue-800">
                        <strong>Note :</strong> En mode side-panel, le body est automatiquement scrollable
                        et prend toute la hauteur disponible. Le footer reste fixe en bas.
                    </p>
                </div>
            </div>
        </section>

        {# ===== TAILLES ===== #}
        <section class="mb-12 bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
            <div class="px-6 py-4 border-b border-gray-200 bg-gray-50">
                <h2 class="text-lg font-semibold text-gray-900">Tailles</h2>
                <p class="text-sm text-gray-500 mt-1">Parametre : <code class="bg-gray-200 px-1 rounded">size</code></p>
            </div>
            <div class="p-6">
                <div class="flex flex-wrap gap-4">
                    {% include '_atoms/button/button.html.twig' with {
                        label: 'Small (sm)',
                        variant: 'ghost',
                        size: 'sm',
                        attr: { onclick: "openModal('demo-sm')" }
                    } %}
                    {% include '_atoms/button/button.html.twig' with {
                        label: 'Medium (md)',
                        variant: 'ghost',
                        size: 'sm',
                        attr: { onclick: "openModal('demo-md')" }
                    } %}
                    {% include '_atoms/button/button.html.twig' with {
                        label: 'Large (lg)',
                        variant: 'ghost',
                        size: 'sm',
                        attr: { onclick: "openModal('demo-lg')" }
                    } %}
                    {% include '_atoms/button/button.html.twig' with {
                        label: 'XLarge (xl)',
                        variant: 'ghost',
                        size: 'sm',
                        attr: { onclick: "openModal('demo-xl')" }
                    } %}
                    {% include '_atoms/button/button.html.twig' with {
                        label: '2XLarge (2xl)',
                        variant: 'ghost',
                        size: 'sm',
                        attr: { onclick: "openModal('demo-2xl')" }
                    } %}
                </div>
            </div>
        </section>

        {# ===== PARAMETRES ===== #}
        <section class="mb-12 bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
            <div class="px-6 py-4 border-b border-gray-200 bg-gray-50">
                <h2 class="text-lg font-semibold text-gray-900">Parametres</h2>
            </div>
            <div class="p-6 overflow-x-auto">
                <table class="w-full text-sm">
                    <thead>
                        <tr class="border-b border-gray-200">
                            <th class="text-left py-2 px-3 font-medium text-gray-700">Parametre</th>
                            <th class="text-left py-2 px-3 font-medium text-gray-700">Type</th>
                            <th class="text-left py-2 px-3 font-medium text-gray-700">Defaut</th>
                            <th class="text-left py-2 px-3 font-medium text-gray-700">Description</th>
                        </tr>
                    </thead>
                    <tbody class="text-gray-600">
                        <tr class="border-b border-gray-100"><td class="py-2 px-3"><code>id</code></td><td class="py-2 px-3">string</td><td class="py-2 px-3">(requis)</td><td class="py-2 px-3">ID unique pour open/close</td></tr>
                        <tr class="border-b border-gray-100"><td class="py-2 px-3"><code>title</code></td><td class="py-2 px-3">string</td><td class="py-2 px-3">null</td><td class="py-2 px-3">Titre du modal</td></tr>
                        <tr class="border-b border-gray-100"><td class="py-2 px-3"><code>subtitle</code></td><td class="py-2 px-3">string</td><td class="py-2 px-3">null</td><td class="py-2 px-3">Sous-titre / description</td></tr>
                        <tr class="border-b border-gray-100 bg-blue-50"><td class="py-2 px-3"><code>variant</code></td><td class="py-2 px-3">string</td><td class="py-2 px-3">null</td><td class="py-2 px-3"><strong>info, success, warning, danger</strong> (configure icone/couleurs)</td></tr>
                        <tr class="border-b border-gray-100"><td class="py-2 px-3"><code>icon</code></td><td class="py-2 px-3">string</td><td class="py-2 px-3">auto</td><td class="py-2 px-3">Icone du header (auto si variant)</td></tr>
                        <tr class="border-b border-gray-100"><td class="py-2 px-3"><code>iconColor</code></td><td class="py-2 px-3">string</td><td class="py-2 px-3">auto</td><td class="py-2 px-3">Couleur de l'icone (auto si variant)</td></tr>
                        <tr class="border-b border-gray-100"><td class="py-2 px-3"><code>size</code></td><td class="py-2 px-3">string</td><td class="py-2 px-3">md</td><td class="py-2 px-3">sm, md, lg, xl, 2xl, full</td></tr>
                        <tr class="border-b border-gray-100 bg-purple-50"><td class="py-2 px-3"><code>position</code></td><td class="py-2 px-3">string</td><td class="py-2 px-3">center</td><td class="py-2 px-3"><strong>center, right, left</strong> (side-panel)</td></tr>
                        <tr class="border-b border-gray-100"><td class="py-2 px-3"><code>closable</code></td><td class="py-2 px-3">bool</td><td class="py-2 px-3">true</td><td class="py-2 px-3">Bouton fermeture X</td></tr>
                        <tr class="border-b border-gray-100"><td class="py-2 px-3"><code>closeOnOverlay</code></td><td class="py-2 px-3">bool</td><td class="py-2 px-3">true</td><td class="py-2 px-3">Fermer au clic sur overlay</td></tr>
                        <tr class="border-b border-gray-100 bg-green-50"><td class="py-2 px-3"><code>actionLabel</code></td><td class="py-2 px-3">string</td><td class="py-2 px-3">null</td><td class="py-2 px-3"><strong>Footer auto</strong> - Texte bouton action</td></tr>
                        <tr class="border-b border-gray-100 bg-green-50"><td class="py-2 px-3"><code>actionIcon</code></td><td class="py-2 px-3">string</td><td class="py-2 px-3">null</td><td class="py-2 px-3"><strong>Footer auto</strong> - Icone bouton action</td></tr>
                        <tr class="border-b border-gray-100 bg-green-50"><td class="py-2 px-3"><code>actionUrl</code></td><td class="py-2 px-3">string</td><td class="py-2 px-3">null</td><td class="py-2 px-3"><strong>Footer auto</strong> - URL form (bouton type=submit)</td></tr>
                        <tr class="border-b border-gray-100 bg-green-50"><td class="py-2 px-3"><code>cancelLabel</code></td><td class="py-2 px-3">string</td><td class="py-2 px-3">null</td><td class="py-2 px-3"><strong>Footer auto</strong> - Texte bouton annuler</td></tr>
                        <tr><td class="py-2 px-3"><code>class</code></td><td class="py-2 px-3">string</td><td class="py-2 px-3">''</td><td class="py-2 px-3">Classes additionnelles</td></tr>
                    </tbody>
                </table>
            </div>
        </section>

        {# ===== FONCTIONS JS ===== #}
        <section class="mb-12 bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
            <div class="px-6 py-4 border-b border-gray-200 bg-gray-50">
                <h2 class="text-lg font-semibold text-gray-900">Fonctions JavaScript</h2>
            </div>
            <div class="p-6">
                <div class="bg-gray-900 rounded-lg p-4 overflow-x-auto">
                    <pre class="text-sm text-gray-100"><code>// Ouvrir un modal
openModal('mon-modal-id');

// Fermer un modal
closeModal('mon-modal-id');

// Fermer avec la touche Escape (automatique)</code></pre>
                </div>
            </div>
        </section>

    </div>
</div>

{# ===================================================================
   MODALS DE DEMO - VARIANTES
   =================================================================== #}

{# Info - avec footer automatique #}
{% embed '_molecules/modal/modal.html.twig' with {
    id: 'demo-info',
    title: 'Information',
    subtitle: 'Voici quelques informations utiles',
    variant: 'info',
    actionLabel: 'Compris'
} %}
    {% block body %}
        <p class="text-gray-600">Cette fonctionnalite vous permet de creer des cours automatiquement a partir de vos documents PDF.</p>
        <p class="text-sm text-gray-500 mt-3">Formats supportes : PDF, DOCX, TXT</p>
    {% endblock %}
{% endembed %}

{# Success - avec footer automatique #}
{% embed '_molecules/modal/modal.html.twig' with {
    id: 'demo-success',
    title: 'Opération réussie',
    subtitle: 'Votre cours a été généré avec succès',
    variant: 'success',
    actionLabel: 'Voir le cours'
} %}
    {% block body %}
        <p class="text-gray-600">Le cours "Introduction à la programmation" est maintenant disponible dans votre espace.</p>
        <div class="mt-4 p-3 bg-success/10 rounded-lg">
            <p class="text-sm text-success font-medium">12 sections créées - 45 pages générées</p>
        </div>
    {% endblock %}
{% endembed %}

{# Warning - avec footer automatique #}
{% embed '_molecules/modal/modal.html.twig' with {
    id: 'demo-warning',
    title: 'Attention',
    subtitle: 'Votre quota de tokens est presque epuise',
    variant: 'warning',
    actionLabel: 'Recharger',
    cancelLabel: 'Plus tard'
} %}
    {% block body %}
        <p class="text-gray-600">Il vous reste moins de 1000 tokens. Certaines fonctionnalites pourraient etre limitees.</p>
        <div class="mt-4">
            {% include '_atoms/progress/progress.html.twig' with { value: 92, variant: 'warning', size: 'md' } %}
            <p class="text-xs text-gray-500 mt-2">920 / 1000 tokens utilises</p>
        </div>
    {% endblock %}
{% endembed %}

{# Danger / Delete - avec footer automatique et icone #}
{% embed '_molecules/modal/modal.html.twig' with {
    id: 'demo-danger',
    title: 'Supprimer le cours',
    subtitle: 'Cette action est irreversible',
    variant: 'danger',
    actionLabel: 'Supprimer',
    actionIcon: 'trash',
    cancelLabel: 'Annuler'
} %}
    {% block body %}
        <p class="text-gray-600">Êtes-vous sûr de vouloir supprimer le cours <strong>"Introduction à la programmation"</strong> ?</p>
        <div class="mt-4 p-3 bg-error/10 rounded-lg border border-error/20">
            <p class="text-sm text-error">Toutes les données associées seront définitivement perdues.</p>
        </div>
    {% endblock %}
{% endembed %}

{# ===================================================================
   MODALS DE DEMO - FORMULAIRES
   =================================================================== #}

{# Formulaire simple #}
{% embed '_molecules/modal/modal.html.twig' with {
    id: 'demo-form-simple',
    title: 'Renommer le cours',
    icon: 'edit',
    iconColor: 'primary'
} %}
    {% block body %}
        <form id="rename-form" class="space-y-4">
            {% include '_molecules/form/form-field.html.twig' with {
                label: 'Nouveau nom',
                name: 'course_name',
                value: 'Introduction a la programmation',
                placeholder: 'Entrez le nouveau nom...'
            } %}
        </form>
    {% endblock %}
    {% block footer %}
        {% include '_atoms/button/button.html.twig' with {
            label: 'Annuler',
            variant: 'ghost',
            size: 'lg',
            class: 'mr-auto',
            attr: { onclick: "closeModal('demo-form-simple')" }
        } only %}
        {% include '_atoms/button/button.html.twig' with {
            label: 'Enregistrer',
            variant: 'primary',
            size: 'lg',
            attr: { onclick: "closeModal('demo-form-simple')" }
        } only %}
    {% endblock %}
{% endembed %}

{# Recherche utilisateurs #}
{% embed '_molecules/modal/modal.html.twig' with {
    id: 'demo-search',
    title: 'Ajouter des participants',
    subtitle: 'Recherchez des utilisateurs a ajouter au cours',
    icon: 'users',
    iconColor: 'primary',
    size: 'lg'
} %}
    {% block body %}
        {# Barre de recherche #}
        <div class="mb-4">
            {% include '_molecules/search-bar/search-bar.html.twig' with {
                placeholder: 'Rechercher un utilisateur...',
                size: 'md'
            } %}
        </div>

        {# Liste de resultats (simulee) #}
        <div class="border border-gray-200 rounded-lg divide-y divide-gray-100 max-h-64 overflow-y-auto">
            {% for user in [
                { name: 'Jean Dupont', email: 'jean.dupont@email.com', selected: true },
                { name: 'Marie Martin', email: 'marie.martin@email.com', selected: false },
                { name: 'Pierre Durand', email: 'pierre.durand@email.com', selected: true },
                { name: 'Sophie Bernard', email: 'sophie.bernard@email.com', selected: false },
                { name: 'Lucas Petit', email: 'lucas.petit@email.com', selected: false }
            ] %}
                <label class="flex items-center gap-3 p-3 hover:bg-gray-50 cursor-pointer">
                    {% include '_atoms/form/checkbox.html.twig' with {
                        checked: user.selected
                    } %}
                    {% include '_atoms/avatar/avatar.html.twig' with {
                        name: user.name,
                        size: 'sm'
                    } %}
                    <div class="flex-1 min-w-0">
                        <p class="text-sm font-medium text-gray-900 truncate">{{ user.name }}</p>
                        <p class="text-xs text-gray-500 truncate">{{ user.email }}</p>
                    </div>
                </label>
            {% endfor %}
        </div>

        <p class="text-xs text-gray-500 mt-3">2 utilisateurs selectionnes</p>
    {% endblock %}
    {% block footer %}
        {% include '_atoms/button/button.html.twig' with {
            label: 'Annuler',
            variant: 'ghost',
            size: 'lg',
            class: 'mr-auto',
            attr: { onclick: "closeModal('demo-search')" }
        } only %}
        {% include '_atoms/button/button.html.twig' with {
            label: 'Ajouter (2)',
            variant: 'primary',
            size: 'lg',
            attr: { onclick: "closeModal('demo-search')" }
        } only %}
    {% endblock %}
{% endembed %}

{# Formulaire complet #}
{% embed '_molecules/modal/modal.html.twig' with {
    id: 'demo-form-full',
    title: 'Nouvel utilisateur',
    subtitle: 'Ajoutez un utilisateur a votre organisation',
    icon: 'user-add',
    iconColor: 'primary',
    size: 'lg'
} %}
    {% block body %}
        <form id="user-form" class="space-y-4">
            <div class="grid grid-cols-2 gap-4">
                {% include '_molecules/form/form-field.html.twig' with {
                    label: 'Prenom',
                    name: 'firstname',
                    placeholder: 'Jean',
                    required: true
                } %}
                {% include '_molecules/form/form-field.html.twig' with {
                    label: 'Nom',
                    name: 'lastname',
                    placeholder: 'Dupont',
                    required: true
                } %}
            </div>

            {% include '_molecules/form/form-field.html.twig' with {
                label: 'Email',
                name: 'email',
                type: 'email',
                placeholder: 'jean.dupont@email.com',
                required: true
            } %}

            {% include '_molecules/form/form-field.html.twig' with {
                label: 'Role',
                name: 'role',
                type: 'select',
                options: [
                    { value: 'user', label: 'Utilisateur' },
                    { value: 'admin', label: 'Administrateur' },
                    { value: 'teacher', label: 'Formateur' }
                ]
            } %}

            {% include '_atoms/form/checkbox.html.twig' with {
                name: 'send_invite',
                label: 'Envoyer une invitation par email',
                checked: true
            } %}
        </form>
    {% endblock %}
    {% block footer %}
        {% include '_atoms/button/button.html.twig' with {
            label: 'Annuler',
            variant: 'ghost',
            size: 'lg',
            class: 'mr-auto',
            attr: { onclick: "closeModal('demo-form-full')" }
        } only %}
        {% include '_atoms/button/button.html.twig' with {
            label: 'Creer l utilisateur',
            variant: 'primary',
            size: 'lg',
            attr: { onclick: "closeModal('demo-form-full')" }
        } only %}
    {% endblock %}
{% endembed %}

{# ===================================================================
   MODALS DE DEMO - TAILLES
   =================================================================== #}

{% embed '_molecules/modal/modal.html.twig' with { id: 'demo-sm', title: 'Small Modal', size: 'sm' } %}
    {% block body %}<p class="text-gray-600">Modal de petite taille (max-w-sm). Ideal pour les confirmations simples.</p>{% endblock %}
    {% block footer %}{% include '_atoms/button/button.html.twig' with { label: 'Fermer', variant: 'primary', size: 'lg', attr: { onclick: "closeModal('demo-sm')" } } only %}{% endblock %}
{% endembed %}

{% embed '_molecules/modal/modal.html.twig' with { id: 'demo-md', title: 'Medium Modal', size: 'md' } %}
    {% block body %}<p class="text-gray-600">Modal de taille moyenne (max-w-md). Taille par defaut, convient a la plupart des cas.</p>{% endblock %}
    {% block footer %}{% include '_atoms/button/button.html.twig' with { label: 'Fermer', variant: 'primary', size: 'lg', attr: { onclick: "closeModal('demo-md')" } } only %}{% endblock %}
{% endembed %}

{% embed '_molecules/modal/modal.html.twig' with { id: 'demo-lg', title: 'Large Modal', size: 'lg' } %}
    {% block body %}<p class="text-gray-600">Modal de grande taille (max-w-lg). Pour les formulaires avec plusieurs champs.</p>{% endblock %}
    {% block footer %}{% include '_atoms/button/button.html.twig' with { label: 'Fermer', variant: 'primary', size: 'lg', attr: { onclick: "closeModal('demo-lg')" } } only %}{% endblock %}
{% endembed %}

{% embed '_molecules/modal/modal.html.twig' with { id: 'demo-xl', title: 'Extra Large Modal', size: 'xl' } %}
    {% block body %}<p class="text-gray-600">Modal extra large (max-w-xl). Pour les formulaires complexes ou affichage de donnees.</p>{% endblock %}
    {% block footer %}{% include '_atoms/button/button.html.twig' with { label: 'Fermer', variant: 'primary', size: 'lg', attr: { onclick: "closeModal('demo-xl')" } } only %}{% endblock %}
{% endembed %}

{% embed '_molecules/modal/modal.html.twig' with { id: 'demo-2xl', title: '2XL Modal', size: '2xl' } %}
    {% block body %}<p class="text-gray-600">Modal 2XL (max-w-2xl). Pour les tableaux de donnees ou previews larges.</p>{% endblock %}
    {% block footer %}{% include '_atoms/button/button.html.twig' with { label: 'Fermer', variant: 'primary', size: 'lg', attr: { onclick: "closeModal('demo-2xl')" } } only %}{% endblock %}
{% endembed %}

{# ===================================================================
   MODALS DE DEMO - SIDE PANELS
   =================================================================== #}

{# Panel Droite #}
{% embed '_molecules/modal/modal.html.twig' with {
    id: 'demo-panel-right',
    title: 'Panel Droite',
    subtitle: 'Panel lateral ancre a droite',
    icon: 'settings',
    iconColor: 'primary',
    position: 'right',
    size: 'md',
    actionLabel: 'Enregistrer',
    cancelLabel: 'Annuler'
} %}
    {% block body %}
        <div class="space-y-6">
            <p class="text-gray-600">Ce panel est ancre a droite de l'ecran et prend toute la hauteur.</p>

            {% include '_molecules/form/form-field.html.twig' with {
                label: 'Nom du projet',
                name: 'project_name',
                placeholder: 'Mon projet...'
            } %}

            {% include '_molecules/form/form-field.html.twig' with {
                label: 'Description',
                name: 'description',
                type: 'textarea',
                rows: 4,
                placeholder: 'Description du projet...'
            } %}

            <div class="p-4 bg-gray-50 rounded-lg">
                <h4 class="font-medium text-gray-900 mb-2">Options</h4>
                {% include '_atoms/form/checkbox.html.twig' with { name: 'opt1', label: 'Option 1' } %}
                {% include '_atoms/form/checkbox.html.twig' with { name: 'opt2', label: 'Option 2', checked: true } %}
                {% include '_atoms/form/checkbox.html.twig' with { name: 'opt3', label: 'Option 3' } %}
            </div>
        </div>
    {% endblock %}
{% endembed %}

{# Panel Gauche #}
{% embed '_molecules/modal/modal.html.twig' with {
    id: 'demo-panel-left',
    title: 'Navigation',
    icon: 'list',
    iconColor: 'primary',
    position: 'left',
    size: 'sm'
} %}
    {% block body %}
        <nav class="space-y-1">
            {% for item in [
                { label: 'Dashboard', icon: 'home', active: true },
                { label: 'Cours', icon: 'book', active: false },
                { label: 'Utilisateurs', icon: 'users', active: false },
                { label: 'Statistiques', icon: 'chart', active: false },
                { label: 'Parametres', icon: 'settings', active: false }
            ] %}
                <a href="#" class="flex items-center gap-3 px-4 py-3 rounded-lg transition-colors {{ item.active ? 'bg-primary/10 text-primary' : 'text-gray-600 hover:bg-gray-100' }}">
                    {% include '_atoms/icon/icon.html.twig' with { name: item.icon, size: 'md' } only %}
                    <span class="font-medium">{{ item.label }}</span>
                </a>
            {% endfor %}
        </nav>
    {% endblock %}
    {% block footer %}
        {% include '_atoms/button/button.html.twig' with {
            label: 'Fermer',
            variant: 'ghost',
            size: 'lg',
            fullWidth: true,
            attr: { onclick: "closeModal('demo-panel-left')" }
        } only %}
    {% endblock %}
{% endembed %}

{# Panel Parametres complet #}
{% embed '_molecules/modal/modal.html.twig' with {
    id: 'demo-panel-settings',
    title: 'Parametres de l activite',
    subtitle: 'Configurez les options de cette activite',
    icon: 'settings',
    iconColor: 'primary',
    position: 'right',
    size: 'lg',
    actionLabel: 'Appliquer',
    cancelLabel: 'Annuler'
} %}
    {% block body %}
        <div class="space-y-6">
            {# Section 1 #}
            <div>
                <h3 class="font-semibold text-gray-900 mb-3">Informations generales</h3>
                {% include '_molecules/form/form-field.html.twig' with {
                    label: 'Titre',
                    name: 'title',
                    value: 'Introduction au cours'
                } %}
                {% include '_molecules/form/form-field.html.twig' with {
                    label: 'Duree estimee',
                    name: 'duration',
                    value: '15 minutes',
                    hint: 'Temps moyen pour completer cette activite'
                } %}
            </div>

            <hr class="border-gray-200">

            {# Section 2 #}
            <div>
                <h3 class="font-semibold text-gray-900 mb-3">Options d affichage</h3>
                <div class="space-y-3">
                    {% include '_atoms/form/checkbox.html.twig' with { name: 'show_nav', label: 'Afficher la navigation', checked: true } %}
                    {% include '_atoms/form/checkbox.html.twig' with { name: 'show_progress', label: 'Afficher la progression', checked: true } %}
                    {% include '_atoms/form/checkbox.html.twig' with { name: 'allow_skip', label: 'Autoriser a passer' } %}
                </div>
            </div>

            <hr class="border-gray-200">

            {# Section 3 #}
            <div>
                <h3 class="font-semibold text-gray-900 mb-3">Contenu additionnel</h3>
                <p class="text-sm text-gray-500 mb-3">Ajoutez du contenu supplementaire visible en bas de l'activite.</p>
                {% include '_molecules/form/form-field.html.twig' with {
                    label: 'Notes pour l apprenant',
                    name: 'notes',
                    type: 'textarea',
                    rows: 3,
                    placeholder: 'Conseils, ressources complementaires...'
                } %}
            </div>
        </div>
    {% endblock %}
{% endembed %}

{% endblock %}