{% extends 'base.html.twig' %}
{% block title %}Connexion — Serigne Sam Mbaye{% endblock %}
{% block meta_description %}Connectez-vous pour retrouver vos playlists et votre historique d'écoute des conférences de Serigne Sam Mbaye.{% endblock %}

{% block body %}
    <section class="mx-auto w-full max-w-md px-4 py-10 sm:py-16">
        {# .panel plutôt que .card : un formulaire n'est pas cliquable dans son
           ensemble, l'effet de survol de .card induirait en erreur. #}
        <div class="panel p-6 sm:p-8">
            <div class="text-center">
                <a href="{{ path('app_home') }}" aria-label="Retour à l'accueil"
                   class="mx-auto mb-5 grid h-12 w-12 place-items-center rounded-xl bg-gradient-to-br from-gold-600 to-gold-300 font-display text-base font-bold text-night-950">SSM</a>
                <h1 class="font-display text-2xl font-semibold">Connexion</h1>
                <p class="mt-1.5 text-sm text-sand-dim">Retrouvez vos playlists et votre historique d'écoute.</p>
            </div>

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

            <div class="mt-6">
                {% include 'partials/google_button.html.twig' with {label: 'Continuer avec Google'} only %}
            </div>

            <div class="my-6 flex items-center gap-3">
                <span class="h-px flex-1 bg-night-700"></span>
                <span class="text-[11px] uppercase tracking-wider text-sand-dim">ou avec votre email</span>
                <span class="h-px flex-1 bg-night-700"></span>
            </div>

            <form method="post" class="space-y-5">
                <input type="hidden" name="_csrf_token" value="{{ csrf_token('authenticate') }}">

                <div>
                    <label class="label" for="email">Email</label>
                    <input class="field" type="email" id="email" name="_username"
                           value="{{ last_username }}" required autofocus autocomplete="email"
                           placeholder="vous@exemple.com">
                </div>

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

                <button class="btn-gold w-full" type="submit">Se connecter</button>
            </form>
        </div>

        <p class="mt-6 text-center text-sm text-sand-dim">
            Pas encore de compte ?
            <a class="font-medium text-gold-300 hover:underline" href="{{ path('app_register') }}">Créer un compte</a>
        </p>
    </section>
{% endblock %}