{% load static %}
<!-- Google Font: Source Sans Pro -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
<!-- Font Awesome -->
<link rel="stylesheet" href="{% static 'plugins/fontawesome-free/css/all.min.css' %}">
<!-- DataTables -->
<link rel="stylesheet" href="{% static 'plugins/datatables-bs4/css/dataTables.bootstrap4.min.css' %}">
<link rel="stylesheet" href="{% static 'plugins/datatables-responsive/css/responsive.bootstrap4.min.css' %}">
<link rel="stylesheet" href="{% static 'plugins/datatables-buttons/css/buttons.bootstrap4.min.css' %}">
<!-- Theme style -->
<link rel="stylesheet" href="{% static 'dist/css/adminlte.min.css' %}">
<section class="content">
    <div class="container-fluid" style="width: 80%;">
      <!-- SELECT2 EXAMPLE -->
      <!-- <div class="card card-default"> -->
<br><br><br>
<div class="card-body">
<div class="card card" style="background-color: cyan; color: black;">
</div>

    <div class="card card" style="background-color: #f4f6f9; color: black;">
       
        
     <!-- <div style="color: black; font-size:x-large; font-weight: bolder; margin-left: 30%;">
      <img src="{% static 'dist/img/pp.jpeg' %}" alt="User Avatar" width="5%" height="5%">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Academic  
    </div> -->
    {% if messages %}
    <ul class="messages" style="color: red;">
        {% for message in messages %}
            <li{% if message.tags %} class="{{ message.tags }}"{% endif %}>{{ message }}</li>
        {% endfor %}
    </ul>
{% endif %}
    <hr>
      
    <div class="row col-md-12">
      <div class="col-md-6" style="border-right: blue; border-style: solid;">
        <h1 class="col-12" style="text-align: center; text-transform: uppercase; font-weight: bold;" >Academic Staff Profile</h1>
                <div class="form-group">
          <img src="{% static 'dist/img/astu.png' %}" width="50%" height="50%" style="margin-left: 20%;" alt="logo"
          class="img-fluid">
             <!-- <img src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-login-form/draw2.webp"-->
        </div>
      </div>
    
      <div class="col-md-5 offset-1">
        <div class="card-body login-card-body">
          <p class="login-box-msg" style="color: red; text-align: justify;">Your password must be 8 digit and collection of Numbers and Characters.</p>
    
          <form method="post">
            {% csrf_token %}
    
            {% for field in form %}
            <div class="input-group mb-3">
              {{field}}
              <div class="input-group-append">
                <div class="input-group-text">
                  <span class="fas fa-lock"></span>
                </div>
              </div>
            </div>
            <small class="text-danger">{{ field.errors }}</small>
            {% endfor %}
            <div class="row">
              <div class="col-12">
                <button type="submit" class="btn btn-info btn-block">Change password</button>
              </div>
              <!-- /.col -->
            </div>
          </form>
    
         
        </div>
      </div>
      <!-- /.col -->
     
      <!-- /.col -->
    </div>
    </div>
    <!-- /.row -->
  </div>

  </div>

  </section>