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

{% block title 'Contact | Mon Petit Plumeau'%}

{% block header %}
	{{ include ("include/_heading.html.twig") }}
{% endblock %}

{% block body %}
    <div class="page">
        <div class="container">

            {% for message in app.flashes('success') %}
            <div class="alert alert-success alert-dismissible fade show" role="alert">
                {{ message }}
                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            {% endfor %}
            {% for message in app.flashes('error') %}
            <div class="alert alert-danger alert-dismissible fade show" role="alert">
                {{ message }}
                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            {% endfor %}

            {% if not form.vars.valid %}
            <div class="alert alert-danger alert-dismissible fade show" role="alert">
                Le formulaire contient des erreurs. Merci de les corriger.
                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            {% endif %}

            <div class="content border b-4 py-4 px-4 rounded shadow bg-light">

            {{ form_start(form) }}
                <div class="row">
                    <div class="col">{{ form_row(form.firstname) }}</div>
                    <div class="col">{{ form_row(form.lastname) }}</div>
                </div>
                {{ form_rest(form) }}

                <hr class="my-3">

                <p for="lead">Pour éviter le spam, merci de répondre à cette question :</p>
                <div class="row mb-4 d-flex align-items-center">
                    <div class="col" id="contactSecurityImage">
                    </div>
                    <div class="col">
                        <label for="security">Quel est cet animal ?</label>
                        <div class="input-group">
                            <div class="input-group-prepend">
                                <span class="input-group-text" id="basic-addon1">Un</span>
                            </div>
                            <input type="text" class="form-control" placeholder="" name="security" id="security">
                        </div>
                    </div>
                </div>
                <div class="form-group text-center">
                    <button class="btn btn-outline-info">Envoyer</button>
                </div>
            {{ form_end(form) }}
                
            </div>
        </div>
    </div>
{% endblock %}