{% extends 'base.html.twig' %}
{% block title %}Connexion — Serigne Sam Mbaye{% endblock %}
{% block body %}
<section class="mx-auto max-w-md px-4 py-14">
    <div class="card p-8">
        <h1 class="font-display text-2xl font-semibold">Connexion</h1>
        <p class="mt-1 text-sm text-sand">Accédez à vos playlists.</p>

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

        <a href="{{ path('connect_google_start') }}" class="btn-ghost mt-6 w-full">
            <svg class="h-5 w-5" viewBox="0 0 24 24"><path fill="#EA4335" d="M12 5.2c1.7 0 3.2.6 4.4 1.7l3.3-3.3C17.7 1.7 15 .6 12 .6 7.4.6 3.4 3.2 1.5 7l3.9 3C6.3 7.2 8.9 5.2 12 5.2z"/><path fill="#4285F4" d="M23.5 12.3c0-.9-.1-1.6-.2-2.3H12v4.5h6.5c-.3 1.5-1.1 2.7-2.4 3.6l3.8 2.9c2.2-2 3.6-5 3.6-8.7z"/><path fill="#FBBC05" d="M5.4 14.1c-.2-.7-.4-1.4-.4-2.1s.1-1.4.4-2.1L1.5 7C.7 8.5.3 10.2.3 12s.4 3.5 1.2 5l3.9-2.9z"/><path fill="#34A853" d="M12 23.4c3 0 5.6-1 7.4-2.7l-3.8-2.9c-1 .7-2.2 1.1-3.6 1.1-3.1 0-5.7-2-6.6-4.8L1.5 17c1.9 3.8 5.9 6.4 10.5 6.4z"/></svg>
            Continuer avec Google
        </a>

        <div class="my-6 flex items-center gap-4 text-xs text-sand-dim">
            <span class="h-px flex-1 bg-night-600"></span> ou avec votre email <span class="h-px flex-1 bg-night-600"></span>
        </div>

        <form method="post" class="space-y-4">
            <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"></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>

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