{% 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">Contact</h2>
                            <ol class="breadcrumb text-center text-black mt-10">
                                <li><a href="{{ path('home') }}">Acceuil</a></li>
                                <li class="active text-theme-colored">Contact</li>
                            </ol>
                        </div>
                    </div>
                </div>
            </div>
        </section>

    </div>

    <section class="divider">
        {#<div class="container pt-60 pb-60">#}
            {#<div class="section-title mb-60">#}
                {#<div class="row">#}
                    {#<div class="col-md-12">#}
                        {#<div class="esc-heading small-border text-center">#}
                            {#<h3>Have any Questions?</h3>#}
                        {#</div>#}
                    {#</div>#}
                {#</div>#}
            {#</div>#}
            {#<div class="section-content">#}
                {#<div class="row">#}
                    {#<div class="col-sm-12 col-md-4">#}
                        {#<div class="contact-info text-center">#}
                            {#<i class="fa fa-phone font-36 mb-10 text-theme-colored"></i>#}
                            {#<h4>Call Us</h4>#}
                            {#<h6 class="text-gray">Phone: +262 695 2601</h6>#}
                        {#</div>#}
                    {#</div>#}
                    {#<div class="col-sm-12 col-md-4">#}
                        {#<div class="contact-info text-center">#}
                            {#<i class="fa fa-map-marker font-36 mb-10 text-theme-colored"></i>#}
                            {#<h4>Address</h4>#}
                            {#<h6 class="text-gray">121 King Street, Australia</h6>#}
                        {#</div>#}
                    {#</div>#}
                    {#<div class="col-sm-12 col-md-4">#}
                        {#<div class="contact-info text-center">#}
                            {#<i class="fa fa-envelope font-36 mb-10 text-theme-colored"></i>#}
                            {#<h4>Email</h4>#}
                            {#<h6 class="text-gray">you@yourdomain.com</h6>#}
                        {#</div>#}
                    {#</div>#}
                {#</div>#}
            {#</div>#}
        {#</div>#}
    </section>

    <!-- Content Section Start -->
    <div class="container">


        <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'}}) }}

                <form id="formContact" name="contact_form" class="" action="" method="post">
                    <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=""/>
                        {{ form_widget(form.EnvoyerMessage, { 'attr': {'class': ' btn btn-dark btn-theme-colored btn-flat'} }) }}

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

                </form>


            </div>
            <div id="contact_info_page" class="col-md-6 col-xs-12">

                <!-- 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="450" frameborder="0" style="border:0" allowfullscreen></iframe>


                {#<h2 class="title-red-line-left">Contact Information</h2>#}
                {#<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore#}
                {#et dolore magna aliqua Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi.#}
                {#aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit.</p>#}
                {#<h2 class="title-red-line-left pull-down-40">Our Office</h2>#}
                {#<div class="office-box"><i class="fa fa-map-marker"></i>#}
                {#<p><span>Address:</span> 56/678, 2nd Floor, Avenue Square, P.O.Box : 2301. Idhaho, USA. </p>#}
                {#</div>#}
                {#<div class="office-box"><i class="fa fa-phone"></i>#}
                {#<p><span>Phone:</span> 203913811988, </p>#}
                {#</div>#}
                {#<div class="office-box"><i class="fa fa-envelope email"></i>#}
                {#<p class="pdg-lt-10"><span>Email:</span> info@yourwebsite.com </p>#}
                {#</div>#}
            </div>
        </div>
    </div>

    <!-- Google Map start -->
    {#<section id="googlemaps" class="google-map pull-down-70 clearfix">#}
    {#<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d5735944.176578343!2d-118.63220758504382!3d45.41430016957075!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x5358ffa885e499e9%3A0xd06b300515f78758!2sIdaho%2C+USA!5e0!3m2!1sen!2sae!4v1513436470868"></iframe>#}
    {#</section>#}
    <!-- Google Map End -->

    <!-- Content Section End -->

{% endblock %}

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