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

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

{% block stylesheets %}
<style>
    div.update-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="update-flex">
    <div class="col-md-4 update-ctn">
        <div class="card bg-light">
             <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>
            <div class="card-header">
                 <h4 class="card-title">
                    Nouveau mot de passe
                </h4>
            </div>
            <div class="card-body update-form">
                {{form_start(form) }}
                    <input type="hidden" name="update-recaptcha_response" id="update-recaptchaResponse">
                    <input type="hidden" name="update-token" id="update-token" value="{{app.request.requestUri|split('/')[2]}}">
                {{form_end(form)}}
            </div>
        </div>
    </div>
</div>
{% endblock %}


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