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

{% block title "Réinitialiser mot de passe" %}
    {% block stylesheets %}{% endblock %}
    {% block body %}
        <div class="container">
            <div class="row">
                <div class="col-lg-4 col-lg-offset-4 padd-t-lg" >
                    <h3 class="text-center">Umalis - Système de gestion des présences</h3>
                    <div>
                        <img class="img-thumbnail" src="{{ asset('frontEnd/assets/images/logoSite.jpg') }}" style="margin: 0 auto;height: 200px;object-fit: contain;object-position: 50% 50%!important;" width="100%">
                    </div>
                    <p class="text-center">Veuillez entrer le Nouveau mot de passe :</p>
                    <hr class="clean">
                    <form role="form" action="{{ path('reset_password',{'token': app.request.get('token') }) }}" method="post">
                        <div class="form-group input-group">
                            <span class="input-group-addon"><i class="fa fa-key"></i></span>
                            <input type="password" id="password" class="form-control"  placeholder="Mot de passe" name="password" required>
                        </div>
                        <div class="form-group input-group">
                            <span class="input-group-addon"><i class="fa fa-key"></i></span>
                            <input type="password" id="confirm_password" class="form-control"  placeholder="Saisir à nouveau" name="confirm_password" required>
                        </div>
                        <button type="submit" class="btn btn-purple btn-block">Valider</button>
                    </form>
                    <hr>
                </div>
            </div>
        </div>
    {% endblock %}
{% block javascripts %}
    <script>
        var password = document.getElementById("password")
                , confirm_password = document.getElementById("confirm_password");

        function validatePassword(){
            if(password.value != confirm_password.value) {
                confirm_password.setCustomValidity("Les mots de passe ne se correspondent pas");
            } else {
                confirm_password.setCustomValidity('');
            }
        }

        password.onchange = validatePassword;
        confirm_password.onkeyup = validatePassword;
    </script>
{% endblock %}