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

{% block title 'Contact' %}

{% block body %}
    <main>
        <div class="contact">
            {% for message in app.flashes('success') %}
                <div class="alrt alert-success">
                    {{ message }}
                </div>
            {% endfor %}
            {% if not form.vars.valid %}
                <div class="alert alert-danger">
                    Erreur ! Vérifier vos informations.
                </div>
            {% endif %}
            <div class="container-fluid">
                <div class="title">
                    <h2>Contact</h2>
                    <div class="carre"></div>
                </div>
                <span class="h5 sous_titre_contact">Votre projet commence ici !</span>
                <div class="row">
                    <div class="col-lg-1"></div>
                        <div class="col-lg-10 form">
                            <div class="row">
                                <div class="col-lg-4 gauche">
                                    <div class="info-contact">
                                        <h2>Nous contacter</h2>
                                        <div class="contact-info">
                                            <img src="{{ asset('images/icons/telephone.svg') }}" alt="Pictogramme téléphone">
                                            <span>06 32 95 32 35</span>
                                        </div>
                                        <div class="contact-info">
                                            <img src="{{ asset('images/icons/mail.svg') }}" alt="Pictogramme enveloppe">
                                            <span>marie@charbertduvalauxerre.fr</span>
                                        </div>
                                        <div class="contact-info">
                                            <img src="{{ asset('images/icons/adresse.svg') }}" alt="Pictogramme localisation">
                                            <span>3 rue de grand Hemont, 89470 Moneteau</span>
                                        </div>
                                        <div class="contact-info">
                                            <img src="{{ asset('images/icons/horaire.svg') }}" alt="Pictogramme horloge">
                                            <span>
                                                Du lundi au vendredi : 9h00 - 12h00 / 14h00 - 18h00<br>
                                                Le samedi : 10h00 - 12h00 / 14h00 - 18h00
                                            </span>
                                        </div>
                                        <div class="nous-suivre">
                                            <h2>Nous suivre</h2>
                                            <div class="rs">
                                                <img src="{{ asset('images/icons/facebook.svg') }}" class="facebook" alt="Pictogramme Facebook">
                                                <img src="{{ asset('images/icons/instagram.svg') }}" alt="Pictogramme Instagram">
                                            </div>
                                        </div>
                                        <div class="cata">
                                            <a href="" class="btn">Téléchargez notre catalogue</a>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-8 droite">
                                    {{ form_start(form) }}
                                        <div class="droite">
                                            <h2>Vos informations</h2>
                                            <div class="row">
                                                <div class="col-lg-6">
                                                    <div>{{ form_row(form.prenom) }}</div>
                                                </div>
                                                <div class="col-lg-6">
                                                    <div>{{ form_row(form.nom) }}</div>
                                                </div>
                                                <div class="col-lg-6">
                                                    <div>{{ form_row(form.telephone) }}</div>
                                                </div>
                                                <div class="col-lg-6">
                                                    <div>{{ form_row(form.email) }}</div>
                                                </div>
                                            </div>
                                            <h2>Votre projet</h2>
                                            <div class="row">
                                                <div class="col-lg-6">
                                                    {{ form_row(form.budget) }}
                                                </div>
                                                <div class="col-lg-6">
                                                    {{ form_row(form.delai) }}
                                                </div>
                                                <div class="col-lg-12">
                                                    {{ form_row(form.description) }}
                                                </div>
                                            </div>

                                            <h2>Vos préférences de contact</h2>
                                            <div class="row">
                                                <div class="col-lg-6">
                                                    {{ form_row(form.disponibilite) }}
                                                </div>
                                                <div class="col-lg-6">
                                                    <div class="row">
                                                        <div class="col-lg-6">
                                                            <span class="label">Plages horaires</span>
                                                            {{ form_row(form.matin) }}
                                                        </div>
                                                        <div class="col-lg-6">
                                                            {{ form_row(form.aprem) }}
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <button class="btn" id="bouton">Envoyer</button>
                                        </div>
                                    {{ form_end(form) }}
                                </div>
                            </div>
                        </div>
                    <div class="col-lg-1"></div>
                </div>
            </div>
        </div>
    </main>
{% endblock %}