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

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

{% block body %}
    <section class="section">
        <div class="container">
            <h1 class="title has-text-centered">Créer un compte</h1>

            <div class="columns is-centered">
                <div class="column is-4">
                    <div class="box">
                        <h3 class="title is-4">Inscription</h3>

                        {{ form_start(registrationForm) }}
                            
                            <div class="field">
                                <label for="{{ registrationForm.email.vars.id }}" class="label">Email</label>
                                <div class="control">
                                    {{ form_widget(registrationForm.email, {
                                        'attr': {
                                            'class': 'input ' ~ (registrationForm.email.vars.errors|length > 0 ? 'is-danger' : ''),
                                            'autocomplete': 'email',
                                            'required': 'required'
                                        }
                                    }) }}
                                </div>
                                {% if registrationForm.email.vars.errors|length > 0 %}
                                    <p class="help is-danger">
                                        {{ form_errors(registrationForm.email) }}
                                    </p>
                                {% endif %}
                            </div>

                            <div class="field">
                                <label for="{{ registrationForm.plainPassword.vars.id }}" class="label">Mot de passe</label>
                                <div class="control">
                                    {{ form_widget(registrationForm.plainPassword, {
                                        'attr': {
                                            'class': 'input ' ~ (registrationForm.plainPassword.vars.errors|length > 0 ? 'is-danger' : ''),
                                            'autocomplete': 'new-password',
                                            'required': 'required'
                                        }
                                    }) }}
                                </div>
                                {% if registrationForm.plainPassword.vars.errors|length > 0 %}
                                    <p class="help is-danger">
                                        {{ form_errors(registrationForm.plainPassword) }}
                                    </p>
                                {% endif %}
                            </div>

                            <div class="field">
                                <label for="{{ registrationForm.agreeTerms.vars.id }}" class="checkbox">
                                    {{ form_widget(registrationForm.agreeTerms) }} J'accepte les termes et conditions
                                </label>
                                {% if registrationForm.agreeTerms.vars.errors|length > 0 %}
                                    <p class="help is-danger">
                                        {{ form_errors(registrationForm.agreeTerms) }}
                                    </p>
                                {% endif %}
                            </div>

                            <div class="field">
                                <button type="submit" class="button is-fullwidth" style="background-color: #5368d5; color: white; border: none">
                                S'inscrire
                            </button>
                            </div>
                        {{ form_end(registrationForm) }}
                    </div>
                    
                    <p class="has-text-centered">Vous avez déjà un compte ? <a href="{{ path('app_login') }}">Connectez-vous ici</a></p>
                </div>
            </div>
        </div>
    </section>
{% endblock %}