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

{% block title %}Connexion{% endblock %}

{% block body %}
<div class="auth-grid ta-auth-grid">
    {% include 'auth/_auth_aside.html.twig' %}
    <div class="ta-auth-form-wrap">
        <form method="post" class="ta-auth-form">
            {% if error %}
                <div class="flash flash-danger" data-lpf-alert-dismiss="persist" role="alert">{{ error.messageKey|trans(error.messageData, 'security') }}</div>
            {% endif %}

            <h1 class="section-title ta-auth-title">Connexion</h1>
            <p class="ta-auth-lead">Entre ton email et ton mot de passe pour te connecter.</p>
            <label for="inputEmail">Email*</label>
            <input type="email" value="{{ last_username }}" name="email" id="inputEmail" autocomplete="email" required autofocus>
            <label for="inputPassword">Mot de passe*</label>
            <div class="ta-auth-password-wrap">
                <input type="password" name="password" id="inputPassword" autocomplete="current-password" required>
                <button
                    type="button"
                    class="ta-auth-password-toggle"
                    id="toggleLoginPassword"
                    aria-controls="inputPassword"
                    aria-pressed="false"
                    aria-label="Afficher le mot de passe en clair"
                >
                    <i class="ti ti-eye" aria-hidden="true"></i>
                </button>
            </div>
            <p class="ta-auth-check"><label><input type="checkbox" name="_remember_me"> Rester connecté</label></p>

            <button type="submit" class="ta-auth-submit">
                Se connecter
                <i class="ti ti-login" aria-hidden="true"></i>
            </button>
            <p class="ta-auth-link-row"><a href="{{ path('app_forgot_password_request') }}">Mot de passe oublié ?</a></p>
            <p class="ta-auth-link-row">Pas encore de compte ? <a href="{{ path('app_register') }}">Créer un compte</a></p>
        </form>
    </div>
</div>
<script>
(function () {
    var input = document.getElementById('inputPassword');
    var btn = document.getElementById('toggleLoginPassword');
    if (!input || !btn) {
        return;
    }
    var icon = btn.querySelector('i');
    btn.addEventListener('click', function () {
        var show = input.type === 'password';
        input.type = show ? 'text' : 'password';
        btn.setAttribute('aria-pressed', show ? 'true' : 'false');
        btn.setAttribute('aria-label', show ? 'Masquer le mot de passe' : 'Afficher le mot de passe en clair');
        if (icon) {
            icon.className = show ? 'ti ti-eye-off' : 'ti ti-eye';
        }
    });
})();
</script>
{% endblock %}