{% extends "base.html" %}
  {% load widget_tweaks %}
  {% load static %}
  
  {% block Style %}
  <style>
      .form_style{
          width: 60%;
      }
  </style>
  {% endblock Style %}
  
  {% block MainContent %}
 <!-- table-area  -->
    <div>
      <div>
        <div class="table-area m-auto" style="width:80%;">
          <!-- table-title -->
          <div class="table-title">
            <div class="row">
              <div class="col-md-4">
              </div>
              <div class="col-md-4">
                <div class="depertment-name">
                  <h4>Change Password</h4>
                </div>
              </div>
              <div class="col-md-4">
              </div>
            </div>
          </div>
          <!-- table-title -->
          <div class="table-header">
            <div class="row">
              <div class="col-md-6">
                <div class="col-md-12">
                  <h1 class="fw-bold"> Change Password</h1>
                  <ul>
                    <li>
                      {{form.new_password1.help_text|safe}}
                    </li>
                  </ul>
                </div>
              </div>
              <div class="col-md-6">
                <form method="POST">
                    {% csrf_token %}
                  <div class="row">
                      <div class="col-md-12">
                        <!-- <label class="pe-3">Old Password</label> -->
                        {% render_field form.old_password class="form_style form-control" placeholder="old Password" %}
                      </div>
                      <div class="col-md-12 mt-3">
                        <!-- <label class="pe-3">New Password</label> -->
                        {% render_field form.new_password1 class="form_style form-control" placeholder="new password" %}
                      </div>
                      <div class="col-md-12 mt-3">
                        <!-- <label class="pe-3">New Password</label> -->
                        {% render_field form.new_password2 class="form_style form-control" placeholder="confirmation" %}
                      </div>
                      <div class="col-md-12 mt-3">
                        <button type="submit" class=" form_style cus-btn">Change Password</button>
                      </div>
                    </div>
                </form>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- table-area  -->
    </div>

  {% endblock MainContent%}
  {% block meassage %}
   {% include 'notifications/notifications.html' %}                 
  {% endblock meassage %}
  
  {% block JS %}
  
  {% endblock JS %}