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

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

{% block title %}{% trans 'Login page' %}{% 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/user.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="#"><img src="{% static 'images/logo-dark.svg' %}" alt="img" /></a>
                </div>
                <h4 class="text-center f-w-500 mt-4 mb-3">{% trans 'Registration' %}</h4>
                <form action="{% url 'registration' %}" method="post">
                  {% crispy form %}
                </form>
                <div class="d-flex justify-content-between align-items-end mt-4">
                  <h6 class="f-w-500 mb-0">{% trans 'Already have an Account' %}?</h6>
                  <a href="{% url 'login' %}" class="link-primary">{% trans 'login' %}</a>
                </div>
              </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('');
          }
        }
        password.onchange = validatePassword;
        confirm_password.onkeyup = validatePassword;
      }
    });


  </script>

{% endblock content %}