{% 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">
      <!-- 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/astu.png' %}" alt="User Avatar" width="5%" height="5%">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Academic Staff Profile
    </div> -->
    <hr>
        
    <div class="row">
        
      <div class="col-md-5 offset-1">
        <br><br><br>
        <div class="form-group">
            

            <form method="post">
              {% csrf_token %}
      
              {% if form.non_field_errors %}
                {% for error in form.non_field_errors  %}
                  <small class="text-danger mb-3">{{ error }}</small>
                {% endfor %}
              {% endif %}
      
              {% for field in form %}
             
              <div class="input-group mb-3">
                <div class="input-group-prepend">
                    <div class="input-group-text">
                      <span class="fas {% if field.name == 'username' %} fa-user {% else %}  fa-lock {% endif %}"></span>
                    </div>
                  </div>
                {{field}}
              </div>
              <small class="text-danger">{{ field.errors }}</small>
              {% endfor %}
              <div class="row">
                <div class="col-8">
                  <div class="icheck-primary">
                    <input type="checkbox" id="remember">
                    <label for="remember">
                      Remember Me
                    </label>
                  </div>
                </div>
                <!-- /.col -->
                <div class="col-4">
                  <button type="submit" class="btn btn-primary btn-block">Sign In</button>
                </div>
                <!-- /.col -->
              </div>
            </form>
            
        </div>
      </div>
      <!-- /.col -->
      <div class="col-md-3 offset-1" style="margin-right: 10%;">
        <div class="form-group">
          <img src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-login-form/draw2.webp"
          class="img-fluid" alt="Sample image">
             <!-- <img src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-login-form/draw2.webp"-->
        </div>
      </div>
      <!-- /.col -->
    </div>
    </div>
    <!-- /.row -->
  </div>
  
    <a href="{% url '' %}" class="nav-link btn btn-default">
      <i class="fa fa-home nav-icon">Home</i>
    </a>

  </div>
  </div>
  </section>