{% 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;" >StaffProfile</h1>
                <div class="form-group">
          <img src="{% static 'dist/img/django_logo2.jpg' %}" width="80%" height="60%" 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">
        <h1>SignIn</h1>
        <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-12">
                  <button type="submit" class="btn btn-block" style="background-color: rgb(45, 93, 149); color: white;">Login</button>
                </div>
                <!-- /.col -->
              </div>
            </form>
            
        </div>
      </div>
      <!-- /.col -->
     
      <!-- /.col -->
    </div>
    </div>
    <!-- /.row -->
  </div>

  </div>

  </section>