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

{% block page_title %}Contact{% endblock %}
{% block page_subtitle %}Nous contacter{% endblock %}

{% block sidebar %}
<div id="sidebar">
    <div class="left-content">
        <h4 class="left-content-head-title">Coordonnées</h4>
        <ul>
            <li>Mob. 06.64.45.58.50</li>
            <li><a href="mailto:opale37@gmail.com">opale37@gmail.com</a></li>
            <li>2 Brochemerle<br>79150 ÉTUSSON</li>
        </ul>
    </div>
</div>
{% endblock %}

{% block page_content %}
<div data-controller="contact" data-contact-sitekey-value="{{ recaptcha_site_key }}">

    {% for type, messages in app.flashes %}
        {% for message in messages %}
            <div class="alert alert-{{ type }} alert-dismissible fade show" role="alert">
                {{ message }}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Fermer"></button>
            </div>
        {% endfor %}
    {% endfor %}

    <p>Vous pouvez utiliser le formulaire ci-dessous pour nous envoyer un message, nous répondrons dans les meilleurs délais. L'adresse email et/ou le téléphone que vous nous communiquerez seront utilisés uniquement pour vous répondre.</p>

    {{ form_start(form, {attr: {class: 'contact-form', novalidate: 'novalidate'}}) }}

        {{ form_row(form.email) }}
        {{ form_row(form.message) }}

        {% if recaptcha_site_key %}
        <input type="hidden" name="g-recaptcha-response" id="recaptcha-token">
        {% endif %}

        <div class="mb-3">
            <button type="submit" class="btn-contact">Envoyer</button>
        </div>

    {{ form_end(form) }}

</div>
{% endblock %}

{% block head_extra %}
{% if recaptcha_site_key %}
<script src="https://www.google.com/recaptcha/enterprise.js?render={{ recaptcha_site_key }}" async defer></script>
{% endif %}
{% endblock %}