{% extends 'front.html.twig' %}
{% block title %} {{ 'page.contact.title'|trans }} {% endblock %}
{% block stytesheets %}
    {{ parent() }}
{% endblock %}
{% block body %}
    <!-- breadcrumb area start -->
    <section class="breadcrumb-area" id="home">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <div class="breadcrumb-area-content">
                        <h2>{{ 'page.contact.title2'| trans }}</h2>
                        <ul>
                            <li><a href="{{ path('front_home') }}">{{ 'title.Ac' |trans }}</a></li>
                            <li class="active"><a href="#">{{ 'page.contact.title3'| trans }}</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- breadcrumb area end -->
    <!-- contact section start -->
    <section class="ptb-100">
        <div class="container">
            <div class="row">
                <div class="col-lg-8">
                    <div class="contact-form2">
                        {% if app.request.locale == 'ar' %}
                            <h2 class="widget-rtl">{{ 'page.contact.title3'| trans }}</h2>
                        {% else %}
                        <h2>{{ 'page.contact.title3'| trans }}</h2>
                        {% endif %}

                        {{ form_start(form,{'attr': {'role':'form','id': 'contactForm'}}) }}
                        {% include '@App/Default/flashBag.html.twig' %}
                        <div class="row">
                            <div class="col-md-6">
                                {{ form_widget(form.name, { 'attr': {'class': '', 'placeholder': 'nomplaceholder'| trans,'name':'name','id':'name','required':true} }) }}
                                <div class="valid-feedback">Looks good!</div>
                            </div>
                            <div class="col-md-6">
                                {{ form_widget(form.phone, { 'attr': {'class': '', 'placeholder': 'Telephone'| trans,'name':'phone','id':'phone','required':true} }) }}
                            </div>
                            <div class="col-md-6">
                                {{ form_widget(form.email, { 'attr': {'class': '', 'placeholder': 'email'| trans,'name':'email','id':'email','required':true} }) }}
                            </div>
                            <div class="col-md-6">
                                {{ form_widget(form.subject, { 'attr': {'class': '', 'placeholder': 'sujet'| trans,'name':'subject','id':'subject','required':true} }) }}
                            </div>
                            <div class="col-md-12">
                                {{ form_widget(form.message, { 'attr': {'class': '', 'placeholder': 'message'| trans,'message':'content','id':'message','required':true} }) }}

                                {% if app.request.locale == 'ar' %}
                                    <button class="widget-social-icons theme-btn theme-btn5 " id="send_message">{{ 'btn.envoyer'| trans }}</button>
                                {% else %}
                                    <button class="theme-btn theme-btn5" id="send_message">{{ 'btn.envoyer'| trans }}</button>
                                {% endif %}
                            </div>
                        </div>
                        {{ form_end(form) }}
                    </div>
                </div>
                <div class="col-lg-4">
                    <div class="contact-info">
                        {% if app.request.locale == 'ar' %}
                            <h2 class="widget-rtl">{{ 'page.contact.title4'|trans }}</h2>
                            <div class="single-contact-info">
                                <div class="contact-info-icon">
                                    <i class="iconContact icofont icofont-location-pin"></i>
                                </div>
                                <div class="contact-info-text">
                                    <h4 class="widget-rtl">{{ 'page.contact.title5'|trans }}</h4>
                                    <p class="widget-rtl">{{ 'page.contact.title6'|trans }}</p>
                                </div>
                            </div>
                            <div class="single-contact-info">
                                <div class="contact-info-icon">
                                    <i class="iconContact icofont icofont-telephone"></i>
                                </div>
                                <div class="contact-info-text">
                                    <h4 class="widget-rtl">{{ 'title.ph'|trans }}</h4>
                                    <p dir="ltr">(+216) 71 809 881</p>
                                    <p dir="ltr">(+216) 71 142 000</p>
                                </div>
                            </div>
                            <div class="single-contact-info">
                                <div class="contact-info-icon">
                                    <i class="iconContact icofont icofont-envelope"></i>
                                </div>
                                <div class="contact-info-text">
                                    <h4 class="widget-rtl">{{ 'title.em' |trans }}</h4>
                                    <p class="widget-rtl">contact@cnfce.org </p>
                                    <p class="widget-rtl">tresoriere@cnfce.org </p>
                                </div>
                            </div>
                        {% else %}
                            <h2>{{ 'page.contact.title4'|trans }}</h2>
                            <div class="single-contact-info">
                                <div class="contact-info-icon">
                                    <i class="icofont icofont-location-pin"></i>
                                </div>
                                <div class="contact-info-text">
                                    <h4>{{ 'page.contact.title5'|trans }}</h4>
                                    <p>{{ 'page.contact.title6'|trans }}</p>
                                </div>
                            </div>
                            <div class="single-contact-info">
                                <div class="contact-info-icon">
                                    <i class="icofont icofont-telephone"></i>
                                </div>
                                <div class="contact-info-text">
                                    <h4>{{ 'title.ph'|trans }}</h4>
                                    <p>(+216) 71 809 881</p>
                                    <p>(+216) 71 142 000</p>
                                </div>
                            </div>
                            <div class="single-contact-info">
                                <div class="contact-info-icon">
                                    <i class="icofont icofont-envelope"></i>
                                </div>
                                <div class="contact-info-text">
                                    <h4>{{ 'title.em' |trans }}</h4>
                                    <p>contact@cnfce.org </p>
                                    <p>tresoriere@cnfce.org </p>
                                </div>
                            </div>
                        {% endif %}

                        {#<div class="single-contact-info">
                            <div class="contact-info-icon">
                                <i class="icofont icofont-clock-time"></i>
                            </div>
                            <div class="contact-info-text">
                                <h4>Working Hours</h4>
                                <p>Mon to Fri - 08:00 to 16:00 </p>
                            </div>
                        </div>#}
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- contact section end -->
    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3193.419203919533!2d10.184301014780534!3d36.83243517358522!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x12fd349152110abf%3A0x56d8cb1b63a6a711!2sUTICA-UNION+TUN.+DE+L&#39;IND.+DU+COMMERCE+%26+DE+L&#39;ART!5e0!3m2!1sfr!2stn!4v1560847303046!5m2!1sfr!2stn" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
    {#<div id="map"></div>#}
{% endblock %}
{% block javascripts %}
    {{ parent() }}
    {#<script>
        function initMap() {
            var uluru = {lat: -26.397, lng: 135.644};
            var map = new google.maps.Map(document.getElementById('map'), {
                zoom: 6,
                center: uluru
            });
            var marker = new google.maps.Marker({
                position: uluru,
                map: map
            });
        }
    </script>
    <script async defer
            src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBnKyOpsNq-vWYtrwayN3BkF3b4k3O9A_A&callback=initMap"></script>#}
    {#{% include '@FrontBundle/Default/assets.html.twig' %}#}
{% endblock %}