{% extends 'base.html.twig' %}
{% block title %}Connexion{% endblock %}

{% block stylesheets %}
<style>
    .login-wrap { max-width:400px; margin:3.5rem auto; padding:0 1.4rem; }
    .login-card { border:1px solid var(--line); border-radius:16px; padding:2rem 1.8rem; box-shadow:var(--shadow); background:#fff; }
    .login-card h1 { margin:0 0 .3rem; font-size:1.6rem; }
    .login-card .sub { color:var(--ink-soft); margin:0 0 1.4rem; font-size:.92rem; }
    .login-field { margin-bottom:1rem; }
    .login-field label { display:block; font-weight:600; font-size:.9rem; margin-bottom:.35rem; }
    .login-field input { width:100%; padding:.65rem .75rem; border:1.5px solid var(--line); border-radius:9px; font:inherit; color:var(--ink); background:#fff; }
    .login-field input:focus { outline:none; border-color:var(--primaire); }
    .login-card .btn { width:100%; text-align:center; margin-top:.4rem; }
    .login-err { background:#fdeaea; color:#b3261e; padding:.7rem .9rem; border-radius:9px; font-size:.9rem; margin-bottom:1.1rem; font-weight:600; }
    .login-note { color:var(--ink-soft); font-size:.9rem; text-align:center; margin-top:1rem; }
</style>
{% endblock %}

{% block body %}
<div class="login-wrap">
    <div class="login-card">
        <h1>Connexion</h1>
        <p class="sub">Espace de gestion de l’association.</p>

        {% if error %}<div class="login-err">{{ error.messageKey|trans(error.messageData, 'security') }}</div>{% endif %}

        {% if app.user %}
            <p class="login-note">Connecté en tant que <strong>{{ app.user.userIdentifier }}</strong> — <a href="{{ path('logout') }}">Se déconnecter</a></p>
        {% else %}
        <form method="post">
            <div class="login-field">
                <label for="inputEmail">E-mail</label>
                <input type="email" id="inputEmail" name="_username" value="{{ last_username }}" required autofocus autocomplete="username">
            </div>
            <div class="login-field">
                <label for="inputPassword">Mot de passe</label>
                <input type="password" id="inputPassword" name="_password" required autocomplete="current-password">
            </div>
            <input type="hidden" name="_csrf_token" value="{{ csrf_token('authenticate') }}">
            <button class="btn primary" type="submit">Se connecter</button>
        </form>
        {% endif %}
    </div>
</div>
{% endblock %}