{% extends 'base.html.twig' %}

{% block title %}Créer un compte · LivreComment{% endblock %}
{% block body_class %}no-bottom-nav{% endblock %}

{% block body %}
    <div class="stack">
        <header class="stack-sm auth-hero">
            <img class="auth-hero__logo"
                 src="{{ asset('images/logo-wordmark.png') }}"
                 srcset="{{ asset('images/logo-wordmark@2x.png') }} 2x, {{ asset('images/logo-wordmark@3x.png') }} 3x"
                 alt="LivreComment"
                 width="137" height="48">
            <h1>Crée ton compte</h1>
            <p class="muted">Tiens un journal de tes lectures, note tes livres, suis d'autres lecteurs.</p>
        </header>

        <div class="card">
            {{ form_start(form) }}
                {{ form_row(form.email) }}
                {{ form_row(form.username) }}
                {{ form_row(form.plainPassword) }}

                {% if form.vars.errors|length > 0 %}
                    <div class="flash flash--error" role="alert">
                        {% for err in form.vars.errors %}{{ err.message }}{% endfor %}
                    </div>
                {% endif %}

                <button type="submit" class="btn btn--full" style="margin-top: var(--space-5);">Créer mon compte</button>
            {{ form_end(form) }}
        </div>

        <p class="text-center muted" style="font-size: 0.92rem;">
            Déjà inscrit ? <a href="{{ path('app_login') }}">Connecte-toi</a>
        </p>
    </div>
{% endblock %}