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

{% block title %}Mot de passe oublié{% endblock %}

{% block stylesheets %}
<style>
    div.reset-flex{
        width: 100%;
        display: flex;
        justify-content: center;
        height: max-content;
        margin: 3em 0;
    }
    div.card{
        margin-top: -25%;
        margin-bottom: 60px;
    }
    div.reset-loader{
        position: absolute;
        display: none;
        text-align: center;
        top:0;
        left:0;
        right:0;
        bottom:0;
        background: #ccc;
        opacity: 0.5;
    }
</style>
{% endblock %}

{% block body %}
<div class="reset-flex">
    <div class="col-md-4 reset-ctn">
        <div class="card bg-light">
            <div class="card-header">
                 <h4 class="card-title">
                    Réinitialiser le mot de passe
                </h4>
            </div>
            <div class="card-body">
                <div class="reset-loader">
                    <svg class="loader-spinner" viewBox="0 0 50 50"><circle class="path" cx="25" cy="25" r="20" fill="none" stroke-width="5"></circle></svg>
                </div>
                <form class="reset-form" method="post">
                    <label for="inputEmail">Votre Email</label>
                    <input type="email" value="" name="email" id="resetInputEmail" class="form-control" required autofocus>
                    <input type="hidden" name="reset-recaptcha_response" id="reset-recaptchaResponse">

                    <button class="btn btn-lg btn-success btn-block btn-sm mt-2" type="submit">
                        Valider
                    </button>
                </form>
            </div>
            <div class="card-footer">
                Ou <a href="{{path('admin_account_login')}}">se connecter ?</a>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block javascripts %}
    <script src="/js/ajaxTricks.js"></script>
    <script src="/particles/particles.min.js"></script>
{% endblock %}