{% load static %}
<link rel="stylesheet" href="{% static 'dist/css/login.css' %}">
<!-- Theme style -->
<!-- <link rel="stylesheet" href="{https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css}">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js">-->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css"> 


<link rel="stylesheet" href="{% static 'dist/css/login/css/bootstrap.min.css' %}">
<link rel="stylesheet" href="{% static 'dist/css/login/css/fontawsome.css' %}">
<link rel="stylesheet" href="{% static 'dist/css/login/css/bootstrap.bundle.min.js' %}">
<link rel="stylesheet" href="{% static 'dist/css/login/css/jQuery.js' %}">
<div class="wrapper text-sm">
    <div class="logo">
        <img src="{% static 'dist/img/astu.png' %}" alt="logo">
        <!-- <img src="https://www.freepnglogos.com/uploads/twitter-logo-png/twitter-bird-symbols-png-logo-0.png" alt=""> -->
    </div>
    <div class="text-center mt-4 name">
        Staff Profile
    </div>
    <br>
    <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 class="text-center fs-6" style="margin-top: 30%;">
      <i style="font-size: xx-small;" class="fa fa-undo" aria-hidden="true"></i> <a href="{% url '' %}" title="Return back to staff profile list">Back to Staff Profile</a>
    </div>
</div>