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

{% block title %}AFC E-learning - Création du compte{% endblock %}

{% block body %}
<div class="container py-5">
    <h1 class="secondary-color mb-3">Création du compte</h1>
    <div class="card" style="border:none;">
        <div class="card-header bg-primary">
        <h4 class="text-light text-right">Informations</h4>
        </div>
        <div class="card-body">
         {{ form_start(form) }}
        <div class="row mb-4">
            <div class="col-lg-6">
                {{ form_label(form.firstname) }}
                {{ form_widget(form.firstname) }}
            </div>
            <div class="col-lg-6">
                {{ form_label(form.lastname) }}
                {{ form_widget(form.lastname) }}
            </div>
        </div>
        
        <div class="row mb-4">
            <div class="col-lg-6">
                {{ form_label(form.address) }}
                {{ form_widget(form.address) }}
            </div>
            <div class="col-lg-3">
                {{ form_label(form.postalCode) }}
                {{ form_widget(form.postalCode) }}
            </div>
            <div class="col-lg-3">
                {{ form_label(form.city) }}
                {{ form_widget(form.city) }}
            </div>
        </div>

        <div class="row mb-4">
            <div class="col-lg-6 text-center" style="display:flex;flex-direction:column;justify-content:center;align-items:center;">
                {{ form_label(form.dateOfBirth) }}
                {{ form_widget(form.dateOfBirth) }}
            </div>
            <div class="col-lg-6">
                {{ form_label(form.placeOfBirth) }}
                {{ form_widget(form.placeOfBirth) }}
            </div>
        </div>

        </div>

        <div class="card-header bg-primary">
            <h4 class="text-light text-right">Coordonnées</h4>
        </div>

        <div class="card-body">

        <div class="row mb-4">
            <div class="col-lg-6">
                {{ form_label(form.email) }}
                {{ form_widget(form.email) }}
            </div>
            <div class="col-lg-6">                
                {{ form_label(form.phone) }}
                {{ form_widget(form.phone) }}
            </div>
        </div>

        </div> 

        <div class="card-header bg-primary">
            <h4 class="text-light text-right">Mot de passe</h4>
        </div>

        <div class="card-body">
        <div class="row mb-4">
            <div class="col-lg-6">
                {{ form_label(form.hash) }}
                {{ form_widget(form.hash) }}
            </div>
            <div class="col-lg-6">
                {{ form_label(form.hashConfirm) }}
                {{ form_widget(form.hashConfirm) }}
            </div>
        </div>

        <div class="text-center py-4">
        <input type="submit" class="secondary-btn text-center py-3 px-5" value="Envoyer"></div>
        
        {{ form_end(form) }}
        </div>
       
    </div>
</div>
{% endblock %}

{% block stylesheets %}
<style>
    #registration_dateOfBirth_month {
        margin: 0 1rem;
    }
    #registration_dateOfBirth_day, 
    #registration_dateOfBirth_month,
    #registration_dateOfBirth_year{
        margin-bottom: 1rem !important;
    }
    
</style>
{% endblock %}