{% extends 'frontend/base.html.twig' %}
{% import 'frontend/macro.html.twig' as macro %}

{% block title %}Aux Actes Citoyens - Imaginer et construire ensemble le futur du Nord Franche-Comté{% endblock %}

{% block meta %}
    <meta name="title" content="Aux Actes Citoyens - Imaginer et construire ensemble le futur du Nord Franche-Comté"/>
    <meta name="description"
          content="La plateforme numérique « Aux actes Citoyens » arrive bientôt. En attendant, rejoignez-nous !"/>
{% endblock %}

{% block body %}
    <div class="bloc-contact">
        <div class="container">
            <div class="row row-contact">
                <div class="col-12 col-sm-9">
                    <h1>Contactez l’équipe d’Aux Actes Citoyens !</h1>
                    <p>Des questions, une envie de s’engager avec nous, n’hésitez pas à nous contacter !</p>
                </div>
                <div class="col-3 d-none d-sm-block">
                    <img class="sut-contact" src="{{ 'assets/img/SUT-Contacts.png' }}" alt="SUT contact">
                </div>
                <img class="perso-contact" src="{{ 'assets/img/Perso-Feuilles-Contacts.png' }}" alt="Perso contact">
            </div>
        </div>
    </div>

    <div class="container bloc-address">
        <div class="row">
            <div class="col-6 d-none d-lg-block">
                <img class="logo" src="{{ 'assets/img/Logo-Aux-Actes-Citoyens.png' }}" alt="Logo AAC">
            </div>
            <div class="col-12 col-lg-6">
                <p class="background-green">
                    Vous pouvez nous joindre par courrier et par email :
                </p>
                <p class="address-contact">
                    La Coopérative des Citoyens
                </p>
                <p class="address-contact">
                    150 avenue Jean Jaurès
                </p>
                <p class="address-contact">
                    90000 Belfort
                </p>
                <div class="link-contact">
                    {{ macro.email_contact() }}
                </div>
            </div>
        </div>
    </div>

    <div class="container container-contact">
        {{ form_start(form, {attr: {id: "contact-form",  'action' :  path('app_contact_form')}}) }}
        <div class="row">
            <div class="col-4">
                {{ form_widget(form.firstname) }}
            </div>
            <div class="col-8">
                {{ form_widget(form.lastname) }}
            </div>
        </div>
        <div class="row">
            <div class="col-12">
                {{ form_widget(form.email) }}
            </div>
        </div>
        <div class="row">
            <div class="col-12">
                {{ form_widget(form.object) }}
            </div>
        </div>
        <div class="row">
            <div class="col-12">
                {{ form_widget(form.message) }}
            </div>
        </div>
        <div class="row">
            <div class="col-12 text-center">
                <button type="button" id="contact-form-btn">ENVOYER</button>
            </div>
        </div>
        {{ form_end(form) }}

    </div>
{% endblock %}