{#
 # ============================================================================
 # ORGANISM: FORGOT PASSWORD FORM
 # ============================================================================
 #
 # Formulaire de récupération de mot de passe.
 # Combine les atomes input, button et les molécules back-link, form-link.
 #
 # ============================================================================
 # COMPOSITION (Molécules et Atomes utilisés)
 # ============================================================================
 #
 # - _atoms/link/link.html.twig
 # - _atoms/form/input.html.twig
 # - _atoms/button/button.html.twig
 #
 # ============================================================================
 # PARAMÈTRES
 # ============================================================================
 #
 # | Paramètre      | Type   | Défaut              | Description                    |
 # |----------------|--------|---------------------|--------------------------------|
 # | action         | string | '#'                 | URL d'action du formulaire     |
 # | backLinkUrl    | string | '/'                 | URL du lien retour             |
 # | backLinkLabel  | string | 'Retour à l'accueil'| Texte du lien retour           |
 # | loginUrl       | string | '#'                 | URL vers la page de connexion  |
 # | error          | string | null                | Message d'erreur               |
 # | success        | string | null                | Message de succès              |
 # | class          | string | ''                  | Classes additionnelles         |
 #
 # ============================================================================
 #}

{# Configuration des valeurs par défaut #}
{% set action = action ?? '#' %}
{% set backLinkUrl = backLinkUrl ?? '/' %}
{% set backLinkLabel = backLinkLabel ?? 'Retour à l\'accueil' %}
{% set loginUrl = loginUrl ?? '#' %}
{% set error = error ?? null %}
{% set success = success ?? null %}
{% set class = class ?? '' %}

{% set containerClasses = [
    'w-full max-w-md mx-auto',
    'px-6 py-8 lg:px-8 lg:py-12',
    class
]|join(' ')|trim %}

<div class="{{ containerClasses }}">
    {# ===== Lien retour ===== #}
    <div class="mb-8">
        {% include '_atoms/link/link.html.twig' with {
            label: backLinkLabel,
            href: backLinkUrl,
            variant: 'muted',
            icon: 'arrow-left',
            iconPosition: 'left',
            iconAnimate: true,
            size: 'sm'
        } only %}
    </div>

    {# ===== Titre et description ===== #}
    <div class="mb-3">
        <h1 class="text-2xl lg:text-3xl font-secondary font-medium text-black mb-3">
            Mot de passe oublié
        </h1>
        <p class="text-gray-600">
            Entrez votre adresse email et nous vous enverrons un lien pour réinitialiser votre mot de passe.
        </p>
    </div>

    {# ===== Message de succès ===== #}
    {% if success %}
        <div class="mb-6 p-4 bg-success/10 border border-success/20 rounded-lg">
            <p class="text-sm text-success flex items-center gap-2">
                <svg class="w-5 h-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>
                {{ success }}
            </p>
        </div>
    {% endif %}

    {# ===== Message d'erreur ===== #}
    {% if error %}
        <div class="mb-6 p-4 bg-error/10 border border-error/20 rounded-lg">
            <p class="text-sm text-error flex items-center gap-2">
                <svg class="w-5 h-5 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                </svg>
                {{ error }}
            </p>
        </div>
    {% endif %}

    {# ===== Formulaire ===== #}
    <form method="post" action="{{ action }}" class="space-y-5" data-turbo="false">
        {# Email #}
        {% include '_atoms/form/input.html.twig' with {
            type: 'email',
            name: 'email',
            id: 'email',
            icon: 'mail',
            iconPosition: 'left',
            placeholder: 'Adresse email',
            required: true,
            attr: { autofocus: 'autofocus' }
        } only %}

        {# Bouton d'envoi #}
        <div class="pt-2">
            {% include '_atoms/button/button.html.twig' with {
                label: 'Envoyer le lien de réinitialisation',
                type: 'submit',
                variant: 'primary',
                size: 'lg',
                width: 'full',
                radius: 'lg'
            } only %}
        </div>
    </form>

    {# ===== Lien vers connexion ===== #}
    <div class="mt-6 text-center">
        {% include '_atoms/link/link.html.twig' with {
            label: 'Retour à la connexion',
            href: loginUrl,
            variant: 'muted',
            size: 'md'
        } only %}
    </div>
</div>