{% extends "basic/base_template.html" %} 
{% block pageName %} 
Change Password
{% endblock pageName %} 


{% block content %}
<!--begin::Form Validation-->
<div class="card card-info card-outline mb-4">
  <!--begin::Header-->
  <!--end::Header-->
  <!--begin::Form-->
  <form action="{% url 'change_password' %}" method="post" class="needs-validation" novalidate>
    {% csrf_token %}
    <!--begin::Body-->
    <div class="card-body">
      <!--begin::Row-->
      <div class="row g-3">
                
                <!--begin::Col-->
                <div class="col-md-6">
                    <label for="old_password" class="form-label">Old Password</label>
                    <input
                      type="text"
                      class="form-control"
                      id="old_password"
                      name="old_password"
                      required
                    />
                    <div class="invalid-feedback">Please provide a valid Password.</div>
                  </div>
                  <!--end::Col-->
                <!--begin::Col-->
                <div class="col-md-6">
                    <label for="new_password" class="form-label">New Password</label>
                    <input
                      type="text"
                      class="form-control"
                      id="new_password"
                      name="new_password"
                      required
                    />
                    <div class="invalid-feedback">Please provide a New Password.</div>
                  </div>
                  <!--end::Col-->
                <!--begin::Col-->
                <div class="col-md-6">
                    <label for="confirm_password" class="form-label">Confirm Password</label>
                    <input
                      type="text"
                      class="form-control"
                      id="confirm_password"
                      name="confirm_password"
                      required
                    />
                    <div class="invalid-feedback">Please provide a Confirm Password.</div>
                  </div>
                  <!--end::Col-->
      </div>
      <!--end::Row-->
    </div>
    <!--end::Body-->
    <!--begin::Footer-->
    <div class="card-footer">
      <button class="btn btn-primary" type="submit">Submit form</button>
    </div>
    <!--end::Footer-->
  </form>
  <!--end::Form-->
  <!--begin::JavaScript-->
  <script>
    // Example starter JavaScript for disabling form submissions if there are invalid fields
    (() => {
      "use strict";

      // Fetch all the forms we want to apply custom Bootstrap validation styles to
      const forms = document.querySelectorAll(".needs-validation");

      // Loop over them and prevent submission
      Array.from(forms).forEach((form) => {
        form.addEventListener(
          "submit",
          (event) => {
            if (!form.checkValidity()) {
              event.preventDefault();
              event.stopPropagation();
            }

            form.classList.add("was-validated");
          },
          false
        );
      });
    })();
  </script>
  <!--end::JavaScript-->
</div>
<!--end::Form Validation-->
{% endblock content %}