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

{% block body %}
    <div class="container my-5 py-4">-</div>

    <!-- members form to front page -->
    <h1 class="text-center">Inscription</h1>

    <div class="container mt-4 my-5">

    {{ form_start(form) }} <!-- form initilization -->

        <div class="row">
            <div class="form-group form-group-contact col-md-4">
                {{ form_label(form.lastname, 'Votre nom :') }} {{ form_widget(form.lastname, {"attr": {
                    "placeholder" : "Minimum 2 caractères"}}) }}
                <small>{{ form_help(form.lastname) }}</small>
            </div>
            <div class="form-group form-group-contact col-md-4">
                {{ form_label(form.firstname, 'Prénom : ') }} {{ form_widget(form.firstname, {"attr": {
                    "placeholder" : "Minimum 3 caractères"}}) }}
                <small>{{ form_help(form.firstname) }}</small>
            </div>
            <div class="form-group form-group-contact col-md-4">
                {{ form_label(form.birthdayDate, 'Date de naissance : ') }} {{ form_widget(form.birthdayDate, {"attr": {
                    "placeholder" : "JJ/MM/AAAA - DD/MM/YYYY"}}) }}
                <small>{{ form_help(form.birthdayDate) }}</small>
            </div>
        </div>
        <div class="row">
            <div class="form-group form-group-contact col-md-4">
                {{ form_label(form.birthdayLocation, 'Lieu de naissance : ') }} {{ form_widget(form.birthdayLocation, {"attr": {
                    "placeholder" : "Minimum 3 caractères"}}) }}
                <small>{{ form_help(form.birthdayLocation) }}</small>
            </div>
            <div class="form-group form-group-contact col-md-8">
                {{ form_label(form.adresse, 'Adresse : ') }} {{ form_widget(form.adresse, {"attr": {
                    "placeholder" : "Minimum 10 caractères"}}) }}
                <small>{{ form_help(form.adresse) }}</small>
            </div>
        </div>
        <div class="row">
            <div class="col text-info text-center" id="nombreLettre"></div>
        </div>
        <div class="row">
            <div class="form-group form-group-contact col-md-4">
                {{ form_label(form.zipCode, 'Code postal : ') }} {{ form_widget(form.zipCode) }}
                <small>{{ form_help(form.zipCode) }}</small>
            </div>
            <div class="form-group form-group-contact col-md-4">
                {{ form_label(form.city, 'Ville : ') }} {{ form_widget(form.city, {"attr": {
                    "placeholder" : "Minimum 3 caractères"}}) }}
                <small>{{ form_help(form.city) }}</small>
            </div>
            <div class="form-group form-group-contact col-md-4">
                {{ form_label(form.origines, 'Pays : ') }} {{ form_widget(form.origines, {"attr": {
                    "placeholder" : "Minimum 4 caractères"}}) }}
                <small>{{ form_help(form.origines) }}</small>
            </div>
        </div>
        <div class="row">
            <div class="form-group form-group-contact col-md-4">
                {{ form_label(form.phone, 'Téléphone : ') }} {{ form_widget(form.phone, {"attr": {
                    "placeholder" : "Nombres uniquement, max 10"}}) }}
                <small>{{ form_help(form.phone) }}</small>
            </div>
            <div class="form-group form-group-contact col-md-4">
                {{ form_label(form.mail, 'Mail : ') }} {{ form_widget(form.mail, {"attr": {
                    "placeholder" : "Ex : test@test.com, min 10 caractères"}}) }}
                <small>{{ form_help(form.mail) }}</small>
            </div>
            <div class="form-group form-group-contact col-md-4">
                {{ form_label(form.confidentiality, 'Confidentialité* : ') }} {{ form_widget(form.confidentiality, {"attr": {
                    "placeholder" : "Taper oui ou non"}}) }}
                <small>{{ form_help(form.confidentiality) }}</small>
            </div>
        </div>
        <div class="row">
            <div class="col">
                <label for="message">Message : </label>{{ form_widget(form.message, {"attr": {
                    "placeholder" : "Si vous avez un complément d'information à nous communiquer, un message d'encouragement
à nous faire parvenir, tapez le ici."}}) }}
            </div>
        </div>

        <!-- add catpcha -->
        <div class="form-group mt-3"></i>
            {{ form_widget(form.captcha) }}
        </div>
        <div class="validation"></div>
        {{ form_errors(form.captcha) }}

    <button class="btn btn-primary validation-form my-3 d-none">{{ button|default('Valider votre inscription en tant que membre') }}</button>

    {{ form_end(form) }}

        <p><small>*Pour la protection de vos données en choisisant "oui" vous nous permettez d'utiliser votre mail ou numéro de
                téléphone afin de vous communiquer nos évènements ou vous contacter. Nous ne communiquons pas vos données
                personnelles.</small>
        </p>

</div>

{% endblock %}