{% extends 'base.html.twig' %}
{% block title %}Créer un compte — 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">Créer un compte</h1>
        <p class="mt-1 text-sm text-sand">Gratuit — pour créer et retrouver vos playlists.</p>

        {% for e in errors %}<div class="flash-error mt-4">{{ e }}</div>{% endfor %}

        <a href="{{ path('connect_google_start') }}" class="btn-ghost mt-6 w-full">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 <span class="h-px flex-1 bg-night-600"></span>
        </div>

        <form method="post" class="space-y-4">
            <input type="hidden" name="_token" value="{{ csrf_token('register') }}">
            <div><label class="label" for="display_name">Nom affiché (optionnel)</label>
                <input class="field" id="display_name" name="display_name" maxlength="100"></div>
            <div><label class="label" for="email">Email</label>
                <input class="field" type="email" id="email" name="email" required autocomplete="email"></div>
            <div><label class="label" for="password">Mot de passe <span class="text-sand-dim">(8 caractères min.)</span></label>
                <input class="field" type="password" id="password" name="password" required minlength="8" autocomplete="new-password"></div>
            <button class="btn-gold w-full" type="submit">Créer mon compte</button>
        </form>

        <p class="mt-6 text-center text-sm text-sand">Déjà inscrit ?
            <a class="text-gold-300 hover:underline" href="{{ path('app_login') }}">Se connecter</a></p>
    </div>
</section>
{% endblock %}