{% 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="">
            {{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 warning h6'>Nom de famille</label>
                            {{form_widget(form.fName,{attr: {class:class, placeholder : "Obligatoire"}})}}
                        </div>
                        <div class='{{desktop(divClass)}} {{mobile("vt-20")}}'>
                            <label class='upper warning h6'>Prénom</label>
                            {{form_widget(form.lName,{attr: {class:class, placeholder : "Obligatoire"}})}}
                        </div>
                        <div class='{{desktop(divClass)}} {{mobile("vt-20")}}'>
                            <label class='upper warning h6'>Adresse email</label>
                            {{form_widget(form.email,{attr: {class:class, placeholder : "Obligatoire"}})}}
                        </div>
                        <div class='{{desktop(divClass)}} {{mobile("vt-20")}}'>
                            <label class='upper warning h6'>Numéro de téléphone</label>
                            {{form_widget(form.phone,{attr: {class:class, placeholder : "Obligatoire"}})}}
                        </div>
                        <div class='w100 {{desktop("vt-20")}} {{mobile("vt-20")}}'>
                            <label class='upper warning 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 warning 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='bg-warning white {{desktop("third_60 hz-60-in vt-40-in")}} {{mobile("hz-30-in vt-30-in")}}'>
            <h2 class="h4 upper white">Coordonnées</h2>
            <div class=" {{desktop("vt-30")}} {{mobile("vt-15")}}">
                <label class='h6 light'>Adresse :</label>
                <p class="h4 semibold">{{os_param("address")}}</p>
            </div>
            <div class=" {{desktop("vt-30")}} {{mobile("vt-15")}}">
                <label class='h6 light'>Adresse e-mail :</label>
                <p class="h4 semibold">{{os_param("contacts")["email"]}}</p>
            </div>
            <div class="">
                <label class='h6 light'>Numéro de téléphone :</label>
                <p class="h4 semibold">{{os_param("contacts")["phone"]}}</p>
            </div>
        </div>
    </div>
</div>
{% endblock %}