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

{% block title %}FormField - 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]">FormField</h1>
                    </div>
                    <p class="text-sm text-gray-500">Champ de formulaire complet (Label + Input + Messages)</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="#concept" class="px-3 py-1.5 text-sm rounded-lg bg-primary/10 text-primary font-medium">Concept</a>
                <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="#exemple-login" class="px-3 py-1.5 text-sm rounded-lg bg-gray-100 text-gray-700 hover:bg-gray-200 transition-colors">Exemple Login</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>

        {# ===== CONCEPT MOLÉCULE ===== #}
        <section id="concept" class="mb-12 bg-gradient-to-br from-primary/5 to-primary/10 rounded-xl shadow-sm border border-primary/20 overflow-hidden">
            <div class="px-6 py-4 border-b border-primary/20">
                <div class="flex items-center gap-2">
                    <span class="text-2xl">🧬</span>
                    <h2 class="text-lg font-semibold text-gray-900">Qu'est-ce qu'une Molécule ?</h2>
                </div>
            </div>
            <div class="p-6">
                <div class="grid md:grid-cols-2 gap-6">
                    <div>
                        <h3 class="font-medium text-gray-900 mb-2">Atomic Design</h3>
                        <p class="text-gray-600 text-sm mb-4">
                            Une <strong>molécule</strong> combine plusieurs <strong>atomes</strong> pour créer un composant
                            fonctionnel réutilisable. Elle encapsule la logique de composition.
                        </p>
                        <div class="flex items-center gap-2 text-sm">
                            <span class="px-2 py-1 bg-blue-100 text-blue-700 rounded">Label</span>
                            <span class="text-gray-400">+</span>
                            <span class="px-2 py-1 bg-green-100 text-green-700 rounded">Input</span>
                            <span class="text-gray-400">+</span>
                            <span class="px-2 py-1 bg-red-100 text-red-700 rounded">Error</span>
                            <span class="text-gray-400">=</span>
                            <span class="px-2 py-1 bg-primary/20 text-primary rounded font-medium">FormField</span>
                        </div>
                    </div>
                    <div>
                        <h3 class="font-medium text-gray-900 mb-2">Avantages</h3>
                        <ul class="space-y-2 text-sm text-gray-600">
                            <li class="flex items-start gap-2">
                                <svg class="w-4 h-4 text-green-500 mt-0.5 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                                </svg>
                                <span><strong>DRY</strong> : Plus besoin de répéter label + input + error</span>
                            </li>
                            <li class="flex items-start gap-2">
                                <svg class="w-4 h-4 text-green-500 mt-0.5 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                                </svg>
                                <span><strong>Cohérence</strong> : Même structure partout</span>
                            </li>
                            <li class="flex items-start gap-2">
                                <svg class="w-4 h-4 text-green-500 mt-0.5 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                                </svg>
                                <span><strong>Maintenance</strong> : Un seul fichier à modifier</span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </section>

        {# ===== 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 FormField encapsule un label, un champ de saisie et les messages d'aide/erreur
                    en une seule inclusion. Il gère automatiquement l'accessibilité (for/id).
                </p>

                <div class="bg-gray-900 rounded-lg p-4 overflow-x-auto">
                    <pre class="text-sm text-gray-100"><code>{% verbatim %}{# Avant : 10+ lignes par champ #}
<div class="form-group">
    <label for="email">Email</label>
    <input type="email" id="email" name="email" required>
    {% if error %}<p class="error">{{ error }}</p>{% endif %}
</div>

{# Après avec FormField : 1 inclusion #}
{% include '_molecules/form/form-field.html.twig' with {
    name: 'email',
    label: 'Adresse email',
    type: 'email',
    placeholder: 'votre@email.com',
    required: true,
    error: form_errors
} %}{% 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-field.html.twig</code>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        {# ===== EXEMPLE FORMULAIRE LOGIN ===== #}
        <section id="exemple-login" 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">Exemple : Formulaire de connexion</h2>
                <p class="text-sm text-gray-500 mt-1">Démonstration de la réutilisabilité</p>
            </div>
            <div class="p-6">
                <div class="grid lg:grid-cols-2 gap-8">

                    {# Rendu visuel #}
                    <div>
                        <h3 class="text-sm font-medium text-gray-700 mb-4">Rendu</h3>
                        <div class="bg-gray-50 rounded-xl p-6 border border-gray-200">
                            <form class="space-y-4 max-w-sm">
                                {# Email #}
                                {% include '_molecules/form/form-field.html.twig' with {
                                    name: 'email',
                                    label: 'Adresse email',
                                    type: 'email',
                                    placeholder: 'votre@email.com',
                                    required: true,
                                    icon: 'mail'
                                } %}

                                {# Password #}
                                {% include '_molecules/form/form-field.html.twig' with {
                                    name: 'password',
                                    label: 'Mot de passe',
                                    type: 'password',
                                    placeholder: 'Votre mot de passe',
                                    required: true,
                                    icon: 'lock'
                                } %}

                                {# Remember me #}
                                {% include '_molecules/form/form-checkbox.html.twig' with {
                                    name: 'remember',
                                    label: 'Se souvenir de moi',
                                    checked: true
                                } %}

                                {# Submit #}
                                <div class="pt-2">
                                    {% include '_atoms/button/button.html.twig' with {
                                        label: 'Se connecter',
                                        type: 'submit',
                                        size: 'xl',
                                        width: 'full',
                                        iconPosition: 'left'
                                    } %}
                                </div>
                            </form>
                        </div>
                    </div>

                    {# Code #}
                    <div>
                        <h3 class="text-sm font-medium text-gray-700 mb-4">Code</h3>
                        <div class="bg-gray-900 rounded-lg p-4 overflow-x-auto h-full">
                            <pre class="text-sm text-gray-100"><code>{% verbatim %}<form class="space-y-4">
    {# Email #}
    {% include '_molecules/form/form-field.html.twig' with {
        name: 'email',
        label: 'Adresse email',
        type: 'email',
        placeholder: 'votre@email.com',
        required: true,
        icon: 'mail'
    } %}

    {# Password #}
    {% include '_molecules/form/form-field.html.twig' with {
        name: 'password',
        label: 'Mot de passe',
        type: 'password',
        placeholder: 'Votre mot de passe',
        required: true,
        icon: 'lock'
    } %}

    {# Remember me #}
    {% include '_molecules/form/form-checkbox.html.twig' with {
        name: 'remember',
        label: 'Se souvenir de moi',
        checked: true
    } %}

    {# Submit #}
    {% include '_atoms/button/button.html.twig' with {
        label: 'Se connecter',
        type: 'submit',
        width: 'full'
    } %}
</form>{% endverbatim %}</code></pre>
                        </div>
                    </div>
                </div>

                {# Comparaison avant/après #}
                <div class="mt-8 p-4 bg-green-50 border border-green-200 rounded-lg">
                    <h4 class="font-medium text-green-800 mb-2">Gain de productivité</h4>
                    <div class="grid sm:grid-cols-2 gap-4 text-sm">
                        <div class="flex items-center gap-2 text-red-600">
                            <span class="font-bold">Avant :</span> ~50 lignes de HTML répétitif
                        </div>
                        <div class="flex items-center gap-2 text-green-600">
                            <span class="font-bold">Après :</span> ~20 lignes avec molécules
                        </div>
                    </div>
                </div>
            </div>
        </section>

        {# ===== AVEC ERREURS ===== #}
        <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">Exemple avec erreurs</h2>
                <p class="text-sm text-gray-500 mt-1">Validation côté serveur</p>
            </div>
            <div class="p-6">
                <div class="bg-gray-50 rounded-xl p-6 border border-gray-200 max-w-md">
                    <form class="space-y-4">
                        {% include '_molecules/form/form-field.html.twig' with {
                            name: 'email_error',
                            label: 'Adresse email',
                            type: 'email',
                            value: 'test@invalid',
                            required: true,
                            icon: 'mail',
                            error: 'Cette adresse email n\'est pas valide'
                        } %}

                        {% include '_molecules/form/form-field.html.twig' with {
                            name: 'password_error',
                            label: 'Mot de passe',
                            type: 'password',
                            required: true,
                            icon: 'lock',
                            error: 'Le mot de passe doit contenir au moins 8 caractères'
                        } %}
                    </form>
                </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>
            </div>
            <div class="p-6 space-y-8">

                {# Types d'input #}
                <div>
                    <h3 class="text-sm font-medium text-gray-700 mb-4">Types de champs</h3>
                    <div class="grid md:grid-cols-2 gap-6">

                        {# Text #}
                        <div class="border border-gray-200 rounded-lg overflow-hidden">
                            <div class="p-4 bg-gray-50">
                                {% include '_molecules/form/form-field.html.twig' with {
                                    name: 'demo_text',
                                    label: 'Nom complet',
                                    type: 'text',
                                    placeholder: 'Jean Dupont'
                                } %}
                            </div>
                            <div class="p-3 border-t border-gray-200 bg-gray-900">
                                <code class="text-xs text-gray-300">type: 'text'</code>
                            </div>
                        </div>

                        {# Email #}
                        <div class="border border-gray-200 rounded-lg overflow-hidden">
                            <div class="p-4 bg-gray-50">
                                {% include '_molecules/form/form-field.html.twig' with {
                                    name: 'demo_email',
                                    label: 'Email',
                                    type: 'email',
                                    placeholder: 'email@example.com',
                                    icon: 'mail'
                                } %}
                            </div>
                            <div class="p-3 border-t border-gray-200 bg-gray-900">
                                <code class="text-xs text-gray-300">type: 'email', icon: 'mail'</code>
                            </div>
                        </div>

                        {# Password #}
                        <div class="border border-gray-200 rounded-lg overflow-hidden">
                            <div class="p-4 bg-gray-50">
                                {% include '_molecules/form/form-field.html.twig' with {
                                    name: 'demo_password',
                                    label: 'Mot de passe',
                                    type: 'password',
                                    placeholder: '********',
                                    icon: 'lock'
                                } %}
                            </div>
                            <div class="p-3 border-t border-gray-200 bg-gray-900">
                                <code class="text-xs text-gray-300">type: 'password', icon: 'lock'</code>
                            </div>
                        </div>

                        {# Search #}
                        <div class="border border-gray-200 rounded-lg overflow-hidden">
                            <div class="p-4 bg-gray-50">
                                {% include '_molecules/form/form-field.html.twig' with {
                                    name: 'demo_search',
                                    label: 'Rechercher',
                                    type: 'search',
                                    placeholder: 'Rechercher...',
                                    icon: 'search',
                                    srOnly: true
                                } %}
                            </div>
                            <div class="p-3 border-t border-gray-200 bg-gray-900">
                                <code class="text-xs text-gray-300">type: 'search', srOnly: true</code>
                            </div>
                        </div>

                    </div>
                </div>

                {# Textarea #}
                <div>
                    <h3 class="text-sm font-medium text-gray-700 mb-4">Textarea</h3>
                    <div class="border border-gray-200 rounded-lg overflow-hidden max-w-lg">
                        <div class="p-4 bg-gray-50">
                            {% include '_molecules/form/form-field.html.twig' with {
                                name: 'demo_description',
                                label: 'Description',
                                type: 'textarea',
                                placeholder: 'Décrivez votre projet...',
                                rows: 4,
                                hint: 'Maximum 500 caractères'
                            } %}
                        </div>
                        <div class="p-3 border-t border-gray-200 bg-gray-900">
                            <code class="text-xs text-gray-300">type: 'textarea', rows: 4</code>
                        </div>
                    </div>
                </div>

                {# File Upload #}
                <div>
                    <h3 class="text-sm font-medium text-gray-700 mb-4">File Upload</h3>
                    <div class="grid md:grid-cols-2 gap-6">

                        {# Simple file input #}
                        <div class="border border-gray-200 rounded-lg overflow-hidden">
                            <div class="p-4 bg-gray-50">
                                {% include '_molecules/form/form-field.html.twig' with {
                                    name: 'demo_file',
                                    label: 'Document',
                                    type: 'file',
                                    accept: '.pdf,.doc,.docx',
                                    hint: 'PDF ou Word, max 20 MB'
                                } %}
                            </div>
                            <div class="p-3 border-t border-gray-200 bg-gray-900">
                                <code class="text-xs text-gray-300">type: 'file', accept: '.pdf,.doc'</code>
                            </div>
                        </div>

                        {# Multiple files #}
                        <div class="border border-gray-200 rounded-lg overflow-hidden">
                            <div class="p-4 bg-gray-50">
                                {% include '_molecules/form/form-field.html.twig' with {
                                    name: 'demo_files',
                                    label: 'Images',
                                    type: 'file',
                                    accept: '.jpg,.png,.webp',
                                    multiple: true,
                                    hint: 'Plusieurs fichiers autorisés'
                                } %}
                            </div>
                            <div class="p-3 border-t border-gray-200 bg-gray-900">
                                <code class="text-xs text-gray-300">type: 'file', multiple: true</code>
                            </div>
                        </div>

                    </div>
                </div>

                {# Dropzone #}
                <div>
                    <h3 class="text-sm font-medium text-gray-700 mb-4">Dropzone (Drag & Drop)</h3>
                    <div class="grid md:grid-cols-2 gap-6">

                        {# Dropzone simple #}
                        <div class="border border-gray-200 rounded-lg overflow-hidden">
                            <div class="p-4 bg-gray-50">
                                {% include '_molecules/form/form-field.html.twig' with {
                                    name: 'demo_dropzone',
                                    label: 'Document PDF',
                                    type: 'file',
                                    dropzone: true,
                                    accept: '.pdf',
                                    maxSize: '20 MB'
                                } %}
                            </div>
                            <div class="p-3 border-t border-gray-200 bg-gray-900">
                                <code class="text-xs text-gray-300">dropzone: true, maxSize: '20 MB'</code>
                            </div>
                        </div>

                        {# Dropzone custom #}
                        <div class="border border-gray-200 rounded-lg overflow-hidden">
                            <div class="p-4 bg-gray-50">
                                {% include '_molecules/form/form-field.html.twig' with {
                                    name: 'demo_dropzone_custom',
                                    label: 'Template PowerPoint',
                                    type: 'file',
                                    dropzone: true,
                                    accept: '.pptx',
                                    maxSize: '50 MB',
                                    dropzoneText: 'Deposez votre template ici',
                                    dropzoneHint: 'Format PPTX uniquement'
                                } %}
                            </div>
                            <div class="p-3 border-t border-gray-200 bg-gray-900">
                                <code class="text-xs text-gray-300">dropzoneText: '...', dropzoneHint: '...'</code>
                            </div>
                        </div>

                    </div>
                </div>

                {# Tailles #}
                <div>
                    <h3 class="text-sm font-medium text-gray-700 mb-4">Tailles</h3>
                    <div class="space-y-4 max-w-lg">
                        {% include '_molecules/form/form-field.html.twig' with {
                            name: 'demo_sm',
                            label: 'Small',
                            placeholder: 'Taille sm',
                            size: 'sm'
                        } %}
                        {% include '_molecules/form/form-field.html.twig' with {
                            name: 'demo_md',
                            label: 'Medium (défaut)',
                            placeholder: 'Taille md',
                            size: 'md'
                        } %}
                        {% include '_molecules/form/form-field.html.twig' with {
                            name: 'demo_lg',
                            label: 'Large',
                            placeholder: 'Taille lg',
                            size: 'lg'
                        } %}
                    </div>
                </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">

                    {# Required #}
                    <div class="border border-gray-200 rounded-lg overflow-hidden">
                        <div class="p-4 bg-gray-50">
                            {% include '_molecules/form/form-field.html.twig' with {
                                name: 'demo_required',
                                label: 'Champ requis',
                                required: true,
                                placeholder: 'Obligatoire'
                            } %}
                        </div>
                        <div class="p-3 border-t border-gray-200 bg-gray-900">
                            <code class="text-xs text-gray-300">required: true</code>
                        </div>
                    </div>

                    {# Optional #}
                    <div class="border border-gray-200 rounded-lg overflow-hidden">
                        <div class="p-4 bg-gray-50">
                            {% include '_molecules/form/form-field.html.twig' with {
                                name: 'demo_optional',
                                label: 'Champ optionnel',
                                optional: true,
                                placeholder: 'Facultatif'
                            } %}
                        </div>
                        <div class="p-3 border-t border-gray-200 bg-gray-900">
                            <code class="text-xs text-gray-300">optional: true</code>
                        </div>
                    </div>

                    {# Disabled #}
                    <div class="border border-gray-200 rounded-lg overflow-hidden">
                        <div class="p-4 bg-gray-50">
                            {% include '_molecules/form/form-field.html.twig' with {
                                name: 'demo_disabled',
                                label: 'Champ désactivé',
                                value: 'Non modifiable',
                                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>

                    {# With hint #}
                    <div class="border border-gray-200 rounded-lg overflow-hidden">
                        <div class="p-4 bg-gray-50">
                            {% include '_molecules/form/form-field.html.twig' with {
                                name: 'demo_hint',
                                label: 'Avec aide',
                                placeholder: 'Tapez ici',
                                hint: 'Ce texte aide l\'utilisateur'
                            } %}
                        </div>
                        <div class="p-3 border-t border-gray-200 bg-gray-900">
                            <code class="text-xs text-gray-300">hint: 'Texte d\'aide'</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-field.html.twig' with {
                                name: 'demo_error',
                                label: 'Avec erreur',
                                value: 'Valeur invalide',
                                error: 'Ce champ contient une erreur'
                            } %}
                        </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>

                    {# With tooltip #}
                    <div class="border border-gray-200 rounded-lg overflow-hidden">
                        <div class="p-4 bg-gray-50">
                            {% include '_molecules/form/form-field.html.twig' with {
                                name: 'demo_tooltip',
                                label: 'Avec tooltip',
                                placeholder: 'Survolez le (i)',
                                labelTooltip: 'Information supplémentaire'
                            } %}
                        </div>
                        <div class="p-3 border-t border-gray-200 bg-gray-900">
                            <code class="text-xs text-gray-300">labelTooltip: 'Info'</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>null</code></td>
                            <td class="py-3 px-3">Texte du label</td>
                        </tr>
                        <tr class="border-b border-gray-100">
                            <td class="py-3 px-3"><code class="text-pink-600">type</code></td>
                            <td class="py-3 px-3">string</td>
                            <td class="py-3 px-3"><code>'text'</code></td>
                            <td class="py-3 px-3">text, email, password, textarea, number, etc.</td>
                        </tr>
                        <tr class="border-b border-gray-100">
                            <td class="py-3 px-3"><code class="text-pink-600">placeholder</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 placeholder</td>
                        </tr>
                        <tr class="border-b border-gray-100">
                            <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>''</code></td>
                            <td class="py-3 px-3">Valeur initiale</td>
                        </tr>
                        <tr class="border-b border-gray-100">
                            <td class="py-3 px-3"><code class="text-pink-600">required</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">Champ obligatoire (*)</td>
                        </tr>
                        <tr class="border-b border-gray-100">
                            <td class="py-3 px-3"><code class="text-pink-600">optional</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">Affiche "(optionnel)"</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">Champ désactivé</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</td>
                        </tr>
                        <tr class="border-b border-gray-100">
                            <td class="py-3 px-3"><code class="text-pink-600">icon</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">Nom de l'icône Solar</td>
                        </tr>
                        <tr class="border-b border-gray-100">
                            <td class="py-3 px-3"><code class="text-pink-600">iconPosition</code></td>
                            <td class="py-3 px-3">string</td>
                            <td class="py-3 px-3"><code>'left'</code></td>
                            <td class="py-3 px-3">left, right</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, filled</td>
                        </tr>
                        <tr class="border-b border-gray-100">
                            <td class="py-3 px-3"><code class="text-pink-600">srOnly</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">Label masqué (screen readers)</td>
                        </tr>
                        <tr class="border-b border-gray-100">
                            <td class="py-3 px-3"><code class="text-pink-600">labelTooltip</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">Tooltip sur le label</td>
                        </tr>
                        <tr class="border-b border-gray-100">
                            <td class="py-3 px-3"><code class="text-pink-600">rows</code></td>
                            <td class="py-3 px-3">number</td>
                            <td class="py-3 px-3"><code>4</code></td>
                            <td class="py-3 px-3">Lignes (textarea only)</td>
                        </tr>
                        <tr class="border-b border-gray-100 bg-purple-50">
                            <td class="py-3 px-3" colspan="4"><strong class="text-purple-700">Parametres type: file</strong></td>
                        </tr>
                        <tr class="border-b border-gray-100">
                            <td class="py-3 px-3"><code class="text-pink-600">accept</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">Types acceptes (ex: '.pdf,.doc')</td>
                        </tr>
                        <tr class="border-b border-gray-100">
                            <td class="py-3 px-3"><code class="text-pink-600">multiple</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">Autoriser plusieurs fichiers</td>
                        </tr>
                        <tr class="border-b border-gray-100">
                            <td class="py-3 px-3"><code class="text-pink-600">dropzone</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">Mode drag & drop</td>
                        </tr>
                        <tr class="border-b border-gray-100">
                            <td class="py-3 px-3"><code class="text-pink-600">maxSize</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">Taille max affichee (ex: '20 MB')</td>
                        </tr>
                        <tr class="border-b border-gray-100">
                            <td class="py-3 px-3"><code class="text-pink-600">dropzoneText</code></td>
                            <td class="py-3 px-3">string</td>
                            <td class="py-3 px-3"><code>'Glissez...'</code></td>
                            <td class="py-3 px-3">Texte principal dropzone</td>
                        </tr>
                        <tr>
                            <td class="py-3 px-3"><code class="text-pink-600">dropzoneHint</code></td>
                            <td class="py-3 px-3">string</td>
                            <td class="py-3 px-3"><code>'ou cliquez...'</code></td>
                            <td class="py-3 px-3">Texte secondaire dropzone</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </section>

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