{% extends 'front.html.twig' %}
{% block title %} Contact CNFCE {% 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>Contactez Nous</h2>
                        <ul>
                            <li><a href="{{ path('front_home') }}">Accueil</a></li>
                            <li class="active"><a href="#">Contact</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">
                        <h2>Contact</h2>
                        {{ 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': 'Nom *','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': 'Phone *','name':'phone','id':'phone','required':true} }) }}
                            </div>
                            <div class="col-md-6">
                                {{ form_widget(form.email, { 'attr': {'class': '', 'placeholder': 'Email *','name':'email','id':'email','required':true} }) }}
                            </div>
                            <div class="col-md-6">
                                {{ form_widget(form.subject, { 'attr': {'class': '', 'placeholder': 'Sujet *','name':'subject','id':'subject','required':true} }) }}
                            </div>
                            <div class="col-md-12">
                                {{ form_widget(form.message, { 'attr': {'class': '', 'placeholder': 'Message *','message':'content','id':'message','required':true} }) }}
                                <button class="theme-btn theme-btn5" id="send_message">Envoyer</button>
                            </div>
                        </div>
                        {{ form_end(form) }}
                    </div>
                </div>
                <div class="col-lg-4">
                    <div class="contact-info">
                        <h2>Informations de contact</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>Location</h4>
                                <p>Rue Ferjani Bel Haj Ammar, Cité El khadhra, 1003, Tunis, Tunisie</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>Téléphones</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>Email</h4>
                                <p>contact@cnfce.org</p>
                                <p>tresoriere@cnfce.org </p>
                            </div>
                        </div>
                        {#<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 %}