{% extends "Includes/layout.html.twig" %}

    {% set header = 'no' %}
    {% set aside = 'no' %}

{% block body %}
    <div class="col-md-12 d-none">
        <h2 class="taglione col-12 text-primary text-center w-75 mx-auto">
            {{ 'Programmatic Recruitement'|trans }} <br>
            {{ 'Solution'|trans }}
        </h2>
    </div>
    
    <div id="new-password-page">
        <div id="login-page pt-5">
            <div class="container-fluid px-0 pt-5">
                <div class="login recover-password-form mx-auto container position-relative pt-5 pb-5" style="z-index: 2; max-width: 650px;">
                    <span class="small-loader" id="loader-login"></span>
                    
                    {% if error is defined %}
                        <div class="alert alert-danger">{{ error|trans }}</div>
                    {% endif %}
                    
                    <div class="shadow-1 d-block mt-5 py-5 px-5 bg-white rounded-2 z-in">
                        <div class="logo pb-4">
                            <img src="{{ asset('Dashboard/img/goldenlogolight.png') }}" height="96px"
                                 alt="goldenbees logo" class="img-fluid m-auto"/>
                        </div>
                        
                        <div class="title mx-0 text-center pb-4">
                            {{ 'Recover Password'|trans }}
                        </div>
                        
                        <div class="form">
                            <form method="post" class="form-signin py-3">
                                <input type="hidden" name="_csrf_token" value="{{ csrf_token('authenticate') }}"/>
                                
                                <div class="form-label-group position-relative input-login">
                                    <label for="password" class="none labelInput"> {{ 'New Password'|trans }}</label>
                                    <input type="password" id="inputPassword" name="_password" class="form-control"
                                           placeholder="{{ 'New Password'|trans }}" minlength="8" required>
                                    <i class="fal fa-lock-alt cursor-pointer span-icon p-0 remove-password-protect"
                                       id="remove-password-protect"></i>
                                </div>
                                
                                <div class="password-contains pt-4 d-none" id="password-contains">
                                    <span>{{ 'Your password must contains :'|trans }}</span>
                                    <ul class="list-unstyled mt-3">
                                        <li class="" style="color: rgba(0, 0, 0, 0.5);"
                                            id="charLength">{{ 'At least 8 characters'|trans }} <i
                                            class="fa fa-check-circle text-success ml-4 position-relative d-none"></i>
                                        </li>
                                        <li class="" style="color: rgba(0, 0, 0, 0.5);"
                                            id="lowercase">{{ '1 lower letter'|trans }} <i
                                            class="fa fa-check-circle text-success ml-4 position-relative d-none"></i>
                                        </li>
                                        <li class="" style="color: rgba(0, 0, 0, 0.5);"
                                            id="uppercase">{{ '1 upper letter'|trans }} <i
                                            class="fa fa-check-circle text-success ml-4 position-relative d-none"></i>
                                        </li>
                                        <li class="" style="color: rgba(0, 0, 0, 0.5);"
                                            id="special">{{ '1 number or 1 special character'|trans }} <i
                                            class="fa fa-check-circle text-success ml-4 position-relative d-none"></i>
                                        </li>
                                    </ul>
                                </div>
                                
                                <div class="form-label-group position-relative input-login">
                                    <label for="confirmPassword"
                                           class="none labelInput">{{ 'Confirm new password'|trans }}</label>
                                    <input type="password" id="confirmPassword" name="_confirmPassword"
                                           class="form-control" placeholder="{{ 'Confirm new password'|trans }}"
                                           style="height: calc(1.5em + 1.7rem + 2px) !important;" required>
                                    <i class="fal fa-lock-alt cursor-pointer span-icon p-0" id="remove-confirm-password-protect"></i>
                                </div>
                                
                                <div class="col-12 pl-0 mt-2">
                                    <span id='message'></span>
                                    <i id="icon-match" class="ml-4 position-relative"></i>
                                </div>
                                
                                <div class="mt-5 d-flex justify-content-center">
                                    <button id="_submit" name="_submit"
                                            class="btn btn-primary btn-login rounded-30 px-5" type="submit">
                                        {{ 'Confirm new password'|trans }}
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
                <footer class="footer">&copy;Golden Bees 2021 <a href="{{ path('cgu_wan2bee') }}">Terms of Service</a></footer>
            </div>
        </div>
    </div>
{% endblock %}

 {% block specificJS %}
     {{ encore_entry_script_tags('user-new-password-recover') }}
 {% endblock %}