{% extends 'base.html.twig' %}

{% block title %}Connexion · LivreComment{% endblock %}
{% block body_class %}no-bottom-nav{% endblock %}

{% block body %}
    <div class="stack">
        <header class="stack-sm auth-hero">
            <img class="auth-hero__logo"
                 src="{{ asset('images/logo-wordmark.png') }}"
                 srcset="{{ asset('images/logo-wordmark@2x.png') }} 2x, {{ asset('images/logo-wordmark@3x.png') }} 3x"
                 alt="LivreComment"
                 width="137" height="48">
            <h1>Connexion</h1>
            <p class="muted">Heureux de te revoir.</p>
        </header>

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

        <div class="card">
            <form method="post" action="{{ path('app_login') }}" novalidate>
                <input type="hidden" name="_csrf_token" value="{{ csrf_token('authenticate') }}">

                <div class="field">
                    <label for="inputEmail">E-mail ou nom d'utilisateur</label>
                    <input
                        type="text"
                        id="inputEmail"
                        name="_username"
                        value="{{ last_username }}"
                        autocomplete="username"
                        required
                        autofocus
                        autocapitalize="off"
                        spellcheck="false"
                    >
                </div>

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

                <p style="text-align: right; margin: var(--space-2) 0 0; font-size: 0.9rem;">
                    <a href="{{ path('app_forgot_password_request') }}">Mot de passe oublié ?</a>
                </p>

                <button type="submit" class="btn btn--full" style="margin-top: var(--space-4);">Se connecter</button>
            </form>
        </div>

        <p class="text-center muted" style="font-size: 0.92rem;">
            Pas encore de compte ? <a href="{{ path('app_register') }}">Crée-en un</a>
        </p>
    </div>
{% endblock %}