{% extends 'base.html.twig' %}
{#
  ══════════════════════════════════════════════════════════════════
  Template de connexion — security/login.html.twig
  ══════════════════════════════════════════════════════════════════
  Page de connexion autonome : aucune sidebar ni topbar ne s'affiche
  (app.user est null → les blocs conditionnels de base.html.twig
  sont ignorés).

  Fonctionnement du formulaire :
    - Action        : POST vers app_login (check_path = app_login)
    - Identifiant   : champ _username (mapped sur User::email)
    - Mot de passe  : champ _password
    - CSRF          : token 'authenticate' (stateless, signé par APP_SECRET)
    - Remember-me   : case _remember_me (cookie 7 jours, httponly, SameSite=Lax)

  Gestion des erreurs :
    $error est injecté par SecurityController::login() via
    AuthenticationUtils::getLastAuthenticationError().
    Le message est traduit via le domaine 'security'.

  Styles :
    Tous les styles sont déclarés en ligne dans le bloc body
    (pas de fichier CSS dédié) pour garder la page autonome.
    Palette : vert #79b92c (bouton, focus, accent), gris clair (fond).
  ══════════════════════════════════════════════════════════════════
#}

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

{% block body %}
{# Carte centrée sur fond gris — occupe toute la hauteur de l'écran #}
<div class="login-page">
    <div class="login-card">

        {# En-tête : logo + sous-titre de l'application #}
        <div class="login-card-header">
            <img src="{{ asset('images/CULTURE_CONTROLE_LOGO_NOIR.png') }}" alt="Culture Controle" class="login-logo">
            <p class="login-subtitle">Application de gestion du pointage</p>
        </div>

        {% if error %}
        {# Message d'erreur traduit depuis le domaine 'security' de Symfony #}
        <div class="alert alert-danger d-flex align-items-center gap-2 mb-4">
            <i class="bi bi-exclamation-triangle-fill flex-shrink-0"></i>
            <span>{{ error.messageKey|trans(error.messageData, 'security') }}</span>
        </div>
        {% endif %}

        <form method="post" action="{{ path('app_login') }}" novalidate>
            {# Jeton CSRF stateless signé par APP_SECRET — protège contre les attaques CSRF #}
            <input type="hidden" name="_csrf_token" value="{{ csrf_token('authenticate') }}">

            <div class="mb-3">
                <label for="email" class="form-label fw-semibold">Adresse email</label>
                <div class="input-group">
                    <span class="input-group-text login-input-icon"><i class="bi bi-envelope"></i></span>
                    <input type="email" id="email" name="_username" class="form-control login-input"
                           value="{{ last_username }}" autocomplete="email" required autofocus
                           placeholder="votre@email.fr">
                </div>
            </div>

            <div class="mb-4">
                <label for="password" class="form-label fw-semibold">Mot de passe</label>
                <div class="input-group">
                    <span class="input-group-text login-input-icon"><i class="bi bi-lock"></i></span>
                    <input type="password" id="password" name="_password" class="form-control login-input"
                           autocomplete="current-password" required placeholder="••••••••">
                </div>
            </div>

            <div class="mb-4 d-flex align-items-center gap-2">
                <input type="checkbox" class="form-check-input login-check" id="remember_me" name="_remember_me">
                <label class="form-check-label" for="remember_me">Se souvenir de moi</label>
            </div>

            <button type="submit" class="btn login-btn w-100">
                <i class="bi bi-box-arrow-in-right me-2"></i>Se connecter
            </button>
        </form>

        <p class="login-footer">www.culture-controle.com</p>
    </div>
</div>
{% endblock %}