{% set title = 'Contactez-nous' %}
{% set menu = 'contacts' %}
{% set hasReCaptcha = true %}
{% extends 'Default/base.html.twig' %}
{% block content %}
<div id="contacts" class='{{desktop("")}} {{mobile("")}}'>
<div class="fill hoverflow gpadding {{desktop('flex row vt-80-in')}} {{mobile('vt-30-in')}}">
<div class="">
{{include('Default/notice.html.twig')}}
{{form_start(form, {'attr':{'class':'relative w100 bg-success '~desktop("padding-60")~mobile("top-1-in bottom-25-in hz-25-in")}})}}
{% set class = 'relative w100 h6 text-left noradius border-bottom border-solid border-white border-1x nobg white '~desktop(" vt-15-in bottom-20 ")~mobile(" vt-10-in hz-15-in") %}
{% set divClass = ''~desktop("half-20 vt-10 ")~mobile("vt-10 ") %}
<div class='{{desktop("flex row space")}} w100'>
<div class='w100 white {{desktop("flex row space wrap")}}'>
<div class='{{desktop(divClass)}} {{mobile("vt-20")}}'>
<label class='upper h6'>Nom de famille</label>
{{form_widget(form.lName,{attr: {class:class, placeholder : "Obligatoire"}})}}
</div>
<div class='{{desktop(divClass)}} {{mobile("vt-20")}}'>
<label class='upper h6'>Prénom</label>
{{form_widget(form.fName,{attr: {class:class, placeholder : "Obligatoire"}})}}
</div>
<div class='{{desktop(divClass)}} {{mobile("vt-20")}}'>
<label class='upper h6'>Adresse email</label>
{{form_widget(form.email,{attr: {class:class, placeholder : "Obligatoire"}})}}
</div>
<div class='{{desktop(divClass)}} {{mobile("vt-20")}}'>
<label class='upper h6'>Numéro de téléphone</label>
{{form_widget(form.phone,{attr: {class:class, placeholder : "Optionnel"}})}}
</div>
<div class='w100 {{desktop("vt-20")}} {{mobile("vt-20")}}'>
<label class='upper h6'>Objet du message</label>
{{form_widget(form.object,{attr: {class:class, placeholder : "Obligatoire"}})}}
</div>
</div>
</div>
<div class='w100 {{desktop("vt-20")}} {{mobile("vt-20")}}'>
<label class='upper white h6'>Contenu du message</label>
{{form_widget(form.content,{attr: {class:class, placeholder : "Obligatoire"}})}}
</div>
<div class='flex middle col center {{desktop("vt-20-in")}} {{mobile("center")}}'>
<div class="g-recaptcha" data-sitekey="{{os_param('recaptcha')['key']}}"></div>
<button type='submit' class="anim-btn relative flex col bg-white noborder radius-5 {{desktop('top-15')}}">
<span class="upper semibold p vt-10-in hz-30-in success">Envoyer</span>
</button>
</div>
{{form_end(form)}}
</div>
<div class='{{desktop("third_60 hz-60-in")}} {{mobile("hz-30-in vt-30-in")}}'>
<div class="">
<h2 class="h4 upper">Coordonnées</h2>
<div class=" {{desktop("top-10 bottom-30")}} {{mobile("vt-15")}}">
<label class='h6'>Adresse :</label>
<p class="h5 semibold">{{os_param("address")}}</p>
</div>
<div class=" {{desktop("vt-30")}} {{mobile("vt-15")}}">
<label class='h6'>Adresse e-mail :</label>
<p class="h5 semibold">{{os_param("contacts")["email"]}}</p>
</div>
<div class="">
<label class='h6'>Numéro de téléphone :</label>
<p class="h5 semibold">{{os_param("contacts")["phone"]}}</p>
</div>
</div>
<div class="map w100 {{desktop('top-40')}} {{mobile('top-25')}}">
<h3 class="h4 semibold upper bottom-20">Localisation</h3>
<div class="w100 shadow hoverflow {{desktop('')}} {{mobile('')}}">
<iframe class="block w100 msquare map-frame noborder" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3964.3842860418763!2d2.3593907!3d6.4729116!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x1024a981367c79e7%3A0xf1630c240beb2ad6!2s%C3%89cole%20de%20Formation%20des%20Professions%20Judiciaires%20(EFPJ)!5e0!3m2!1sfr!2sbj!4v1669804747265!5m2!1sfr!2sbj" style="border:0" allowfullscreen="" frameborder="0"></iframe>
</div>
</div>
</div>
</div>
</div>
{% endblock %}