{# ====== CONTACT — Theme Default ====== #}

<div class="container">
    <div class="breadcrum">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{ path('app_home') }}">Accueil</a></li>
                <li class="breadcrumb-item active" aria-current="page">{{ title_page }}</li>
            </ol>
        </nav>
    </div>

    {# About section #}
    <div class="team">
        <div class="d-flex flex-column flex-lg-row row pt-5 mb-5">
            <div class="col-lg-4 team_img d-flex align-items-center mb-4 mb-lg-0 justify-content-center">
                <img src="{{ site.aboutImage ? asset('documents/medias/' ~ site.aboutImage.fileName) : asset('images/placeholder.jpg') }}" alt="{{ site.name|default('') }}" class="counter_img rounded-circle" loading="lazy">
            </div>
            <div class="col-lg-8 team_text d-flex flex-column justify-content-evenly align-items-center">
                <h4 class="team_name">{{ site.name|default('') }}</h4>
                <div class="team_text fst-italic">
                    <p>{{ site.defaultSeoDescription|default('') }}</p>
                </div>
            </div>
        </div>
    </div>

    <div class="contact">
        <div class="d-flex flex-column-reverse flex-lg-row">
            <div class="col-lg-8 p-5 contact_form">
                <h2 class="title-one">{{ title_page }}</h2>
                {{ form_start(contactForm) }}
                    {{ form_widget(contactForm) }}
                    <button class="btn-font btn btn-primary mt-3" type="submit">Envoyer</button>
                {{ form_end(contactForm) }}
            </div>
            <div class="col-lg-4 contact_widgets">
                <div class="logo d-flex flex-column align-items-center mb-3">
                    {% if site.logo %}
                        <img src="{{ asset('documents/medias/' ~ site.logo.fileName) }}" alt="{{ site.name|default('') }}" loading="lazy"/>
                    {% endif %}
                </div>
                <ul class="contact_list position-sticky">
                    {% if site.phone %}
                    <li class="contact_list_item list-unstyled">
                        <a href="tel:{{ site.phone }}">
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M3.654 1.328a.678.678 0 0 0-1.015-.063L1.605 2.3c-.483.484-.661 1.169-.45 1.77a17.568 17.568 0 0 0 4.168 6.608 17.569 17.569 0 0 0 6.608 4.168c.601.211 1.286.033 1.77-.45l1.034-1.034a.678.678 0 0 0-.063-1.015l-2.307-1.794a.678.678 0 0 0-.58-.122l-2.19.547a1.745 1.745 0 0 1-1.657-.459L5.482 8.062a1.745 1.745 0 0 1-.46-1.657l.548-2.19a.678.678 0 0 0-.122-.58L3.654 1.328zM1.884.511a1.745 1.745 0 0 1 2.612.163L6.29 2.98c.329.423.445.974.315 1.494l-.547 2.19a.678.678 0 0 0 .178.643l2.457 2.457a.678.678 0 0 0 .644.178l2.189-.547a1.745 1.745 0 0 1 1.494.315l2.306 1.794c.829.645.905 1.87.163 2.611l-1.034 1.034c-.74.74-1.846 1.065-2.877.702a18.634 18.634 0 0 1-7.01-4.42 18.634 18.634 0 0 1-4.42-7.009c-.362-1.03-.037-2.137.703-2.877L1.885.511z"/></svg>
                            {{ site.phone }}
                        </a>
                    </li>
                    {% endif %}
                    {% if site.email %}
                    <li class="contact_list_item list-unstyled">
                        <a href="mailto:{{ site.email }}">
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V4Zm2-1a1 1 0 0 0-1 1v.217l7 4.2 7-4.2V4a1 1 0 0 0-1-1H2Zm13 2.383-4.708 2.825L15 11.105V5.383Zm-.034 6.876-5.64-3.471L8 9.583l-1.326-.795-5.64 3.47A1 1 0 0 0 2 13h12a1 1 0 0 0 .966-.741ZM1 11.105l4.708-2.897L1 5.383v5.722Z"/></svg>
                            {{ site.email }}
                        </a>
                    </li>
                    {% endif %}
                    {% if site.address1 %}
                    <li class="contact_list_item list-unstyled">
                        {% if site.googleMaps %}
                        <a href="{{ site.googleMaps }}" target="_blank">
                        {% endif %}
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M12.166 8.94c-.524 1.062-1.234 2.12-1.96 3.07A31.493 31.493 0 0 1 8 14.58a31.481 31.481 0 0 1-2.206-2.57c-.726-.95-1.436-2.008-1.96-3.07C3.304 7.867 3 6.862 3 6a5 5 0 0 1 10 0c0 .862-.305 1.867-.834 2.94zM8 16s6-5.686 6-10A6 6 0 0 0 2 6c0 4.314 6 10 6 10z"/><path d="M8 8a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm0 1a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"/></svg>
                            {{ site.address1 }}{% if site.postCode %}, {{ site.postCode }}{% endif %} {{ site.town|default('') }}
                        {% if site.googleMaps %}</a>{% endif %}
                    </li>
                    {% endif %}
                </ul>
                {% if site.googleMaps %}
                <div class="maps mt-3">
                    <iframe src="{{ site.googleMaps }}" height="300" style="border:0; width:100%; border-radius: 0.5rem;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
                </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>