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

{% block title %}Contact{% endblock %}

{% block description %}Vous pouvez me contacter pour toutes demandes d'informations via le formulaire, mon email ou mon téléphone.{% endblock %}

{% block css %}
{% endblock %}

{% block body %}

    <!-- start page title section -->
    <section class="page-title-section bg-img cover-background" data-overlay-dark="7" data-background="{{ asset('assets/img/img/bandeau2.jpg') }}">
        <div class="container">

            <div class="row">
                <div class="col-md-12">
                    <h1>Contact</h1>
                </div>
            </div>
        </div>
    </section>
    <!-- end page title section -->

    <!-- start contact section -->
    <section>
        <div class="container">
            {% if success is defined %}
            {% if success == true %}
                <div class="col-lg-6 offset-lg-3 text-center mt-4">
                    <div class="alert fade show bgc-white text-dark-tp3 border-none border-t-4 shadow-sm brc-success radius-0 py-3 d-flex align-items-start" style="border: 1px solid green !important;">
                        <div class="bgc-success-l4 px-3 py-3 radius-round mr-4 border-2 brc-success-m2">
                            <i class="fa fa-check text-140 text-success mx-2px"></i>
                        </div>

                        <div class="text-dark-tp3">
                            <h3 class="text-success-d1 text-130">Succès!</h3>
                            Votre message a bien été envoyé.
                        </div>

                        <button type="button" class="close align-self-start ml-auto mt-n25 mr-n2 text-success-d2 text-150 opacity-2 bgc-h-success-l2 radius-round px-15 pt-1px pb-3px" data-dismiss="alert" aria-label="Close">
                            <span aria-hidden="true">×</span>
                        </button>
                    </div>
                </div>
            {% elseif success == false and message != ''%}
                <div class="col-lg-6 offset-lg-3 text-center mt-4">
                    <div class="alert fade show bgc-white text-dark-tp3 border-none border-t-4 shadow-sm brc-danger radius-0 py-3 d-flex align-items-start" style="border: 1px solid green !important;">
                        <div class="bgc-danger-l4 px-3 py-3 radius-round mr-4 border-2 brc-danger-m2">
                            <i class="fa fa-check text-140 text-danger mx-2px"></i>
                        </div>

                        <div class="text-dark-tp3">
                            <h3 class="text-danger-d1 text-130">Erreur !</h3>
                            Une erreur est survenue, veuillez réessayer plus tard !
                        </div>

                        <button type="button" class="close align-self-start ml-auto mt-n25 mr-n2 text-danger-d2 text-150 opacity-2 bgc-h-danger-l2 radius-round px-15 pt-1px pb-3px" data-dismiss="alert" aria-label="Close">
                            <span aria-hidden="true">×</span>
                        </button>
                    </div>
                </div>
            {% endif %}
            {% endif %}
            <div class="row">
                <div class="col-lg-6 order-lg-1 order-2">
                    <h3 class="font-weight-900 font-size38">Contactez-nous</h3>
                    <div class="contact-form-box margin-30px-top">
                        {{ form_start(form) }}
                            <input type="hidden" name="form-type" value="contact">
                            <div class="row">
                                <div class="col-md-6">
                                    {{ form_widget(form.name) }}
                                </div>
                                <div class="col-md-6">
                                    {{ form_widget(form.phone) }}
                                </div>
                                <div class="col-md-12">
                                    {{ form_widget(form.email) }}
                                </div>
                                <div class="col-md-12">
                                    {{ form_widget(form.message) }}
                                </div>
                                <div class="mfControls col-md-12">
                                    <button type="submit" class="butn medium">Envoyer</button>
                                </div>
                            </div>
                        {{ form_end(form) }}
                    </div>
                </div>

                <div class="col-lg-6 order-lg-2 order-1 sm-margin-30px-bottom">
                    <div class="padding-100px-left md-padding-50px-left sm-no-padding-left height-100 position-relative">
                        <div class="bg-theme padding-30px-lr padding-40px-tb sm-padding-25px-lr sm-padding-30px-tb border-radius-10 height-100">
                            <h3 class="text-white">Information</h3>
                            <p class="text-white">Je vous accueille du lundi au samedi matin (mercredi fermé) au salon.</p>
                            <div class="margin-90px-bottom">
                                <ul class="list-style1">
                                    <li>
                                        <i class="fas fa-envelope text-white margin-10px-right"></i>
                                        <a href="mailto:portraitdechiens@gmail.com" class="text-white">portraitdechiens@gmail.com</a>
                                    </li>
                                    <li>
                                        <i class="fas fa-phone text-white margin-10px-right"></i>
                                        <a href="tel:+33659925905" class="text-white">06 59 92 59 05</a>
                                    </li>
                                    <li>
                                        <i class="fas fa-map-marker-alt text-white margin-10px-right"></i>
                                        <a class="text-white">6C François Mitterrand, 33133  Galgon</a>
                                    </li>
                                </ul>
                            </div>
                            <div class="position-absolute contact-paw">
                                <img src="img/content/contact-bg-min.png" class="width-60" alt="" />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- end contact section -->

    <!-- start map section -->
    <iframe style="width:100%; height:500px;" id="gmap_canvas" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d705.402845057552!2d-0.2760545303549262!3d44.99220514662529!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xd554acf25427b61%3A0xa7eb3a0ab94ae360!2s6%20Av.%20Fran%C3%A7ois%20Mitterrand%2C%2033133%20Galgon!5e0!3m2!1sfr!2sfr!4v1699049554244!5m2!1sfr!2sfr" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
    <!-- end map section -->

{% endblock %}

{% block javascripts %}

{% endblock %}