{% extends "helpdesk/base.html" %}

{% load i18n static %}

{% block helpdesk_title %}
  {% translate "Change password" %}
{% endblock helpdesk_title %}

{% block body %}
  <div class="container-fluid">
    <div class="row align-items-center vh-100">
      <div class="col-12 col-md-6 col-lg-3 mx-auto">
        <div class="text-center mb-4">
          <img src="{% static "helpdesk/img/icon.svg" %}" alt="Django helpdesk logo" width="48" height="48" />
        </div>
        <div class="card">
          <div class="card-body m-3">
            <h5 class="text-center py-3">{% translate "Change Password" %}</h5>
            <form method="post">
              {% csrf_token %}
              <div>
                {% if form.errors %}
                  <p class="errornote">
                    {% if form.errors.items|length == 1 %}
                      {% translate "Please correct the error below." %}
                    {% else %}
                      {% translate "Please correct the errors below." %}
                    {% endif %}
                  </p>
                {% endif %}
                <p class="text-body-secondary">{% translate "Please enter your old password and new password (twice) to reset it." %}</p>
                {% for field in form.visible_fields %}
                  <div class="mb-3">
                    <span class="text-danger">{{ field.errors }}</span>
                    <label class="form-label" for="{{ field.auto_id }}">{{ field.label }}</label>
                    {{ field }}
                    <div class="form-hint" id="{{ field.auto_id }}_helptext">
                      <small>{{ field.help_text|safe }}</small>
                    </div>
                  </div>
                {% endfor %}
                <div class="d-grid gap-3 py-3">
                  <button type="submit" class="btn btn-primary">{% translate "Change my password" %}</button>
                  <a href="{% url 'helpdesk:home' %}" class="btn btn-link">{% translate "Take me back" %}</a>
                </div>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
{% endblock body %}

{% block helpdesk_js %}
  <script>
    const add_form_classes = () => {
      const oldPassword = document.querySelector('#id_old_password');
      const password1 = document.querySelector('#id_new_password1');
      const password2 = document.querySelector('#id_new_password2');

      oldPassword.classList.add('form-control');
      password1.classList.add('form-control');
      password2.classList.add('form-control');
    }
    document.addEventListener("DOMContentLoaded", add_form_classes);
  </script>
{% endblock helpdesk_js %}