{% extends "base.html" %}

{% block title %}Cambiar Contraseña{% endblock %}

{% block content %}
<div class="container vh-100 d-flex justify-content-center align-items-center">
    <div class="col-11 col-md-8 col-lg-5 border rounded p-3 shadow-sm">
        <h4 class="text-muted fw-semibold text-start mb-3">Cambiar Contraseña</h4>
        <h6 class="text-muted text-start mb-4">{{ email }}</h6>

        <form action="{{ url_for('change_password', company_short_name=company_short_name, token=token) }}" method="post">
            <div class="mb-3">
                <label for="temp_code" class="form-label text-muted">Código Temporal recibido</label>
                <input type="text" name="temp_code" id="temp_code"
                       class="form-control text-muted" required
                       autocomplete="off"
                       value="{{ form_data.temp_code if form_data else '' }}">
            </div>
            <div class="mb-3">
                <label for="new_password" class="form-label text-muted">Nueva Contraseña</label>
                <input type="password" name="new_password" id="new_password"
                       class="form-control text-muted" required
                       value="{{ form_data.new_password if form_data else '' }}">
                <small class="form-text text-muted">
                        La contraseña debe contener al menos 8 caracteres, una letra mayúscula, una letra minúscula, un número y un carácter especial.
                </small>

            </div>
            <div class="mb-3">
                <label for="confirm_password" class="form-label text-muted">Confirmar Nueva Contraseña</label>
                <input type="password" name="confirm_password" id="confirm_password"
                       class="form-control text-muted" required
                       value="{{ form_data.password if form_data else '' }}">
            </div>
            <button type="submit" class="btn btn-primary w-100">Cambiar Contraseña</button>

            <p class="text-muted text-start mt-3" style="text-align: justify;">
                    Ingresa el código de seguridad que recibiste por correo y elige una nueva contraseña.
                    Asegúrate de que sea segura y fácil de recordar.
            </p>

        </form>
    </div>
</div>
{% endblock %}