{#
 # ============================================================================
 # ORGANISM: LOGIN FORM
 # ============================================================================
 #
 # Formulaire de connexion complet pour la page d'authentification.
 # Combine les atomes input, checkbox, 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/form/checkbox.html.twig
 # - _atoms/button/button.html.twig
 # - _atoms/logo/logo.html.twig
 #
 # ============================================================================
 # PARAMÈTRES
 # ============================================================================
 #
 # | Paramètre         | Type   | Défaut              | Description                    |
 # |-------------------|--------|---------------------|--------------------------------|
 # | action            | string | '#'                 | URL d'action du formulaire     |
 # | lastUsername      | string | ''                  | Dernier email saisi            |
 # | csrfToken         | string | ''                  | Token CSRF                     |
 # | targetPath        | string | '/dashboard'        | Redirection après connexion    |
 # | backLinkUrl       | string | '/'                 | URL du lien retour             |
 # | backLinkLabel     | string | 'Retour à l'accueil'| Texte du lien retour           |
 # | forgotPasswordUrl | string | '#'                 | URL mot de passe oublié        |
 # | registerUrl       | string | null                | URL inscription (null = caché) |
 # | class             | string | ''                  | Classes additionnelles         |
 #
 # ============================================================================
 #}

{# Configuration des valeurs par défaut #}
{% set action = action ?? '#' %}
{% set lastUsername = lastUsername ?? '' %}
{% set csrfToken = csrfToken ?? '' %}
{% set targetPath = targetPath ?? '/dashboard' %}
{% set backLinkUrl = backLinkUrl ?? '/' %}
{% set backLinkLabel = backLinkLabel ?? 'Retour à l\'accueil' %}
{% set forgotPasswordUrl = forgotPasswordUrl ?? '#' %}
{% set registerUrl = registerUrl ?? null %}
{% set class = class ?? '' %}

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

<div class="{{ containerClasses }}">
    {# ===== Lien retour — flottant en haut à gauche du viewport ===== #}
    <a href="{{ backLinkUrl }}"
       class="fixed top-4 sm:top-6 left-4 sm:left-6 z-50 inline-flex items-center gap-1.5 text-xs sm:text-sm text-gray-500 hover:text-gray-800 transition-colors duration-150 group">
        <svg class="w-3.5 h-3.5 transition-transform duration-150 group-hover:-translate-x-0.5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" d="M10 19l-7-7m0 0l7-7m-7 7h18"/>
        </svg>
        <span>{{ backLinkLabel }}</span>
    </a>

    {# ===== Logo Bubul — cliquable, taille modérée (scale mobile) ===== #}
    <div class="mb-6 sm:mb-10 flex justify-center">
        <a href="{{ backLinkUrl }}" class="inline-flex scale-90 sm:scale-100 origin-center" aria-label="Retour à l'accueil">
            {% include '_atoms/logo/logo-with-text.html.twig' with {
                showIcon: true,
                showBadge: false,
                size: 'lg'
            } only %}
        </a>
    </div>

    {# ===== Formulaire ===== #}
    <form method="post" action="{{ action }}" class="space-y-3 sm:space-y-4">
        {# Email #}
        {% include '_atoms/form/input.html.twig' with {
            type: 'email',
            name: '_username',
            id: 'email',
            placeholder: 'Identifiant',
            value: lastUsername,
            required: true,
            icon: 'mail',
            iconPosition: 'left',
            attr: { autofocus: 'autofocus' }
        } only %}

        {# Mot de passe #}
        {% include '_atoms/form/input.html.twig' with {
            type: 'password',
            name: '_password',
            id: 'password',
            icon: 'key',
            iconPosition: 'left',
            placeholder: 'Mot de passe',
            required: true
        } only %}

        {# Mot de passe oublié #}
        <div class="flex justify-end mt-1">
            {% include '_atoms/link/link.html.twig' with {
                label: 'Mot de passe oublié ?',
                href: forgotPasswordUrl,
                variant: 'muted',
                size: 'sm'
            } only %}
        </div>

        {# Champs cachés #}
        <input type="hidden" name="_csrf_token" value="{{ csrfToken }}">
        <input type="hidden" name="_target_path" value="{{ targetPath }}">

        {# Bouton de connexion #}
        <div>
            {% include '_atoms/button/button.html.twig' with {
                label: 'Se connecter',
                type: 'submit',
                variant: 'primary',
                size: 'lg',
                width: 'full',
                radius: 'lg'
            } only %}
        </div>
    </form>

    {# ===== Séparateur ===== #}
    <div class="my-5 flex items-center gap-3">
        <div class="flex-1 h-px bg-gray-200"></div>
        <span class="text-xs text-gray-400 shrink-0">ou</span>
        <div class="flex-1 h-px bg-gray-200"></div>
    </div>

    {# ===== SSO Google ===== #}
    <div>
        <a href="{{ path('app_google_connect') }}"
           class="flex items-center justify-center w-full gap-3 px-4 py-2.5 border border-gray-200 rounded-xl bg-white hover:bg-gray-50 transition-colors duration-150 group">
            {# Logo Google SVG officiel #}
            <svg width="20" height="20" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
                <path fill="#EA4335" d="M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z"/>
                <path fill="#4285F4" d="M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z"/>
                <path fill="#FBBC05" d="M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z"/>
                <path fill="#34A853" d="M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.18 1.48-4.97 2.31-8.16 2.31-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z"/>
                <path fill="none" d="M0 0h48v48H0z"/>
            </svg>
            <span class="text-sm text-gray-600 group-hover:text-gray-900 transition-colors">Continuer avec Google</span>
        </a>
    </div>

    {# ===== Lien inscription (optionnel) ===== #}
    {% if registerUrl %}
        <div class="mt-4 text-center">
            <span class="text-sm text-gray-500">Pas encore de compte ?</span>
            {% include '_atoms/link/link.html.twig' with {
                label: 'S\'inscrire',
                href: registerUrl,
                variant: 'primary',
                size: 'sm'
            } only %}
        </div>
    {% endif %}
</div>