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

{% block title %}Reset{% endblock %}

{% block body %}

    <div class="col-12 col-md-4 peer pX-40 pY-30 h-100 bgc-white scrollable pos-r" style="min-width:420px">

        <h3 class="h3 mb-3 font-weight-normal text-center">Recuperar Contraseña</h3>

        {{ form_start(resetForm) }}
        {{ form_row(resetForm.name) }}
        {{ form_row(resetForm.ruc) }}

        <div class="form-group">
            {{ form_label(resetForm.plainPassword.first) }}
            {{ form_widget(resetForm.plainPassword.first, {'label_attr': {'class': 'control-label'}}) }}
            <span id="password-field" class="fa fa-eye-slash field-icon" style="font-size: 20px;"></span>
        </div>

        <div class="form-group">
            {{ form_label(resetForm.plainPassword.second) }}
            {{ form_widget(resetForm.plainPassword.second, {'label_attr': {'class': 'control-label'}}) }}
            <span id="password-field1" class="fa fa-eye-slash field-icon" style="font-size: 20px;"></span>
        </div>
        <div class="form-group">
            <div class="d-flex justify-content-between align-items-center">
                <button class="btn btn-primary">Cambiar Password</button>
                &nbsp;&nbsp;&nbsp;&nbsp;<a href="{{ path('app_login') }}" class="btn btn-info">Cancelar</a>
            </div>
        </div>
        {{ form_end(resetForm) }}
    </div>
    <script src=" {{ asset("core/vendor/jquery-2.2.3.min.js") }}"></script>
    <script>

        $(document).ready(function () {
            var input = $("#change_password_form_plainPassword_first");
            input.attr("type", "password");

            var input2 = $("#change_password_form_plainPassword_second");
            input2.attr("type", "password");

            $("#password-field").click(function () {
                $(this).toggleClass("fa-eye fa-eye-slash");
                var input = $("#change_password_form_plainPassword_first");
                if (input.attr("type") === "password") {
                    input.attr("type", "text");
                } else {
                    input.attr("type", "password");
                }


            });
            $("#password-field1").click(function () {
                $(this).toggleClass("fa-eye fa-eye-slash");
                var input = $("#change_password_form_plainPassword_second");
                if (input.attr("type") === "password") {
                    input.attr("type", "text");
                } else {
                    input.attr("type", "password");
                }


            });

        });

    </script>
{% endblock %}