{% extends 'base_board.html' %}
{% load crispy_forms_tags %}
{% load static %}
{% block title %}
  <title>Login</title>
  <meta name="description" content="">

{% endblock title %}

{% block content %}
<div class="row">
    <div class="col-md-2">
    </div>
      <div class="col-md-8">


        <div class="page custom-pages">
    				<div class="row">

    					<div class="col mx-auto">
    						<div class="text-center mb-6">
    							<img src="../assets/images/brand/logo.png" class="" alt="">
    						</div>
    						<div class="row justify-content-center">
    							<div class="col-md-12">

    								<div class="card-group mb-0">
    									<div class="card p-1">
    										<div class="card-body">
                          {% for error in form.non_field_errors %}
                            <div class="alert alert-danger alert-dismissible fade show" role="alert">
                              Please retype your Admission Number/Staff Number and Password correctly. Ensure you take note of the small and capital letters therein.
                              <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                              </button>
                            </div>
                          {% endfor %}
    											<p class="text-apu-purple"><strong>Please enter the Admission Number/Staff Number and Password registered on your account</strong></p>
                          <form method="post" class="form-group col-md-12 text-dark-green">
                            {% csrf_token %}

                          <div class="form-group">


                              <div class="input-group-prepend">
                                <div class="input-group-text">
                                  <i class="fa fa-user-circle text-dark tx-16 lh-0 op-6"></i>
                                </div>
                                {{form.username}}
                              </div>
                              <div class="input-group-prepend">
                                <div class="input-group-text">
                                  <i class="fa fa-key text-dark tx-16 lh-0 op-6"></i>
                                </div>
                                {{form.password}}
                              </div>

    											</div>

    											<div class="text-left">
    												<input type="submit"  class="form-group btn btn-apu-green" value="Sign in">
    											</div>
                          </form>
    											<div class="text-left text-muted mt-3">
    												<i class="fas fa-lock"></i> Forgot Password?<a href="{% url 'reset_password' %}"><span class="text-apu-green"> Reset here</span></a>
    											</div>

    										</div>
    									</div>


                      <div class="card py-5 d-md-down-none login-transparent">
                        <div class="card-body text-center align-items-center">
                          <div>
                            <i class="fa fa-key fa-10x text-apu-purple bg-white tx-16 lh-0 op-6"></i>
                          </div>

                    </div>

                      <div class="modal fade" id="add1" role="dialog">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h4 class="modal-title text-apu-purple" id="inquiryModalLabel"><i class="fas fa-bullhorn fa-2x"></i><span class="text-black">Please contact the admissions officer through </span><strong class="text-red">09031989030.</strong> <span class="text-black">The admissions portal is currently being updated!</span></h4>
                                    <button type="button" class="close" data-dismiss="modal">
                                        <span>&times;</span>
                                    </button>
                                </div>
                                <div class="modal-body">


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




                  </div>


								</div>
							</div>

						</div>

					</div>

				</div>

			</div>

    </div>
    <div class="col-md-2">
    </div>
  </div>
<br>
<br>
{% endblock content%}