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

<div class="login-wrapper" id="loginWrapper">

    {# Bouton déclencheur #}
    <button class="login-btn" id="loginToggle"
            aria-haspopup="true" aria-expanded="false">
        <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="login-dropdown" id="loginDropdown"
         role="dialog" aria-label="Formulaire de connexion">

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

        <form action="{{ path('app_login') }}" method="post">

            <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') }}">

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

        </form>



    </div>
</div>