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

{% block menu %}{% include "menu-etu.html.twig" %}{% endblock %}

{% block metaTitle %}{{bTitle}}{% endblock %}

{% block title %}{{bTitle}}{% endblock %}

{% block content %}
{% embed "page-temp.html.twig" %}

{% block right %}{% include 'etu-right.html.twig' %}{% endblock %}

{% block bTitle %}{{ bTitle }}{% endblock %}

{% block menuBlock %}INSCRIPTION{% endblock %}

{% block bResume %}{{ bTitle }}{% endblock %}

{% block pContent %}
<div class="col-sm-12 text-justify">
    {% for flashMessage in app.session.flashbag.get('jpo') %}
    <script type="text/javascript">
    alert("{{ flashMessage }}");
    </script>
    {% endfor %}
    <h2 class="purple bold"><span class="far fa-calendar-alt"></span> Journée Portes Ouvertes</h2>
    <p class="little-margin-top">JPO Spécial Bachelor :</p>
    <p><strong>Samedi 5 févier 2022 de 13h à 17h</strong></p>
    <p>Inscrivez-vous pour participer</p><br>
    
    {% set formHtml %}
    {{ form_start(jpoForm) }}
    <div class="form-group col-sm-12 no-padding little-margin-top">
        <div class="col-sm-12 no-padding">
            {{ form_label(jpoForm.campus, "SELECTIONNEZ L'ÉCOLE *") }}
        </div>
        <div class="col-sm-12 no-padding">
            {{ form_widget(jpoForm.campus) }}
        </div>
        <div class="col-sm-12 no-padding text-danger">
            <strong>{{ form_errors(jpoForm.campus) }}</strong>
        </div>
    </div>
    <div class="form-group col-sm-12 no-padding">
        <div class="col-sm-12 no-padding text-uppercase">
            {{ form_label(jpoForm.date, "Choisissez une date de session *") }}
        </div>
        <div class="col-sm-6 no-padding">
            {{ form_widget(jpoForm.date, { 'attr':  {'class': 'form-control'}}) }}
        </div>
        <div class="col-sm-6 no-padding text-danger">
            <strong>{{ form_errors(jpoForm.date) }}</strong>
        </div>
    </div>
    <div class="form-group col-sm-12 no-padding">
        <div class="col-sm-12 no-padding text-uppercase">
            {{ form_label(jpoForm.chooseForm, "Choisissez une formation *") }}
        </div>
        <div class="col-sm-6 no-padding">
            {{ form_widget(jpoForm.chooseForm, { 'attr':  {'class': 'form-control'}}) }}
        </div>
        <div class="col-sm-6 no-padding text-danger">
            <strong>{{ form_errors(jpoForm.chooseForm) }}</strong>
        </div>
    </div>
    <div class="col-sm-12 no-padding margin-top form-group text-uppercase">
        <p class="bold">Saisissez vos informations personnelles *</p>
    </div>
    <div class="form-group col-sm-6 no-padding">
        <div class="col-sm-12">
            {{ form_label(jpoForm.nom, "Nom *") }}
        </div>
        <div class="col-sm-12">
            {{ form_widget(jpoForm.nom, { 'attr':  {'class': 'form-control'}}) }}
        </div>
        <div class="col-sm-12 text-danger">
            <strong>{{ form_errors(jpoForm.nom) }}</strong>
        </div>
    </div>
    <div class="form-group col-sm-6 no-padding">
        <div class="col-sm-12">
            {{ form_label(jpoForm.prenom, "Prénom *") }}
        </div>
        <div class="col-sm-12">
            {{ form_widget(jpoForm.prenom, { 'attr':  {'class': 'form-control'}}) }}
        </div>
        <div class="col-sm-12 text-danger">
            <strong>{{ form_errors(jpoForm.prenom) }}</strong>
        </div>
    </div>
    <div class="form-group col-sm-6 no-padding">
        <div class="col-sm-12">
            {{ form_label(jpoForm.tel, "Téléphone *") }}
        </div>
        <div class="col-sm-12">
            {{ form_widget(jpoForm.tel, { 'attr':  {'class': 'form-control'}}) }}
        </div>
        <div class="col-sm-12 text-danger">
            <strong>{{ form_errors(jpoForm.tel) }}</strong>
        </div>
    </div>
    <div class="form-group col-sm-6 no-padding">
        <div class="col-sm-12">
            {{ form_label(jpoForm.email, "eMail *") }}
        </div>
        <div class="col-sm-12">
            {{ form_widget(jpoForm.email, { 'attr':  {'class': 'form-control'}}) }}
        </div>
        <div class="col-sm-12 text-danger">
            <strong>{{ form_errors(jpoForm.email) }}</strong>
        </div>
    </div>
    <div class="form-group col-sm-12 no-padding">
        <div class="col-sm-12">
            {{ form_label(jpoForm.myForm, "Formation suivie cette année *") }}
        </div>
        <div class="col-sm-12">
            {{ form_widget(jpoForm.myForm, { 'attr':  {'class': 'form-control'}}) }}
        </div>
        <div class="col-sm-4 text-danger">
            <strong>{{ form_errors(jpoForm.myForm) }}</strong>
        </div>
    </div>
    <div class="form-group col-sm-12">
		<label for="jpo_policies" class="" style='margin-left:0px; font-weight: normal;position: absolute;margin-left: 20px;'>Je consens aux traitements de mes données personnelles. [LINK]En savoir plus[/LINK]</label>
		<div class="">
			{{ form_widget(jpoForm.policies) }}
		</div>
		<div class="col-sm-4 text-danger">
			<strong>{{ form_errors(jpoForm.policies) }}</strong>
		</div>
	</div>
    <div class="form-group col-sm-12 no-padding">
        <input type="submit" name="Envoyer" class="col-sm-6 col-sm-offset-3 btn btn-danger bold" value="Valider vos informations" onclick="ga('send', 'event', 'Button', 'Click', 'Inscription JPO');">
    </div>
    {{ form_end(jpoForm) }}
    {% endset %}
	{{ formHtml|replace({'[LINK]': '<a href="/mentions-legales" target="_blank">', '[/LINK]': '</a>'})|raw }}
</div>
{% endblock %}

{% endembed %}


<script type="text/javascript" src="{{ asset('/js/jpoForm.js') }}"></script>
{% endblock %}