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

{% block title %}
    S'inscrire à un atelier numérique de votre CPAM de Meurthe-et-Moselle
{% endblock %}

{% block body %}
    <div class="row">
        <div class="col-md-12 px-4 ">
            {{ form_start(form) }}

            <div class="text-blue">
                <h4 class="mb-3 fw-bolder">{% trans %}A health insurance advisor will call you back within 48 hours.{% endtrans %}</h4>
                <ul>
                    <li class="mb-0">{% trans %}The number displayed during the call will be{% endtrans %}
                        &nbsp;<b>36
                            46</b>.
                    </li>
                    <li class="mb-0">{% trans %}Please enter a valid phone number.{% endtrans %}</li>
                    <li class="mb-4">{% trans %}The fields followed by{% endtrans %} <strong
                                class="red">*</strong> {% trans %}are required.{% endtrans %}</li>
                </ul>
            </div>

            <h5 class="text-blue mb-3 fw-bolder">{% trans %}Fill in your information{% endtrans %}</h5>

            <!-- Nom et prénom -->
            <div class="row">
                <div class="form-group required col-md-6 mb-3">
                    <div class="row">
                        {{ form_label(form.firstName) }}
                        <div class="col-sm-8">
                            {{ form_widget(form.firstName) }}
                            <div class="invalid-feedback">
                                {% trans %}This field is required{% endtrans %}.
                            </div>
                        </div>
                    </div>


                </div>
                <div class="form-group required col-md-6 mb-3">
                       <div class="row">
                    {{ form_label(form.lastName) }}
                    <div class="col-sm-8">
                        {{ form_widget(form.lastName) }}
                        <div class="invalid-feedback">
                            {% trans %}This field is required{% endtrans %}.
                        </div>
                    </div>
                </div>
                </div>
            </div>
            <!-- date de naissance -->
            <div class="row">
                <div class="form-group required col-md-6 mb-3">
                    <div class="row">
                        {{ form_label(form.phone) }}
                        <div class="col-sm-8">
                            {{ form_widget(form.phone) }}
                            {{ form_help(form.phone) }}
                            <div class="invalid-feedback">
                                <p>
                                    {% trans %}This field is required{% endtrans %}.<br/>
                                    {% trans %}Examples : 0383xxxxxx, +33xxxxxxx, 0033xxxxxx{% endtrans %}
                                </p>
                            </div>
                        </div>
                    </div>

                </div>
                <div class="form-group col-md-6 mb-3">
                    <div class="row">
                        {{ form_label(form.dateNaiss) }}
                        <div class=" col-sm-8">
                            <div class="input-group date datepicker">
                                {{ form_widget(form.dateNaiss) }}
                                <span class="input-group-addon"><i class="fa fa-calendar"></i></span>

                            </div>
                        </div>


                    </div>

                </div>
            </div>

            <!-- NIR -->
            <div class="row">
                <div class="form-group col-md-6 mb-3">
                    <div class="row">
                        {{ form_label(form.nir) }}
                        <div class="col-sm-8">
                            {{ form_widget(form.nir) }}
                        </div>

                    </div>

                </div>
            </div>
            {% if form.location is defined %}
            <!-- Choix des cases à cocher -->
            <h5 class="text-blue mb-3 fw-bolder">{% trans %}Workshop location{% endtrans %}<strong
                        class="red">*</strong></h5>

            <div class="row">
                <div class="form-group col-md-6 mb-3">
                    {{ form_widget(form.location) }}
                    <div class="invalid-feedback">{% trans %}This field is required{% endtrans %}.
                    </div>
                </div>
            </div>
            {% endif %}
            <div class="row">

                <div class="form-check custom-control required custom-checkbox mb-4 mt-3">
                    {{ form_widget(form.mailCnil) }}
                    {{ form_label(form.mailCnil) }}

                    <div class="invalid-feedback">
                        Vous devez autoriser l'utilisation de vos données.
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12 text-center mb-3">
                    {{ form_widget(form.submit) }}
                </div>
            </div>

            {{ form_widget(form._token) }}
            {{ form_end(form,{render_rest: false}) }}
        </div>
    </div>

{% endblock %}
{% block javascripts %}
    <script type="text/javascript">
        const locale = '{{ app.request.locale }}';
    </script>
    {{ parent() }}
{% endblock %}