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

{% block title %}{{ globals["CONTACT_TITLE_H2"] }}{% endblock %}

{% block body %}
    <div class="container no-padding-mobile">
        <main class="page">
            <div class="container px-0">
                <div class="content p-3">
                    <div class="row">
                        <div class="col text">
                            <h2>{{ globals["CONTACT_TITLE_H2"] }}</h2>
                            <h3>{{ globals["CONTACT_TITLE_H3"] }}</h3>
                            <p>{{ globals["CONTACT_TEXT"] }}</p>
                        </div>
                    </div>
                </div>
                <div class="yellow-bg">
                    <div class="content p-3">
                        <div class="row">
                            <div class="col-12 col-md-4">
                                <div class="row">
                                    <div class="col-1 pt-2">
                                        <i class="bi-envelope blue-text"></i>
                                    </div>
                                    <div class="col">
                                        <p>{{ globals["CONTACT_EMAIL_TEXT"]|raw }}</p>
                                        <p class="blue-text">{{ globals["CONTACT_EMAIL"] }}</p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-12 col-md-4">
                                <div class="row">
                                    <div class="col-1 pt-2">
                                        <i class="bi-geo-alt blue-text"></i>
                                    </div>
                                    <div class="col">
                                        <p>{{ globals["CONTACT_ADDRESS_TEXT"]|raw }}</p>
                                        <p class="blue-text">{{ globals["CONTACT_ADDRESS"] }}</p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-12 col-md-4">
                                <div class="row">
                                    <div class="col-1 pt-2">
                                        <i class="bi-telephone blue-text"></i>
                                    </div>
                                    <div class="col">
                                        <p>{{ globals["CONTACT_TELEPHONE_TEXT"]|raw }} </p>
                                        <p class="blue-text"> {{ globals["CONTACT_TELEPHONE"] }} </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="content p-3 pb-0">
                    <div class="row">
                        <div class="col text mb-1 mb-md-3">
                            <h2>{{ globals["CONTACT_TITLE_FORM"] }}</h2>
                            <div>
                                {% form_theme form 'form/custom_form_row_fo.html.twig' %}    
                                {{ form_start(form, {'attr': {'class': 'needs-validation'}}) }}
                                {% for flash_message in app.session.flashbag.get('notice') %}
                                    <div class="alert alert-success">
                                        {{ flash_message }}
                                    </div>
                                {% endfor %}
                                {% for flash_message in app.session.flashbag.get('error') %}
                                    <div class="alert alert-danger">
                                        {{ flash_message }}
                                    </div>
                                {% endfor %}
                                <div class="row">
                                    <div class="col-12 col-md-6">
                                        {{ form_row(form.name) }}
                                        {{ form_row(form.firstname) }}
                                        {{ form_row(form.email) }}
                                        {{ form_row(form.telephone) }}
                                    </div>
                                    <div class="col-12 col-md-6">
                                        {{ form_row(form.menu) }}
                                        {{ form_row(form.message) }}
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-8">
                                        <div class="g-recaptcha" data-sitekey="6LeMTNYUAAAAAFhppLL9ql0QXrSY1NO_RuR_3l03" data-size="normal"></div>
                                    </div>
                                    <div class="col-4" style="text-align: right">
                                        <input type="submit" class="btn btn-primary float-right" value="Envoyer"/><br/>
                                    </div>
                                </div>
                                {{ form_end(form) }}
                                <br/>
                            </div>
                        </div>
                        <hr/>
                    </div>
                    {% include 'front/_footer_nav.html.twig' %}
                </div>
        </main>
    </div>
{% endblock %}