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

{% block title %}Log in!{% endblock %}

{% block body %}

    <div id="loader">
        <div class="loader">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
    </div>
    <div id="resetPwd" class="container-fluid Page">
    {% for message in app.flashes('success') %}
            <div class="alert alert-success position-absolute" style="width: 100% !important; z-index: 3000">
                {{ message }}
            </div>
        {% endfor %}
        {% for message in app.flashes('warning') %}
            <div class="alert alert-warning position-absolute" style="width: 100% !important; z-index: 3000">
                {{ message }}
            </div>
        {% endfor %}
        <h3 class="w-100 text-center font-size-large black pt-5 pb-5">Réinitialisation du mot de passe</h3>
        <div class="mr-auto ml-auto w-auto">
            <form method="post">
                <div class="content-body"><!-- login page start -->
                    <section id="auth-login" class="row flexbox-container">
                        <div class="col-lg-4 col-md-6 col-sm-12 ml-auto mr-auto">
                            <div class="card bg-authentication mb-0">
                                <div class="row m-0">
                                    <!-- left section-forgot password -->
                                    <div class="col-md-12 col-12 px-0">
                                        <div class="card disable-rounded-right mb-0 p-2">
                                            <div class="card-header pb-1">
                                                <div class="card-title">
                                                    <h4 class="text-center mb-2">Syma'Nagement</h4>
                                                </div>
                                            </div>
                                            <div class="card-content">
                                                <div class="card-body">
                                                    <div class="text-muted mb-2 font-size-large">
                                                        <small>Merci de saisir ou vérifier l'adresse mail / identifiant
                                                            saisi
                                                            ci-dessous :
                                                        </small>
                                                    </div>
                                                    <form class="mb-2"
                                                          action="{{ path('app_forgot_password_request') }}"
                                                          method="post" novalidate>
                                                        <div class="form-group mb-2">
                                                            <label class="text-bold-600" for="inputMail">Email</label>
                                                            <input type="text" class="form-control" id="inputMail"
                                                                   name="inputMail" placeholder="Email" required>
                                                        </div>
                                                        <small class="mr-25"></small>
                                                        <a href="{{ path('app_login') }}">
                                                            <small>Retour à la page de connexion</small>
                                                        </a>
                                                        <div class="divider mb-2">
                                                            <div class="divider-text"></div>
                                                        </div>
                                                        <button type="submit"
                                                                class="btn btn-primary glow position-relative float-right">
                                                            Reinitialiser
                                                            <i id="icon-arrow" class="bx bx-right-arrow-alt"></i>
                                                        </button>
                                                    </form>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </section>
                    <!-- login page ends -->
                </div>
            </form>
        </div>
    </div>
{% endblock %}

{% block javascripts %}

    <script>

        /* Details */

        function displayOn()
        {
            document.getElementById("loader").style.display = "none";
            document.getElementById("resetPwd").style.display = "block";
        }

        $(document).ready(function () {
            displayOn();
        });
    </script>

{% endblock %}