{% extends "layout/clean_layout.html" %}

{% load i18n %}
{% load crispy_forms_tags %}

{% block title %}{% trans 'Reset password' %}{% endblock title %}

{% block content %}
  <div class="auth-main">
    <div class="auth-wrapper v4">
      <div class="auth-form">
        <div class="card my-5">
          <div class="row g-0">
            <div
              class="bg-brand-color-1 col-md-4 col-lg-6 d-none d-md-flex d-lg-flex align-items-center justify-content-center">
              <img src="{% static 'images/authentication/change_pass1.png' %}" alt="lock images" class="img-fluid" />
            </div>
            <div class="col-md-8 col-lg-6">
              <div class="card-body">
                <div class="text-center">
                  <a href="{% url 'index' %}"><img src="{% static 'images/logo-dark.svg' %}" alt="img" /></a>
                </div>
                <h4 class="text-center f-w-500 mt-4 mb-3">{% trans 'Reset password' %}</h4>
                <form action="{% url 'forgot_password' %}" method="post">
                  {% crispy form %}
                </form>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <script>

    document.addEventListener('DOMContentLoaded', function() {
  let password = document.getElementById("id_password1");
  let confirm_password = document.getElementById("id_password2");
  if (password && confirm_password) {
    function validatePassword() {
      if (password.value != confirm_password.value) {
        confirm_password.setCustomValidity('{% trans "Passwords Do not Match" %}');
        confirm_password.style.borderColor = 'red';
      } else {
        confirm_password.setCustomValidity('');
        confirm_password.style.borderColor = '';
      }
    }
    password.onchange = validatePassword;
    confirm_password.onkeyup = validatePassword;
    confirm_password.onchange = validatePassword;  // Added this line
  }
});


  </script>

{% endblock content %}