{% extends 'front.html.twig' %}
{% block title %} Contact {% endblock %}
{% block stytesheets %}
    {{ parent() }}
{% endblock %}
{% block body %}

    <!-- Section: inner-header -->
    <div class="main-content">
        <section class="inner-header divider parallax layer-overlay overlay-white-8">
            <div class="container pt-60 pb-60">
                <!-- Section Content -->
                <div class="section-content">
                    <div class="row">
                        <div class="col-md-12 text-center" style="margin-top: -45px;">
                            <h2 class="title bg-text-new">Contact</h2>
                            <ol class="breadcrumb text-center text-black mt-10">
                                <li><a href="{{ path('home') }}">Acceuil</a></li>
                                <li class="bg-text-new">Contact</li>
                            </ol>
                        </div>
                    </div>
                </div>
            </div>
        </section>

    </div>



    <!-- Content Section Start -->
    <div class="container" style="    margin-top: 51px;
">


        <div class="row pull-down-60">
            <div id="touch" class="col-md-6 col-xs-12 pdg-rt-40">
                <h2 class="title-red-line-left">Contactez-nous</h2>

                {{ include('default/flash_bag.html.twig') }}

                {{ form_start(form, {'attr' : {'id' : 'formContact', 'style' : 'margin-bottom: 75px;'}}) }}

                <form id="formContact" name="contact_form" class="" action="" method="post" style="margin-bottom: 70px;">
                    <div class="row">
                        <div class="col-sm-6">
                            <div class="form-group">
                                <label>Nom
                                </label>
                                {{ form_widget(form.lastName, { 'attr': {'class': 'form-control  form-contact', 'placeholder' : '', 'required':true} }) }}
                            </div>
                        </div>
                        <div class="col-sm-6">
                            <div class="form-group">
                                <label>Prénom
                                </label>
                                {{ form_widget(form.firstName, { 'attr': {'class': 'form-control form-contact', 'placeholder' : '', 'required':true} }) }}
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-6">
                            <div class="form-group">
                                <label>Email
                                </label>
                                {{ form_widget(form.email, { 'attr': {'class': 'form-control form-contact', 'placeholder' : '', 'required':true} }) }}
                            </div>
                        </div>
                        <div class="col-sm-6">
                            <div class="form-group">
                                <label>Téléphone</label>
                                {{ form_widget(form.phone, { 'attr': {'class': 'form-control form-contact', 'placeholder' : '', 'required':true} }) }}
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label>Sujet</label>
                        {{ form_widget(form.subject, { 'attr': {  'class': 'form-control form-contact', 'placeholder' : '', 'required':true} }) }}
                    </div>
                    <div class="form-group">
                        <label>Message</label>
                        {{ form_widget(form.message, { 'attr': { 'cols': '3', 'rows' : '4', 'class': 'form-control form-contact-textarea', 'placeholder' : '', 'required':true} }) }}
                    </div>

                    <div class="form-group">
                        <input name="form_botcheck" class="form-control" type="hidden" value="" id=""/>
                        {{ form_widget(form.EnvoyerMessage, { 'attr': {'class': 'btn ', 'id' : ''} }) }}

                    </div>
                    {{ form_end(form) }}

                </form>


            </div>
            <div id="contact_info_page" class="col-md-6 col-xs-12" style="    margin-top: 95px;">

                <!-- Google Map HTML Codes -->

                <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d6386.456265033!2d10.235181260801136!3d36.837012055083484!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x12fd3541a5f13321%3A0xceb5a7a4fb8af2e4!2sImmeuble+Digital+Lac+1!5e0!3m2!1sfr!2stn!4v1561628947992!5m2!1sfr!2stn"
                        width="100%" height="366" frameborder="0" style="border:0" allowfullscreen></iframe>


            </div>
        </div>
    </div>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
{% endblock %}