{% extends 'board_admin.html' %}
{% load static %}
{% load humanize %}
{% block title %}
  <title>My Dashboard</title>
  <meta name="description" content="">

{% endblock title %}

{% block content %}
<br>
<br>
<div class=" app-content">
	<div class="side-app">

    {% include 'partials/_alerts.html' %}
		<!--Page Header-->
		<div class="page-header">
			<h4 class="page-title"><i class="fa fa-home text-apu-purple mr-2 fa-1x"></i>Welcome to your dashboard, <strong class="text-apu-purple">{{user.first_name}}</strong></h4>
			<ol class="breadcrumb bg-white">
				<li class="breadcrumb-item"><a href=""><strong>Home</strong></a></li>
				<li class="breadcrumb-item active" aria-current="page"><strong>Dashboard</strong></li>
			</ol>
		</div>
		<!--page header-->
		<div class="row">
			<div class="col-md-12">
				<div class="card">
					<div class="card-body">
						<div class="d-sm-flex m-0">
							<div class="mr-4">
								<a class="btn fw-500 ms-lg-4" href="{% url 'academic_board' %}">
									{% if user.photograph %}
										<img src="{{ user.photographURL }}" alt="Photograph" class="profile-small">
									{% else %}
										<i class="fa fa-user-circle text-apu-purple fa-5x"></i>
									{% endif %}
								</a>
							</div>
							<div class="my-4 my-sm-0">
								<div>
									<h4 class="media-heading font-weight-bold">Hi, {{user.first_name}}!</h4>
									<p class="text-muted">Please update your profile to complete your registration</p>
								</div>
								<div class="progress progress-sm">
									<div class="progress-bar progress-bar-striped progress-bar-animated bg-apu-purple w-60"></div>
								</div>
							</div>
							<div class="ml-auto mb-0">
								<a href="{% url 'academic_profile' %}" class="btn btn-sm btn-apu-purple" data-toggle="tooltip" title="Please click to edit your profile" data-original-title="Edit Profile"><i class="fa fa-edit mr-1"></i> <strong>Edit Profile</strong></a>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

    <div class="row">
			<div class="col-md-12 col-lg-6 col-xl-6">
				<div class="card bg-apu-purple">
					<div class="card-body  pb-4">
						<div class="">
							<div class="float-left">
								<span class="text-apu-green">
									<i class="fa fa-user-tie fa-3x"></i>
								</span>
							</div>
							<div class="float-right text-right text-white">
								<br>
                <span class="num-font mb-1 text-white h4">Academic Staff</span>
								<h5 class="mb-1 text-white">{{academics}}</h5>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="col-md-12 col-lg-6 col-xl-6">
				<div class="card bg-apu-purple">
					<div class="card-body  pb-4">
						<div class="">
							<div class="float-left">
								<span class="text-apu-green">
									<i class="fa fa-users fa-3x"></i>
								</span>
							</div>
							<div class="float-right text-right text-white">
								<br>
                <span class="num-font mb-1 text-white h4">Undergraduate</span>
								<h5 class="mb-1 text-white">{{undergrads}}</h5>
							</div>
						</div>
					</div>
				</div>
		</div>
	</div>

    <div class="row">
			<div class="col-md-12 col-lg-6 col-xl-6">
				<div class="card bg-apu-purple">
					<div class="card-body  pb-4">
						<div class="">
							<div class="float-left">
								<span class="text-red">
									<i class="fa fa-search fa-3x"></i>
								</span>
							</div>
							<div class="float-right text-right text-white">
								<br>
                <span class="num-font mb-1 text-white h4">Owing (200L Harmattan)</span>
								<h5 class="mb-1 text-white">{{h200_f}} students</h5>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="col-md-12 col-lg-6 col-xl-6">
				<div class="card bg-apu-purple">
					<div class="card-body  pb-4">
						<div class="">
							<div class="float-left">
								<span class="text-apu-green">
									<i class="fa fa-money-bill fa-3x"></i>
								</span>
							</div>
							<div class="float-right text-right text-white">
								<br>
                <span class="num-font mb-1 text-white h4">Paid (200L Rain)</span>
								<h5 class="mb-1 text-white">{{h200_t}} students</h5>
							</div>
						</div>
					</div>
				</div>
		</div>
	</div>

		<div class="row">
			<div class="col-md-12 col-lg-6 col-xl-6">
				<div class="card bg-apu-purple">
					<div class="card-body  pb-4">
						<div class="">
							<div class="float-left">
								<span class="text-red">
									<i class="fa fa-search fa-3x"></i>
								</span>
							</div>
							<div class="float-right text-right text-white">
								<br>
                <span class="num-font mb-1 text-white h4">Owing (100L Harmattan)</span>
								<h5 class="mb-1 text-white">{{h100_f}} students</h5>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="col-md-12 col-lg-6 col-xl-6">
				<div class="card bg-apu-purple">
					<div class="card-body  pb-4">
						<div class="">
							<div class="float-left">
								<span class="text-apu-green">
									<i class="fa fa-money-bill fa-3x"></i>
								</span>
							</div>
							<div class="float-right text-right text-white">
								<br>
                <span class="num-font mb-1 text-white h4">Paid (100L rain)</span>
								<h5 class="mb-1 text-white">{{h100_t}} students</h5>
							</div>
						</div>
					</div>
				</div>
		</div>
	</div>



  </div>
</div>

{% endblock content%}