{# ══════════════════════════════════════════════════════════════
   templates/partials/_login_dropdown.html.twig
   Bouton + dropdown formulaire de connexion
   ══════════════════════════════════════════════════════════════ #}

<div class="header-wrapper" id="headerWrapper"
     data-controller="header-dropdown"
     data-header-dropdown-target="wrapper">

    {# Bouton déclencheur #}
    <button class="login-btn" id="loginToggle"
            aria-haspopup="true" aria-expanded="false"
            data-header-dropdown-target="toggle">
        <svg width="15" height="15" viewBox="0 0 24 24"
             fill="none" stroke="currentColor" stroke-width="2"
             stroke-linecap="round" stroke-linejoin="round">
            <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/>
            <circle cx="12" cy="7" r="4"/>
        </svg>
        Connexion
    </button>

    {# Dropdown #}
    <div class="header-dropdown" id="headerDropdown"
         role="dialog" aria-label="Formulaire de connexion"
         data-header-dropdown-target="dropdown">

        <span class="dropdown-title">Connexion</span>

        {# Afficher les messages d'erreur flash #}
        {% set errors = app.flashes('error') %}
        {% if errors %}
            <div class="login-error">
                {% for message in errors %}
                    <div class="alert alert-danger">{{ message }}</div>
                {% endfor %}
            </div>
        {% endif %}

        <form action="{{ path('app_login') }}" method="post" data-turbo="false">

            <div class="form-field">
                <label for="username">Pseudo</label>
                <input type="text"
                       id="username"
                       name="_username"
                       value="{{ last_username is defined ? last_username : '' }}"
                       autocomplete="username"
                       placeholder="Pseudo"
                       required>
            </div>

            <div class="form-field">
                <label for="password">Mot de passe</label>
                <input type="password"
                       id="password"
                       name="_password"
                       autocomplete="current-password"
                       placeholder="••••••••"
                       required>
            </div>

            <input type="hidden"
                   name="_csrf_token"
                   value="{{ csrf_token('authenticate') }}">

            {# Rediriger vers la page courante après connexion #}
            <input type="hidden"
                   name="_target_path"
                   value="{{ app.request.uri }}">

            {# Retenir la page courante pour y revenir en cas d'erreur #}
            <input type="hidden"
                   name="_failure_path"
                   value="{{ app.request.uri }}">

            <button class="submit-btn" type="submit">Se connecter</button>

        </form>

    </div>
</div>

