{% extends 'base.html.twig' %}
{% block title %}Créer un compte — Serigne Sam Mbaye{% endblock %}
{% block meta_description %}Créez un compte gratuit pour constituer vos playlists de conférences de Serigne Sam Mbaye et reprendre vos écoutes où vous les avez laissées.{% endblock %}

{% block body %}
    <section class="mx-auto w-full max-w-md px-4 py-10 sm:py-16">
        <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">Créer un compte</h1>
                <p class="mt-1.5 text-sm text-sand-dim">Gratuit — pour vos playlists et la reprise de vos écoutes.</p>
            </div>

            {% if errors %}
                <div class="mt-5 space-y-2" role="alert">
                    {% for e in errors %}
                        <p class="flash-error mb-0">{{ e }}</p>
                    {% endfor %}
                </div>
            {% endif %}

            <div class="mt-6">
                {% include 'partials/google_button.html.twig' with {label: "S'inscrire 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="_token" value="{{ csrf_token('register') }}">

                <div>
                    <label class="label" for="display_name">
                        Nom affiché <span class="font-normal normal-case tracking-normal">(optionnel)</span>
                    </label>
                    <input class="field" id="display_name" name="display_name" maxlength="100"
                           autocomplete="nickname" placeholder="Comment vous appeler ?">
                </div>

                <div>
                    <label class="label" for="email">Email</label>
                    <input class="field" type="email" id="email" name="email" required
                           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
                           minlength="8" autocomplete="new-password"
                           aria-describedby="password-hint">
                    {# Contrainte affichée sous le champ, en casse normale : dans le
                       label (majuscules + interlettrage) elle criait plus fort que
                       l'intitulé lui-même. #}
                    <p id="password-hint" class="mt-1.5 text-xs text-sand-dim">8 caractères minimum.</p>
                </div>

                <button class="btn-gold w-full" type="submit">Créer mon compte</button>
            </form>
        </div>

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