{% extends 'board_bursar.html' %}
{% load static %}
{% 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="{% url 'bursar_board' %}"><strong class="text-spu-green">Home</strong></a></li>
				<li class="breadcrumb-item active" aria-current="page"><strong>Dashboard</strong></li>
			</ol>
		</div>
		<!--page header-->
    {% if user.is_updated == False %}
		<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="">
									{% 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 'bursar_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>
    {% else %}
    {% endif %}

    <div class="row">
			<div class="col-md-12 col-lg-6 col-xl-4">
				<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-sitemap fa-3x"></i>
								</span>
							</div>
							<div class="float-right text-right text-white">
								<br>
                <span class="num-font mb-1 text-white h4">My Classes</span>
								<h5 class="mb-1 text-apu-green">{{classes}}</h5>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="col-md-12 col-lg-6 col-xl-4">
				<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-snowflake fa-3x"></i>
								</span>
							</div>
							<div class="float-right text-right text-white">
								<br>
                <span class="num-font mb-1 text-white h4">My Subjects</span>
								<h5 class="mb-1 text-apu-green">{{subjects}}</h5>
							</div>
						</div>
					</div>
				</div>
		</div>
    <div class="col-md-12 col-lg-6 col-xl-4">
      <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">My Students</span>
              <h5 class="mb-1 text-apu-green">{{studs}}</h5>
            </div>
          </div>
        </div>
      </div>
    </div>
	</div>
  </div>
</div>

{% endblock content%}