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

{% block title %}Inscription{% endblock %}

{% block body %}
<div class="register-page container mt-5">
    <div class="row justify-content-center">
        <div class="col-md-6">
            <h1 class="mb-4 text-center">Créer un compte</h1>

            {{ form_errors(registrationForm) }}

            <div class="card shadow-lg border-0 rounded-3">
                <div class="card-body p-4">
                    {{ form_start(registrationForm, {'attr': {'enctype': 'multipart/form-data'}}) }}

                        <div class="mb-3">
                            {{ form_row(registrationForm.email, {
                                label: 'Adresse e-mail',
                                attr: {'class': 'form-control register-input'}
                            }) }}
                        </div>

                        <div class="mb-3">
                            {{ form_row(registrationForm.pseudo, {
                                label: 'Pseudo',
                                attr: {'class': 'form-control register-input'}
                            }) }}
                        </div>

                        <div class="mb-3">
                            {{ form_row(registrationForm.plainPassword.first, {
                                label: 'Mot de passe',
                                attr: {'class': 'form-control register-input'}
                            }) }}
                        </div>

                        <div class="mb-3">
                            {{ form_row(registrationForm.plainPassword.second, {
                                label: 'Confirmer le mot de passe',
                                attr: {'class': 'form-control register-input'}
                            }) }}
                        </div>

                        <div class="mb-3">
                            {{ form_row(registrationForm.avatar, {
                                label: 'Choisir un avatar',
                                attr: {'class': 'form-control register-input'}
                            }) }}
                        </div>

                        <div class="form-check mb-3">
                            {{ form_row(registrationForm.agreeTerms, {
                                label: 'J’accepte les conditions',
                                attr: {'class': 'form-check-input'}
                            }) }}
                        </div>

                        <button type="submit" class="btn btn-primary w-100 register-btn">
                            <i class="fa fa-user-plus me-2"></i> S’inscrire
                        </button>
                    {{ form_end(registrationForm) }}

                    <div class="text-center mt-3">
                        <p class="mb-1">
                            Déjà un compte ? 
                            <a href="{{ path('app_login') }}" class="register-link">Se connecter</a>
                        </p>
                        <p class="mb-0">
                            <a href="{{ path('app_privacy') }}" class="register-link text-muted">
                                En savoir plus sur la confidentialité
                            </a>
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}