{% extends 'base_structure/layout/base_authentication_template.html' %}
{% load i18n static %}
{% block content %}

<div class="card mt-3 mb-3">
    <div class="card-header">
        <h3 class="text-center font-weight-light my-4">Password Reset Confirm</h3>
        {% include 'base_structure/elements/message.html' %}
    </div>
    <div class="card-body">
        {% if validlink %}
        <form method="post" id="changePasswordForm">
            {% csrf_token %}
            <div class="form-group">
                <input type="hidden" class="form-control" id="id_username" name="username"
                    value="{{ form.user.get_username }}" autocomplete="username">
            </div>
            <div class="form-group">
                <label for="id_new_password1">{% translate 'New password:' %}</label>
                <input type="password" class="form-control" id="id_new_password1" name="new_password1">
                {{ form.new_password1.errors }}
            </div>
            <div class="form-group">
                <label for="id_new_password2">{% translate 'Confirm password:' %}</label>
                <input type="password" class="form-control" id="id_new_password2" name="new_password2">
                {{ form.new_password2.errors }}
            </div>
            <button type="submit" class="btn btn-primary mt-4">{% translate 'Change my password' %}</button>
        </form>
        {% else %}

        <p>{% translate "The password reset link was invalid, possibly because it has already been used.  Please request a new password reset." %}
        </p>

        {% endif %}
    </div>
</div>

{% endblock content%}

{% block javascript %}
<!-- include required js cdn link through html here -->
<script>
    $(document).ready(function() {
        $('#changePasswordForm').validate({
            rules: {
                new_password1: {
                    required: true,
                    // Add custom method for password complexity
                    complexPassword: true
                },
                new_password2: {
                    required: true,
                    equalTo: '#id_new_password1'
                }
            },
            messages: {
                new_password1: {
                    required: "Please enter a new password."
                },
                new_password2: {
                    required: "Please confirm your new password.",
                    equalTo: "Passwords do not match."
                }
            },
            errorElement: 'div',
            errorPlacement: function(error, element) {
                error.addClass('invalid-feedback');
                element.closest('.form-group').append(error);
            },
            highlight: function(element, errorClass, validClass) {
                $(element).addClass('is-invalid').removeClass('is-valid');
            },
            unhighlight: function(element, errorClass, validClass) {
                $(element).removeClass('is-invalid').addClass('is-valid');
            }
        });
    
        // Add custom validation method for password complexity
        $.validator.addMethod("complexPassword", function(value, element) {
            return /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[!@#$%^&*()_+}{":;'?/>.<,])(?=.*[^\w\d\s])/.test(value);
        }, "Password must include at least one uppercase letter, one lowercase letter, one number, and special characters.");
    
    });
    </script>
    

{% endblock %}