{% extends "baseFonce.html.twig" %}

{% block title "Icaupack | Contact" %}

{% block body %}
    <main>
        <div class="traits">
            <div class="trait"></div>
            <div class="trait t2"></div>
        </div>
        <div class="contact">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-md-11 np">
                        <!-- Message flash -->
                        {% for message in app.flashes('success') %}
                            <div class="alert alert-custom">
                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 37 37">
                                    <defs>
                                        <style>.cls-1,.cls-2{fill:none;stroke:#000;}.cls-1{stroke-miterlimit:10;}.cls-2{stroke-linecap:round;stroke-linejoin:round;}</style>
                                    </defs>
                                    <g id="Calque_2" data-name="Calque 2">
                                        <g id="Calque_1-2" data-name="Calque 1">
                                            <circle class="cls-1" cx="18.5" cy="18.5" r="18"/>
                                            <polyline class="cls-2" points="9.5 19 16.5 26 27.5 11"/>
                                        </g>
                                    </g>
                                </svg>
                                {{ message|nl2br }}
                            </div>
                        {% endfor %}

                        <div class="row">
                            <div class="col-md-7 np">
                                <div class="map">
                                    <img src="{{ asset('images/carte.jpg') }}" alt="Carte icaupack - ">
                                    <div class="pointer">
                                        <span>
                                            ZI - 13 rue de la Plaine des Isles<br>
                                            89000 Auxerre
                                        </span>
                                        <img src="{{ asset('images/icons/pointer.svg') }}" alt="Pictogramme position - Icaupack">
                                    </div>
                                    <a href="" class="btn-map">Voir sur google map</a>
                                </div>
                                <div class="coordonnees">
                                    <div class="phone">
                                        <img src="{{ asset('images/icons/phone-contact.svg') }}" alt="Pictogramme téléphone - Icaupack">
                                        <span>03 55 33 01 50</span>
                                    </div>
                                    <div class="mail">
                                        <img src="{{ asset('images/icons/mail-contact.svg') }}" alt="Pictogramme téléphone - Icaupack">
                                        <span><a href="mailto:contact@icaupack.com">contact@icaupack.com</a></span>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-5 np-l">
                                <div class="contact-form">
                                    <div class="title">
                                        <div class="carre"></div>
                                        <h2>Nous contacter</h2>
                                    </div>
                                    <div class="form">
                                    {{ form_start(form) }}
                                            {{ form_row(form.subject) }}
                                            {{ form_row(form.lastname) }}
                                            {{ form_row(form.firstname) }}
                                            {{ form_row(form.email) }}
                                            {{ form_row(form.phone) }}
                                            {{ form_row(form.address) }}
                                            {{ form_row(form.postalCode) }}
                                            {{ form_row(form.city) }}
                                            {{ form_row(form.message) }}
                                            <span>Les champs avec « * » sont obligatoires</span>
                                            {{ form_rest(form) }}
                                        {{ form_end(form) }} 
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-1"></div>
                </div>
            </div>
        </div>
    </main>
{% endblock %}