{% extends 'frontend/basic/base.html.twig' %}

{% block title %}PowerPME{% endblock %}

{% block body %}
    <!-- Login 9 - Bootstrap Brain Component -->
    <section class="light-background py-3 py-md-5 py-xl-8">
        <br>
        <div class="container">
            <div class="row gy-4 align-items-center mt-5">
                <div class="col-12">
                    <div class="card border-0 rounded-4">
                        <div class="card-body p-3 p-md-4 p-xl-5">
                            
                            {{ form_start(form) }}

                                <div class="row gy-3 overflow-hidden">
                                
                                    {% set formErrors = form.vars.errors.form.getErrors(true) %}
                                    {% if formErrors|length %}
                                        <div class="alert alert-danger">
                                            <ul>
                                                {% for key,error in formErrors %}
                                                    <li><strong>{{ error.message }}</strong></li>
                                                {% endfor %}
                                            </ul>
                                        </div>
                                    {% endif %}

                                    <div class="row mt-3">
                                        <h4>Vos informations personnelles</h4>
                                        <div class="col-4">
                                            <div class="form-floating mb-3">
                                                {{ form_widget(form.gender, {'attr': {'class': 'form-control', 'placeholder': 'gender' }}) }}
                                                <label for="gender" class="form-label">{{ form_label(form.gender) }}</label>
                                            </div>
                                        </div>
                                        <div class="col-4">
                                            <div class="form-floating mb-3">
                                                {{ form_widget(form.firstname, {'attr': {'class': 'form-control', 'placeholder': 'firstname' }}) }}
                                                <label for="firstname" class="form-label">{{ form_label(form.firstname) }}</label>
                                            </div>
                                        </div>
                                        <div class="col-4">
                                            <div class="form-floating mb-3">
                                                {{ form_widget(form.lastname, {'attr': {'class': 'form-control', 'placeholder': 'lastname' }}) }}
                                                <label for="lastname" class="form-label">{{ form_label(form.lastname) }}</label>
                                            </div>
                                        </div>
                                        <div class="col-4">
                                            <div class="form-floating mb-3">
                                                {{ form_widget(form.birthdate, {'attr': {'class': 'form-control', 'placeholder': 'dd/mm/yyyy' }}) }}
                                                <label for="birthdate" class="form-label">{{ form_label(form.birthdate) }}</label>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-12 mt-5">
                                        <h4>Vos informations de connexion au site</h4>
                                        <div class="form-floating mb-3">
                                            {{ form_widget(form.email, {'attr': {'class': 'form-control', 'placeholder': 'email' }}) }}
                                            <label for="email" class="form-label">{{ form_label(form.email) }}</label>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-6">
                                            <div class="form-floating mb-3">
                                                {{ form_widget(form.password.first, {'attr': {'class': 'form-control', 'placeholder': 'password' }}) }}
                                                <label for="user_registration_password_first" class="form-label">{{ form_label(form.password.first) }}</label>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="form-floating mb-3">
                                                {{ form_widget(form.password.second, {'attr': {'class': 'form-control', 'placeholder': 'password' }}) }}
                                                <label for="user_registration_password_second" class="form-label">{{ form_label(form.password.second) }}</label>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-4 offset-4">
                                        <div class="d-grid">
                                            <button class="btn btn-success btn-lg" type="submit">Finaliser l'inscription</button>
                                        </div>
                                    </div>
                                </div>
                                
                            {{ form_widget(form._token) }}
                            {{ form_end(form) }}

                            

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
{% endblock %}