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

{% block classBody %}class="subscribe"{% endblock %}

{% block body %}

    <!-- MAIN CONTENT-->
    <div id="inscription" class="z-0">

        <div class="container-fluid">

            <div id="inscription-contenu" class="row p-96">
                <!-- BLOC INTRO-->
                <div id="inscription-intro" class="col-sm-12 col-md-4 ptb-0 pr-48 pl-0">
                    <div class="bloc-base">
                        <div class="bloc-title">
                            <h1 class="inscription mb-16">Je crée mon compte</h1>
                            <h2 class="inscription mb-24">Abonnement aux téléservices de l’Agence de l’Eau
                                Artois-Picardie</h2>

                            <p class="font-color-white font-bold">Besoin d’aide ?</p>
                            <p class="font-color-white mb-16"><a class="font-color-white" href="{{ $this->getParameter('docExplorer') }}">Procédure d'utilisation et personne à contacter</a></p>

                            <p class="font-color-white font-bold">Page de connexion</p>
 
                            <p class="font-color-white"><a class="font-color-white" href="{{ path('security_login') }}">Revenir sur la page de connexion</a></p>
                        </div>
                    </div>
                </div>

                <!-- BLOC FORM-->
                <div id="inscription-form" class="col-sm-12 col-md-8 p-48 background-white">

                    <div class="bloc-base ptb-48">

                        {% if errors|length > 1 %}
                            <div class="alert alert-danger">
                                Erreurs :
                                <ul>
                                    {% for flashMessage in errors %}
                                        <li>{{ flashMessage }}</li>
                                    {% endfor %}
                                </ul>
                            </div>
                        {% else %}
                            {% for flashMessage in errors %}
                                <div class="alert alert-danger">
                                    Erreur :  {{ flashMessage }}
                                </div>
                            {% endfor %}
                        {% endif %}

                        <h1 class="primary-blue mb-8">Réinitialisation du mot de passe</h1>
                        <p class="mb-48">Veuillez renseigner votre nouveau mot de passe.</p>
                        <div class="row">
                            <div class="col-lg-5">
                                {{ form_start(form) }}
                                    <div class="form-group mb-16">
                                        {{ form_label(form.new) }}
                                        {{ form_widget(form.new, { 'attr': { 'class': 'inscription plr-16' }}) }}
                                        {{ form_errors(form.new) }}
                                        <p class="help-block">Minimum 8 caractères, une majuscule, une minuscule et un chiffre.</p>
                                    </div>
                                    <div class="form-group mb-24">
                                        {{ form_label(form.confirmation) }}
                                        {{ form_widget(form.confirmation, { 'attr': { 'class': 'inscription plr-16' }}) }}
                                        {{ form_errors(form.confirmation) }}
                                    </div>
                                <a href="{{ path('security_login') }}" class="button-square-prev">Retour</a>
                                <button class="button-square">Envoyer</button>
                                {{ form_end(form) }}
                            </div>
                        </div>
                    </div>

                </div>
            </div>

        </div>

    </div>

{% endblock %}

{% block javascript_inline %}
    <script src="{{ asset('js/init-formwizard.js') }}"></script>
    <script src="{{ asset('js/Security/Subscribe.js') }}"></script>
{% endblock %}

