<!DOCTYPE html>
<html lang="es">

<head>
    <%- include('./head'); %>
</head>

<body class="bg-gradient-primary">

    <div class="container">

        <!-- Outer Row -->
        <div class="row justify-content-center">

            <div class="col-xl-10 col-lg-12 col-md-9">

                <div class="card o-hidden border-0 shadow-lg my-5">
                    <div class="card-body p-0">
                        <!-- Nested Row within Card Body -->
                        <div class="p-5">
                            <div class="text-center">
                                <h1 class="h4 text-gray-900 mb-2"> Cambia tú Contraseña</h1>
                                <p class="mb-4">¡Hola <%= user.nombre %>!, ingresa tus datos a continuación</p>
                            </div>
                            <form onsubmit="formChangePassUserOne(event)" method="POST"
                                action="/Tools/changePassword/<%= user._id %>">

                                <div class="form-group row">
                                    <div class="col-sm-6">
                                        <label class="mr-sm-2" for="user">Identificación</label>
                                        <input type="number" class="form-control form-control-user" id="user"
                                            name="user" value="<%= user.user %>" readonly />
                                    </div>
                                    <div class="col-sm-6">
                                        <label class="mr-sm-2" for="actPass">Contraseña Actual</label>
                                        <input type="password" class="form-control form-control-user" id="actPass"
                                            name="actPass" placeholder="Escribe la Contraseña Actual" />
                                    </div>
                                </div>

                                <div class="form-group row">
                                    <div class="col-sm-6">
                                        <label class="mr-sm-2" for="pass">Contraseña
                                            Nueva</label>
                                        <input type="password" class="form-control form-control-user" id="pass"
                                            name="pass" placeholder="Contraseña" minlength="4" maxlength="12" />
                                    </div>
                                    <div class="col-sm-6">
                                        <label class="mr-sm-2" for="repass">Repite la
                                            Contraseña</label>
                                        <input type="password" class="form-control form-control-user" id="repass"
                                            name="repass" placeholder="Repite la Contraseña" minlength="4"
                                            maxlength="12" />
                                    </div>
                                </div>

                                <button class="btn btn-primary btn-user btn-block" type="submit">
                                    Actualizar
                                </button>
                                <a href="/" class="btn btn-secondary btn-user btn-block" type="button">
                                    Cancelar
                                </a>
                            </form>
                        </div>
                    </div>
                </div>

            </div>

        </div>

    </div>

    <!-- Bootstrap core JavaScript-->
    <script src="/vendor/jquery/jquery.min.js"></script>
    <script src="/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
    <!-- Core plugin JavaScript-->
    <script src="/vendor/jquery-easing/jquery.easing.min.js"></script>
    <!-- Custom scripts for all pages-->
    <script src="/js/sb-admin-2.min.js"></script>

    <!-- Validations -->
    <script type="text/JavaScript" src="/js/tools/changePass.js"></script>

    <!-- Alert -->
    <script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>

    <% if(typeof alert !="undefined" ) { %>
        <script type="text/JavaScript">
            Swal.fire({
            title: '<%= alert[0].alertTitle %>',
            text:'<%= alert[0].alertMessage %>',
            icon:'<%= alert[0].alertIcon %>',
            showConfirmButton: <%= alert[0].showConfirmButton %>,
            timer: <%= alert[0].timer %>
            }).then(()=>{
            window.location = '/<%= alert[0].ruta %>'
            })
        </script>
        <% } %>
</body>

</html>