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

{% block title %}FormCheckbox - Molécules - 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">Molécules</span>
                        <span class="text-gray-300">/</span>
                        <h1 class="text-xl font-bold text-gray-900 font-[Poppins]">FormCheckbox</h1>
                    </div>
                    <p class="text-sm text-gray-500">Checkbox avec label et messages intégrés</p>
                </div>
            </div>
        </div>
    </header>

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

        {# ===== NAVIGATION RAPIDE ===== #}
        <nav class="mb-8 bg-white rounded-xl p-4 shadow-sm border border-gray-200">
            <div class="flex flex-wrap gap-2">
                <a href="#usage" class="px-3 py-1.5 text-sm rounded-lg bg-gray-100 text-gray-700 hover:bg-gray-200 transition-colors">Usage</a>
                <a href="#variantes" class="px-3 py-1.5 text-sm rounded-lg bg-gray-100 text-gray-700 hover:bg-gray-200 transition-colors">Variantes</a>
                <a href="#etats" class="px-3 py-1.5 text-sm rounded-lg bg-gray-100 text-gray-700 hover:bg-gray-200 transition-colors">États</a>
                <a href="#parametres" class="px-3 py-1.5 text-sm rounded-lg bg-gray-100 text-gray-700 hover:bg-gray-200 transition-colors">Paramètres</a>
            </div>
        </nav>

        {# ===== USAGE ===== #}
        <section id="usage" 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">Usage</h2>
            </div>
            <div class="p-6">
                <p class="text-gray-600 mb-4">
                    Le composant FormCheckbox combine une checkbox stylisée avec son label et les messages d'erreur/aide.
                    Idéal pour les formulaires : conditions, newsletters, préférences.
                </p>

                <div class="bg-gray-900 rounded-lg p-4 overflow-x-auto">
                    <pre class="text-sm text-gray-100"><code>{% verbatim %}{% include '_molecules/form/form-checkbox.html.twig' with {
    name: 'terms',
    label: 'J\'accepte les conditions générales',
    required: true
} %}

{# Avec aide #}
{% include '_molecules/form/form-checkbox.html.twig' with {
    name: 'newsletter',
    label: 'Recevoir la newsletter',
    hint: 'Maximum une fois par semaine',
    checked: true
} %}{% endverbatim %}</code></pre>
                </div>

                <div class="mt-4 p-4 bg-blue-50 border border-blue-200 rounded-lg">
                    <div class="flex gap-2">
                        <svg class="w-5 h-5 text-blue-600 shrink-0 mt-0.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>
                        <div class="text-sm text-blue-800">
                            <strong>Fichier :</strong> <code class="bg-blue-100 px-1 rounded">templates/_molecules/form/form-checkbox.html.twig</code>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        {# ===== EXEMPLES ===== #}
        <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">Exemples courants</h2>
            </div>
            <div class="p-6">
                <div class="space-y-6 max-w-lg">

                    {# Simple #}
                    <div class="border border-gray-200 rounded-lg overflow-hidden">
                        <div class="p-4 bg-gray-50">
                            {% include '_molecules/form/form-checkbox.html.twig' with {
                                name: 'demo_simple',
                                label: 'Se souvenir de moi'
                            } %}
                        </div>
                        <div class="p-3 border-t border-gray-200 bg-gray-900">
                            <code class="text-xs text-gray-300">label: 'Se souvenir de moi'</code>
                        </div>
                    </div>

                    {# Checked #}
                    <div class="border border-gray-200 rounded-lg overflow-hidden">
                        <div class="p-4 bg-gray-50">
                            {% include '_molecules/form/form-checkbox.html.twig' with {
                                name: 'demo_checked',
                                label: 'Activer les notifications',
                                checked: true
                            } %}
                        </div>
                        <div class="p-3 border-t border-gray-200 bg-gray-900">
                            <code class="text-xs text-gray-300">checked: true</code>
                        </div>
                    </div>

                    {# With hint #}
                    <div class="border border-gray-200 rounded-lg overflow-hidden">
                        <div class="p-4 bg-gray-50">
                            {% include '_molecules/form/form-checkbox.html.twig' with {
                                name: 'demo_hint',
                                label: 'Recevoir la newsletter',
                                hint: 'Une fois par semaine maximum, pas de spam',
                                checked: true
                            } %}
                        </div>
                        <div class="p-3 border-t border-gray-200 bg-gray-900">
                            <code class="text-xs text-gray-300">hint: 'Une fois par semaine...'</code>
                        </div>
                    </div>

                </div>
            </div>
        </section>

        {# ===== VARIANTES ===== #}
        <section id="variantes" 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</h2>
                <p class="text-sm text-gray-500 mt-1">Paramètre : <code class="bg-gray-200 px-1 rounded">variant</code></p>
            </div>
            <div class="p-6">
                <div class="grid md:grid-cols-2 gap-6 max-w-3xl">

                    {# Default #}
                    <div class="border border-gray-200 rounded-lg overflow-hidden">
                        <div class="p-4 bg-gray-50">
                            {% include '_molecules/form/form-checkbox.html.twig' with {
                                name: 'demo_default',
                                label: 'Style par défaut',
                                variant: 'default'
                            } %}
                        </div>
                        <div class="p-3 border-t border-gray-200 bg-gray-900">
                            <code class="text-xs text-gray-300">variant: 'default'</code>
                        </div>
                    </div>

                    {# Card #}
                    <div class="border border-gray-200 rounded-lg overflow-hidden">
                        <div class="p-4 bg-gray-50">
                            {% include '_molecules/form/form-checkbox.html.twig' with {
                                name: 'demo_card',
                                label: 'Style carte',
                                hint: 'Plus visible, idéal pour les options importantes',
                                variant: 'card'
                            } %}
                        </div>
                        <div class="p-3 border-t border-gray-200 bg-gray-900">
                            <code class="text-xs text-gray-300">variant: 'card'</code>
                        </div>
                    </div>

                </div>

                {# Exemple groupe de cards #}
                <h3 class="text-sm font-medium text-gray-700 mt-8 mb-4">Groupe de sélection (cards)</h3>
                <div class="space-y-3 max-w-md">
                    {% include '_molecules/form/form-checkbox.html.twig' with {
                        name: 'options[]',
                        value: 'email',
                        label: 'Notifications par email',
                        hint: 'Recevez les alertes importantes',
                        variant: 'card',
                        checked: true
                    } %}
                    {% include '_molecules/form/form-checkbox.html.twig' with {
                        name: 'options[]',
                        value: 'sms',
                        label: 'Notifications SMS',
                        hint: 'Pour les urgences uniquement',
                        variant: 'card'
                    } %}
                    {% include '_molecules/form/form-checkbox.html.twig' with {
                        name: 'options[]',
                        value: 'push',
                        label: 'Notifications push',
                        hint: 'Dans votre navigateur',
                        variant: 'card',
                        checked: true
                    } %}
                </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">Paramètre : <code class="bg-gray-200 px-1 rounded">size</code></p>
            </div>
            <div class="p-6">
                <div class="space-y-4 max-w-lg">
                    {% include '_molecules/form/form-checkbox.html.twig' with {
                        name: 'size_sm',
                        label: 'Small',
                        size: 'sm'
                    } %}
                    {% include '_molecules/form/form-checkbox.html.twig' with {
                        name: 'size_md',
                        label: 'Medium (défaut)',
                        size: 'md'
                    } %}
                    {% include '_molecules/form/form-checkbox.html.twig' with {
                        name: 'size_lg',
                        label: 'Large',
                        size: 'lg'
                    } %}
                </div>
            </div>
        </section>

        {# ===== ÉTATS ===== #}
        <section id="etats" 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">États</h2>
            </div>
            <div class="p-6">
                <div class="grid md:grid-cols-2 gap-6 max-w-3xl">

                    {# Disabled unchecked #}
                    <div class="border border-gray-200 rounded-lg overflow-hidden">
                        <div class="p-4 bg-gray-50">
                            {% include '_molecules/form/form-checkbox.html.twig' with {
                                name: 'demo_disabled',
                                label: 'Option désactivée',
                                disabled: true
                            } %}
                        </div>
                        <div class="p-3 border-t border-gray-200 bg-gray-900">
                            <code class="text-xs text-gray-300">disabled: true</code>
                        </div>
                    </div>

                    {# Disabled checked #}
                    <div class="border border-gray-200 rounded-lg overflow-hidden">
                        <div class="p-4 bg-gray-50">
                            {% include '_molecules/form/form-checkbox.html.twig' with {
                                name: 'demo_disabled_checked',
                                label: 'Coché et désactivé',
                                disabled: true,
                                checked: true
                            } %}
                        </div>
                        <div class="p-3 border-t border-gray-200 bg-gray-900">
                            <code class="text-xs text-gray-300">disabled: true, checked: true</code>
                        </div>
                    </div>

                    {# With error #}
                    <div class="border border-gray-200 rounded-lg overflow-hidden">
                        <div class="p-4 bg-gray-50">
                            {% include '_molecules/form/form-checkbox.html.twig' with {
                                name: 'demo_error',
                                label: 'J\'accepte les conditions',
                                error: 'Vous devez accepter les conditions pour continuer'
                            } %}
                        </div>
                        <div class="p-3 border-t border-gray-200 bg-gray-900">
                            <code class="text-xs text-gray-300">error: 'Message d\'erreur'</code>
                        </div>
                    </div>

                </div>
            </div>
        </section>

        {# ===== PARAMÈTRES ===== #}
        <section id="parametres" 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">Référence des paramètres</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-3 px-3 font-medium text-gray-700">Paramètre</th>
                            <th class="text-left py-3 px-3 font-medium text-gray-700">Type</th>
                            <th class="text-left py-3 px-3 font-medium text-gray-700">Défaut</th>
                            <th class="text-left py-3 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-3 px-3"><code class="text-pink-600">name</code></td>
                            <td class="py-3 px-3">string</td>
                            <td class="py-3 px-3"><code>''</code></td>
                            <td class="py-3 px-3">Nom du champ (requis)</td>
                        </tr>
                        <tr class="border-b border-gray-100">
                            <td class="py-3 px-3"><code class="text-pink-600">label</code></td>
                            <td class="py-3 px-3">string</td>
                            <td class="py-3 px-3"><code>''</code></td>
                            <td class="py-3 px-3">Texte du label (requis)</td>
                        </tr>
                        <tr class="border-b border-gray-100">
                            <td class="py-3 px-3"><code class="text-pink-600">checked</code></td>
                            <td class="py-3 px-3">bool</td>
                            <td class="py-3 px-3"><code>false</code></td>
                            <td class="py-3 px-3">État coché initial</td>
                        </tr>
                        <tr class="border-b border-gray-100">
                            <td class="py-3 px-3"><code class="text-pink-600">disabled</code></td>
                            <td class="py-3 px-3">bool</td>
                            <td class="py-3 px-3"><code>false</code></td>
                            <td class="py-3 px-3">Désactiver le champ</td>
                        </tr>
                        <tr class="border-b border-gray-100">
                            <td class="py-3 px-3"><code class="text-pink-600">error</code></td>
                            <td class="py-3 px-3">string</td>
                            <td class="py-3 px-3"><code>null</code></td>
                            <td class="py-3 px-3">Message d'erreur</td>
                        </tr>
                        <tr class="border-b border-gray-100">
                            <td class="py-3 px-3"><code class="text-pink-600">hint</code></td>
                            <td class="py-3 px-3">string</td>
                            <td class="py-3 px-3"><code>null</code></td>
                            <td class="py-3 px-3">Texte d'aide sous le label</td>
                        </tr>
                        <tr class="border-b border-gray-100">
                            <td class="py-3 px-3"><code class="text-pink-600">size</code></td>
                            <td class="py-3 px-3">string</td>
                            <td class="py-3 px-3"><code>'md'</code></td>
                            <td class="py-3 px-3">sm, md, lg</td>
                        </tr>
                        <tr class="border-b border-gray-100">
                            <td class="py-3 px-3"><code class="text-pink-600">variant</code></td>
                            <td class="py-3 px-3">string</td>
                            <td class="py-3 px-3"><code>'default'</code></td>
                            <td class="py-3 px-3">default, card</td>
                        </tr>
                        <tr>
                            <td class="py-3 px-3"><code class="text-pink-600">value</code></td>
                            <td class="py-3 px-3">string</td>
                            <td class="py-3 px-3"><code>'1'</code></td>
                            <td class="py-3 px-3">Valeur envoyée si coché</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </section>

    </div>
</div>
{% endblock %}