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

{% block localstyle %}
.wrap {
     height: 130px;
     position: relative;
     margin: 5px;
}
h2.centre-line {
     text-align: center;
     position: absolute;
     top: 50%;
     left: 50%;
     width: 100%;
     transform: translate(-50%, -50%);
}
h2.centre-line:before {
     content: "";
     position: absolute;
     width: 100%;
     height: 1px;
     top: 50%;
     left: 0;
     z-index: -1;
     background: gray;
}
h2.centre-line span {
     padding: 1rem;
     display: inline-block;
     background: white;
}
{% endblock %}

{% block body %}
{{ form_start(form) }}
    <div class="container text-center" style="max-width:500px";>
        <h2 class="text-center mt-5">Ninesurvey</h2>
        {{ survey.title }}

        <br><br>

        {% if app.session.flashbag.has('error') %}
            <div class='alert alert-danger' style='margin: 5px 0px'>
                <strong>Erreur</strong><br>
                {% for flashMessage in app.session.flashbag.get('error') %}
                    {{ flashMessage|raw }}<br>
                {% endfor %}
            </div>
        {% endif %}

        {% if app.session.flashbag.has('notice') %}
            <div class='alert alert-info' style='margin: 5px 0px'>
                <strong>Information</strong><br>
                {% for flashMessage in app.session.flashbag.get('notice') %}
                    {{ flashMessage|raw }}<br>
                {% endfor %}
            </div>
        {% endif %}

        Avant de pouvoir répondre au sondage.<br>
        Merci<br><br>

        d'utiliser votre compte<br>
        <a href="{{ path("app_survey_byloginkey",{'key':key}) }}" class="btn btn-success">Connexion</a>

        <div class="wrap"><h2 class="centre-line"><span>OU</span></h2></div>

        de compléter les inforamtions suivantes
        {{ form_row(form.email) }}
        {{ form_row(form.displayname) }}
        {{ form_widget(form.submit) }} 


    </div>
{{ form_end(form) }}
{% endblock %}

{% block localjavascript %}
    $(document).ready(function() {
        $("#command").focus();
    });
{% endblock %}