{% extends 'auth/layout.html.twig' %}

{% block title %}RISKINESS - Inscription{% endblock %}

{% block content %}
    <section class="auth" aria-label="Inscription">
        <span class="auth__eyebrow">Nouveau compte</span>
        <h1 class="auth__title"><span class="accent">Inscription</span></h1>
        <p class="auth__lead">Crée ton compte pour débloquer les modules protégés.</p>

        {% for label, messages in app.flashes %}
            {% for message in messages %}
                <div class="flash flash--{{ label }}">{{ message }}</div>
            {% endfor %}
        {% endfor %}

        {% if errors is not empty %}
            <div class="flash flash--error">
                {% for error in errors %}
                    <div>{{ error }}</div>
                {% endfor %}
            </div>
        {% endif %}

        <form method="post" style="margin-top: 18px; display: grid; gap: 14px;">
            <input type="hidden" name="_csrf_token" value="{{ csrf_token('register') }}">

            <label style="display: grid; gap: 8px;">
                <span style="color: var(--text-secondary); font-size: 0.88rem;">Nom affiché</span>
                <input type="text" name="display_name" value="{{ values.displayName }}" autocomplete="name" required style="width: 100%; border-radius: 18px; border: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.04); color: var(--text-primary); padding: 14px 16px; outline: none;">
            </label>

            <label style="display: grid; gap: 8px;">
                <span style="color: var(--text-secondary); font-size: 0.88rem;">Email</span>
                <input type="email" name="email" value="{{ values.email }}" autocomplete="email" required style="width: 100%; border-radius: 18px; border: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.04); color: var(--text-primary); padding: 14px 16px; outline: none;">
            </label>

            <label style="display: grid; gap: 8px;">
                <span style="color: var(--text-secondary); font-size: 0.88rem;">Mot de passe</span>
                <input type="password" name="password" minlength="8" autocomplete="new-password" required style="width: 100%; border-radius: 18px; border: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.04); color: var(--text-primary); padding: 14px 16px; outline: none;">
            </label>

            <label style="display: grid; gap: 8px;">
                <span style="color: var(--text-secondary); font-size: 0.88rem;">Confirmation</span>
                <input type="password" name="password_confirmation" minlength="8" autocomplete="new-password" required style="width: 100%; border-radius: 18px; border: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.04); color: var(--text-primary); padding: 14px 16px; outline: none;">
            </label>

            <button type="submit" style="border: 0; border-radius: 18px; padding: 14px 16px; color: #fff; background: var(--brand-gradient); font-weight: 700; box-shadow: 0 12px 28px rgba(245, 36, 94, 0.20); cursor: pointer;">
                Créer mon compte
            </button>

            <div style="display: flex; gap: 12px; flex-wrap: wrap; justify-content: space-between; color: var(--text-secondary); font-size: 0.88rem;">
                <a href="{{ path('app_login') }}">J’ai déjà un compte</a>
                <a href="{{ path('app_forgot_password_request') }}">Mot de passe oublié ?</a>
            </div>
        </form>
    </section>
{% endblock %}