{% extends "porto-corporate-layout.html.twig" %}

{% block pageheader %}
    {{ parent() }}
    {{ encore_entry_link_tags('mot-de-passe-oublie-style') }}
{% endblock %}

{% block container_class %} container py-2 {% endblock %}

{% block signinform %} {% endblock %}

{% block pagecontent %}

    <div class="row">
        <div class="col-md-12">
            {% for flashMessage in app.session.flashbag.get('error') %}
                <div class="alert alert-danger alert-dismissible" >
                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                    {{ flashMessage|trans }}
                </div>
            {% endfor %}
            {% for flashMessage in app.session.flashbag.get('notice') %}
                <div class="alert alert-success alert-dismissible" >
                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                    {{ flashMessage|trans }}
                </div>
            {% endfor %}
        </div>
    </div>

    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header py-1 color-client" data-card-body-id="card-body-maj-fret">
                    <h4 class="float-start">{{'Mot de passe oublié'|trans}}</h4>
                </div>
                <div class="card-body card-body-integration" id="card-body-maj-fret">

                    {{ form_start(motDePasseOublieForm, {'attr': {'role': 'form', 'id': 'motDePasseOublieForm', 'novalidate':'novalidate'}}) }}

                        {{ form_errors(motDePasseOublieForm) }}

                        <div class="form-group row mb-0">
                            <label class="col-lg-3 font-weight-bold text-dark col-form-label form-control-label text-2">{{ form_label(motDePasseOublieForm.email) }}</label>
                            <div class="col-lg-9">{{ form_widget(motDePasseOublieForm.email) }}</div>
                        </div>

                        <div class="form-group form-group-error row mb-2 pl-3" id="form-group-error-email">
                            {{ form_errors(motDePasseOublieForm.email) }}
                        </div>

                        <div class="form-group row row-button">
                            <div class="col-lg-12">
                                <button
                                    type="button"
                                    onClick="checkMotDePasseOublieForm(this);"
                                    id="authentification_valider"
                                    class="btn btn-client-primary-inverse pl-5 pr-5"
                                >
                                    Valider
                                </button>
                            </div>
                        </div>

                        <div class="row mt-4">
                            <div class="col-lg-12 font-italic color-777 text-2">
                                <p class="lh-20">
                                {{'Une seule demande de réinitialisation de mot de passe peut être effectuée par 24h. En cas de problème n\'hésitez pas à vous rapprocher de nos services.'|trans}}
                                </p>
                            </div>
                        </div>

                    {{ form_end(motDePasseOublieForm) }}
                </div>
            </div>
        </div>
    </div>

{% endblock %}

{% block javascript %}

    {{ parent() }}

    {{ encore_entry_script_tags('mot-de-passe-oublie-script') }}

    <script>

        $(document).ready(function() {
            $("#mot_de_passe_oublie_email").focus();
        });

    </script>

{% endblock %}