{% extends 'frontNEW.html.twig' %}
{% block title %} {{ 'page.contact.title'|trans }} {% endblock %}
{% block stytesheets %}
    {{ parent() }}
{% endblock %}

{% block css %}
{% endblock %}
{% block body %}
    <div class="page-title-area item-bg6 jarallax" data-jarallax='{"speed": 0.3}'>
        <div class="container">
            <div class="page-title-content text-center">
                <h2>{{ 'page.contact.title2'| trans }}</h2>
            </div>
        </div>
    </div>
    <!-- contact start -->
    <section class="contact-area ptb-100">
        <div class="container">
            <div class="row">
                <div class="col-lg-6 col-md-12">
                    <div class="section-title">
                        <h2>{{ 'page.contact.title4'|trans }}</h2>
                    </div>
                    <div class="contact-info">
                        <ul class="contact-list">
                            <li>
                                <div class="icon">
                                    <i class="flaticon-map-location"></i>
                                </div>
                                <span>{{ 'page.contact.title5'|trans }}</span>
                                {{ 'page.contact.title6'|trans }}
                            </li>
                            <li>
                                <div class="icon">
                                    <i class="flaticon-email"></i>
                                </div>
                                <span>{{ 'title.em' |trans }}</span>
                                <a href="mailto:contact@cnfce.org">contact@cnfce.org</a>
                                <a href="mailto:tresoriere@cnfce.org">tresoriere@cnfce.org</a>
                            </li>
                            <li>
                                <div class="icon">
                                    <i class="flaticon-phone-call"></i>
                                </div>
                                <span>{{ 'title.ph'|trans }}</span>
                                <a href="tel:+21671809881" style="direction: ltr;">(+216) 71 809 881</a>
                                <a href="tel:+21671142000" style="direction: ltr;">(+216) 71 142 000</a>
                            </li>
                        </ul>
                        <ul class="social">
                            <li>
                                <a href="https://www.facebook.com/ChambreNationaleDesFemmesChefsDEntreprises/" target="_blank"><i class="flaticon-facebook"></i></a>
                            </li>
                            <li>
                                <a href="#" target="_blank"><i class="flaticon-twitter"></i></a>
                            </li>
                            <li>
                                <a href="#" target="_blank"><i class="flaticon-linkedin"></i></a>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="col-lg-6 col-md-12">
                    <div class="section-title">
                        <h2>{{ 'page.contact.title3'| trans }}</h2>
                    </div>
                    <div class="contact-form">
{#                        <form id="contactForm">#}
                        {{ form_start(form,{'attr': {'role':'form','id': 'contactForm_'}}) }}
                        {% include '@App/Default/flashBag.html.twig' %}
                            <div class="row">
                                <div class="col-lg-12 col-md-6">
                                    <div class="form-group">
                                        {{ form_widget(form.name, { 'attr': {'class': '', 'placeholder': 'nomplaceholder'| trans,'name':'name','id':'name','required':true} }) }}
                                        <div class="help-block with-errors"></div>
                                    </div>
                                </div>
                                <div class="col-lg-12 col-md-6">
                                    <div class="form-group">
                                        {{ form_widget(form.phone, { 'attr': {'class': '', 'placeholder': 'Telephone'| trans,'name':'phone','id':'phone','required':true} }) }}                                        <div class="help-block with-errors"></div>
                                    </div>
                                </div>
                                <div class="col-lg-12 col-md-6">
                                    <div class="form-group">
                                        {{ form_widget(form.email, { 'attr': {'class': '', 'placeholder': 'email'| trans,'name':'email','id':'email','required':true} }) }}
                                        <div class="help-block with-errors"></div>
                                    </div>
                                </div>
                                <div class="col-lg-12 col-md-12">
                                    <div class="form-group">
                                        {{ form_widget(form.subject, { 'attr': {'class': '', 'placeholder': 'sujet'| trans,'name':'subject','id':'subject','required':true} }) }}
                                        <div class="help-block with-errors"></div>
                                    </div>
                                </div>
                                <div class="col-lg-12 col-md-12">
                                    <div class="form-group">
                                        {{ form_widget(form.message, { 'attr': {'class': '', 'placeholder': 'message'| trans,'message':'content','id':'message','required':true} }) }}
                                        <div class="help-block with-errors"></div>
                                    </div>
                                </div>
                                <div class="col-lg-12 col-md-12">
                                    <button id="send_message" type="submit" class="default-btn">{{ 'btn.envoyer'| trans }} <span></span></button>
                                    <div id="msgSubmit" class="h3 text-center hidden"></div>
                                    <div class="clearfix"></div>
                                </div>
                            </div>
                        {{ form_end(form) }}
                    </div>
                </div>
            </div>
        </div>
        <div class="bg-map"><img src="{{ asset('assetsfront/img/bg-map.png') }}" alt="image" /></div>
    </section>
    <!-- contact 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="100%" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>

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

{% endblock %}