{#
 # ============================================================================
 # MOLECULE: FORM-CHECKBOX
 # ============================================================================
 #
 # Checkbox avec label inline et messages.
 # Molécule réutilisable pour tous les formulaires de l'application.
 #
 # ============================================================================
 # COMPOSITION (Atomes utilisés)
 # ============================================================================
 #
 # - _atoms/form/checkbox.html.twig
 #
 # ============================================================================
 # PARAMÈTRES
 # ============================================================================
 #
 # | Paramètre      | Type    | Défaut    | Description                              |
 # |----------------|---------|-----------|------------------------------------------|
 # | name           | string  | (requis)  | Nom du champ                             |
 # | label          | string  | (requis)  | Texte du label                           |
 # | checked        | bool    | false     | État coché                               |
 # | disabled       | bool    | false     | Champ désactivé                          |
 # | error          | string  | null      | Message d'erreur                         |
 # | hint           | string  | null      | Texte d'aide                             |
 # | size           | string  | 'md'      | Taille: sm, md, lg                       |
 # | variant        | string  | 'default' | Style: default, card                     |
 # | value          | string  | '1'       | Valeur quand coché                       |
 # | class          | string  | ''        | Classes additionnelles                   |
 #
 # ============================================================================
 # EXEMPLES D'UTILISATION
 # ============================================================================
 #
 # Checkbox simple:
 # {% include '_molecules/form/form-checkbox.html.twig' with {
 #     name: 'remember_me',
 #     label: 'Se souvenir de moi',
 #     checked: true
 # } %}
 #
 # Avec erreur:
 # {% include '_molecules/form/form-checkbox.html.twig' with {
 #     name: 'terms',
 #     label: 'J\'accepte les conditions',
 #     error: 'Vous devez accepter les conditions'
 # } %}
 #
 # Style card:
 # {% include '_molecules/form/form-checkbox.html.twig' with {
 #     name: 'newsletter',
 #     label: 'Recevoir la newsletter',
 #     hint: 'Une fois par semaine maximum',
 #     variant: 'card'
 # } %}
 #
 # ============================================================================
 #}

{# ============================================================================
   CONFIGURATION DES VALEURS PAR DÉFAUT
   ============================================================================ #}

{% set name = name ?? '' %}
{% set label = label ?? '' %}
{% set checked = checked ?? false %}
{% set disabled = disabled ?? false %}
{% set error = error ?? null %}
{% set hint = hint ?? null %}
{% set size = size ?? 'md' %}
{% set variant = variant ?? 'default' %}
{% set value = value ?? '1' %}
{% set class = class ?? '' %}

{# ID auto-généré #}
{% set fieldId = 'checkbox-' ~ name %}

{# ============================================================================
   CLASSES TAILWIND - TAILLES
   ============================================================================ #}

{% set checkboxSizes = {
    'sm': 'w-4 h-4',
    'md': 'w-5 h-5',
    'lg': 'w-6 h-6'
} %}

{% set labelSizes = {
    'sm': 'text-xs',
    'md': 'text-sm',
    'lg': 'text-base'
} %}

{# ============================================================================
   CLASSES TAILWIND - VARIANTES
   ============================================================================ #}

{% set wrapperClasses = {
    'default': 'flex items-start gap-3',
    'card': 'flex items-start gap-3 p-4 border-2 border-gray-200 rounded-lg hover:border-primary/50 transition-colors has-[:checked]:border-primary has-[:checked]:bg-primary/5'
} %}

{# ============================================================================
   RENDU HTML
   ============================================================================ #}

<div class="{{ class }}">
    <label class="{{ wrapperClasses[variant] ?? wrapperClasses['default'] }} {{ disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer' }}">
        {# Checkbox custom #}
        <div class="relative shrink-0 mt-0.5">
            <input
                type="checkbox"
                id="{{ fieldId }}"
                name="{{ name }}"
                value="{{ value }}"
                {% if checked %}checked{% endif %}
                {% if disabled %}disabled{% endif %}
                class="peer sr-only"
            >
            <div class="{{ checkboxSizes[size] ?? checkboxSizes['md'] }} border-2 rounded transition-all duration-150
                {{ error ? 'border-error' : 'border-gray-300' }}
                peer-checked:bg-primary peer-checked:border-primary
                peer-focus:ring-2 peer-focus:ring-primary/20
                peer-disabled:bg-gray-100 peer-disabled:border-gray-200
                flex items-center justify-center">
                {# Checkmark #}
                <svg class="w-3 h-3 text-white opacity-0 peer-checked:opacity-100 transition-opacity" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"/>
                </svg>
            </div>
            {# Overlay pour le check #}
            <svg class="absolute inset-0 w-full h-full text-white opacity-0 pointer-events-none hidden peer-checked:block peer-checked:opacity-100 transition-opacity p-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"/>
            </svg>
        </div>

        {# Label et hint #}
        <div class="flex-1">
            <span class="{{ labelSizes[size] ?? labelSizes['md'] }} font-medium text-gray-700 {{ disabled ? 'text-gray-400' : '' }}">
                {{ label }}
            </span>
            {% if hint %}
                <p class="mt-0.5 text-xs text-gray-500">{{ hint }}</p>
            {% endif %}
        </div>
    </label>

    {# Error message #}
    {% if error %}
        <p class="mt-1.5 text-sm text-error flex items-center gap-1">
            {% include '_atoms/icon/icon.html.twig' with {
                name: 'alert',
                size: 'xs'
            } only %}
            {{ error }}
        </p>
    {% endif %}
</div>