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

{% block title %}Contact{% endblock %}

{% block body %}

<section class="hero-wrap hero-wrap-2" style="background-image: url('{{ asset('img/bg_3.jpg') }}');" data-stellar-background-ratio="0.5">
    <div class="overlay"></div>
    <div class="container">
        <div class="row no-gutters slider-text align-items-center justify-content-center">
            <div class="col-md-9 ftco-animate text-center">
                <h1 class="mb-2 bread">Contact</h1>
                <p class="breadcrumbs"><span class="mr-2"><a href="index.html">Accueil <i class="ion-ios-arrow-forward"></i></a></span> <span>Contact <i class="ion-ios-arrow-forward"></i></span></p>
            </div>
        </div>
    </div>
</section>

<br><br>    
<div class="site-section">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <h2 class="h3 mb-5 text-black" style="text-align: center; font-size: 40px; color: #007bff;">Contactez-Nous</h2>
            </div>
            <div class="col-md-12">
                {# affichage des messages flash: #}
                {% for message in app.flashes('noticeReCaptcha') %}
                    <p class="alert alert-danger">{{ message }}</p>
                {% endfor %}
                {% for message in app.flashes('noticeContact') %}
                    <p class="alert alert-success">{{ message }}</p>
                {% endfor %}

                {{ form_start(form, { attr: { novalidate: 'novalidate', id: 'contactForm' } }) }}

                <div class="p-3 p-lg-5 border" style="background-color: rgba(0,123,255,0.1)";>
                    <div class="form-group row">
                        <div class="col-md-6">
                            {{ form_label(form.name, 'Nom* : ', { 'label_attr' : {'class' : 'text-black'} }) }}
                            {{ form_widget(form.name, {'attr': {class: 'form-control'}}) }}
                        </div>
                        <div class="col-md-6">
                            {{ form_label(form.firstName, 'Prénom* : ', { 'label_attr' : {'class' : 'text-black'} }) }}
                            {{ form_widget(form.firstName, {'attr': {class: 'form-control'}}) }}
                        </div>
                    </div>
                    <div class="form-group row">
                        <div class="col-md-12">
                            {{ form_label(form.email, 'Email* : ', { 'label_attr' : {'class' : 'text-black'} }) }}
                            {{ form_widget(form.email, {'attr': {class: 'form-control'}}) }}
                        </div>
                    </div>
                    <div class="form-group row">
                        <div class="col-md-12">
                            {{ form_label(form.subject, 'Sujet* : ', { 'label_attr' : {'class' : 'text-black'} }) }}
                            {{ form_widget(form.subject, {'attr': {class: 'form-control'}}) }}
                        </div>
                    </div>
                    <div class="form-group row">
                        <div class="col-md-12">
                            {{ form_label(form.message, 'Message* : ', { 'label_attr' : {'class' : 'text-black'} }) }}
                            {{ form_widget(form.message, {'attr' : {class: 'form-control', 'cols': '30', 'rows' : '7'}}) }}
                        </div>
                    </div>
                    <br>
                    <br>
                    <div class="form-group row">
                        <div class="col-lg-12">
                            <button class="g-recaptcha btn btn-primary btn-lg btn-block"
                                    data-sitekey="{{ google_recaptcha_site_key }}" 
                                    data-callback='onSubmit' 
                                    data-action='submit'>Envoyer</button>
                        </div>
                    </div>
                </div>
                {{ form_end(form) }}
            </div>
        </div>
    </div>
</div>
<br><br><br>


{% endblock %}

{% block javascripts %}
    <script src="https://www.google.com/recaptcha/api.js" async defer></script>
    <script>
        function onSubmit(token) {
            document.getElementById("contactForm").submit();
        }
    </script>
{% endblock %}