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

{% block title %}Nous contacter{% endblock %}

{% block body %}
    <main>
        <section class="contact">
            <div class="container">
                <div class="title">
                    <h1>Nous <span class="green">contacter <img src="{{ asset('images/soulignement/soulignement-contact.svg') }}" alt="Trait bleu"></span></h1>
                </div>

                <div class="contact__wrapper flex-row justify-between">
                    <div class="contact__wrapper__form">
                        {{ form_start(form) }}
                            <div class="row">
                                <div class="col-6">
                                    <div class="group-form">
                                        {{ form_row(form.name) }}
                                    </div>
                                </div>
                                <div class="col-6">
                                    <div class="group-form">
                                        {{ form_row(form.surname) }}
                                    </div>
                                </div>
                                <div class="col-6">
                                    <div class="group-form">
                                        {{ form_row(form.email) }}
                                    </div>
                                </div>
                                <div class="col-6">
                                    <div class="group-form">
                                        {{ form_row(form.phone) }}
                                    </div>
                                </div>
                            </div>

                            <div class="group-form">
                                {{ form_row(form.message) }}
                            </div>
                            <div class="group-form">
                                <div class="form-check">
                                    {{ form_widget(form.isLegal, {'attr': {'class': 'form-check-input'}}) }}
                                    {{ form_label(form.isLegal) }}
                                </div>
                            </div>

                            <button type="submit" class="btn btn-blue">Envoyer</button>
                        {{ form_end(form) }}
                    </div>
                    <div class="contact__wrapper__info">
                        <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d5354.489512725479!2d3.9684811999999994!3d47.854222899999996!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47ee7aaa62328be7%3A0xc24d3b283786392d!2sSyndicat%20Mixte%20du%20Bassin%20Versant%20de%20l&#39;Arman%C3%A7on!5e0!3m2!1sfr!2sfr!4v1722495362883!5m2!1sfr!2sfr" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
                        <div class="contact-detail flex-column">
                            <div class="contact-detail__item flex-row align-center">
                                <img src="{{ asset('images/icons/location.svg') }}" alt="Pictgrammer pointer map">
                                <span>58T Rue Vaucorbe, 89700 Tonnerre</span>
                            </div>
                            <div class="contact-detail__item flex-row align-center">
                                <img src="{{ asset('images/icons/call.svg') }}" alt="Pictgrammer pointer map">
                                <span>03 86 55 40 00</span>
                            </div>
                            <div class="contact-detail__item flex-row align-center">
                                <img src="{{ asset('images/icons/mail.svg') }}" alt="Pictgrammer pointer map">
                                <span>contact@ptge-serein-armancon.fr</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </main>
{% endblock %}