{% extends 'base.html.twig' %}
{% block title %}Recover Password | Novamar Insurance Mexico{% endblock %}
{% block css %}
    {{encore_entry_link_tags('recoveryPwdCSS')}}
    {{encore_entry_link_tags('swal2CSS')}}
{% endblock %}
{% block body %}
<main class="container-all d-flex justify-content-center align-items-center">
    <div class="content-recovery">
            <div class="header-recovery d-flex justify-content-center align-items-center">
                <div class="line-orange"></div>
                <div class="recovery-logo-novamar d-flex justify-content-center align-items-center"><img src="{{asset('img/banner/novasun-logo.png')}}" alt="novamar logo" class="img-fluid"></div>
                <div class="line-orange"></div>
            </div>
            {% if token != "" %}
                <div class="col-l2 text-center"><h3 class="m-3">Change your password</h3></div>
                {% else %}
                <div class="col-l2 text-center"><h3 class="m-3">Token Expired</h3></div>
            {% endif %}
            <div class="content-form container-fluid">
                {% if token != "" %}
                    <form id="form_recover_password" >
                        <input type="hidden" value="recoverPassword" name="option">
                        <input type="hidden" value="{{token}}" name="recovery_token" id="recovery_token">
                        <div class="form-group row">
                            <div class="form-items col-lg-12 col-md-12 col-sm-12">
                                <label for="new_password">New password</label>
                                <input type="password" class="form-control" name="new_password" id="new_password" placeholder="Your new password">
                            </div>
                            <div class="password-item">
                                <span><i class="fas fa-eye pr-4 " id="new-password-item-recovery"></i></span>
                            </div>
                        </div>
                        <div class="form-group row">
                            <div class="form-items col-lg-12 col-md-12 col-sm-12">
                                <label for="confirm_new_password">Confirm your new password</label>
                                <input type="password" class="form-control" name="confirm_new_password" id="confirm_new_password" placeholder="Confirm password">
                            </div>
                            <div class="password-item">
                                <span><i class="fas fa-eye pr-4 " id="confirm-new-password-item-recovery"></i></span>                                
                            </div>
                        </div>
                        
                        <div class="btn-form-section p-0 col-lg-12 mt-4 mb-4">
                            <button type="button" id="recovery" name="reset_password_button" onclick="validFormRecoverPassword()">Reset password</button>
                        </div>
                        {% if option == 'recoverPassword' %}
                            <div class="form-group">
                                <div class="alert alert-warning mt-4 d-none">
                                   <span class="alert-recover"></span>
                                </div>
                            </div>
                        {% endif %}
                    </form>
                {% else %}
                    <div class="invalid-token-content col-12 text-center">
                        <h5>Your token is expired, please go back to <a href="/login">login</a> view and request another one</h5>
                    </div>
                {% endif %}
            </div>
       </div> 
</main>
{% endblock %}
{% block scripts %}
    {{script_tag('libraries/jquery-validate.js') }}
    {{script_tag("components/tools.js")}}
    {{script_tag("libraries/sweet-alert.js")}}
    {{script_tag("pages/recovery.js")}}
{% endblock %}