<%- include('../Includes/begin.ejs') %>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/startbootstrap-sb-admin-2/4.1.3/css/sb-admin-2.css">
<link rel="stylesheet" href="../CSS/admin-dashboard.css">
<link rel="stylesheet" href="../CSS/admin-profile.css">

<div class="container-fluid">

    <div id="wrapper">

        <%- include('../Includes/admin_nav.ejs') %>

        <section id="content-wrapper">
            <main role="main" class="pt-5 main">
                <!-- Header -->
                <div class="header pb-8 pt-5 pt-lg-8 d-flex align-items-center"
                    style="min-height:300px; background-image: url(https://t4.ftcdn.net/jpg/02/00/98/83/240_F_200988374_2yXU7CUcLczABQ2geAhEGwAfgXbxqkZi.jpg); background-size: cover; background-position: center;">
                    <!-- Mask -->
                    <span class="mask bg-gradient-secondary opacity-8"></span>
                    <!-- Header container -->
                    <div class="container-fluid d-flex align-items-center">
                        <div class="row">
                            <div class="col-lg-7 col-md-10">
                                <h1 class="display-2 text-white">Hello <%=user.name%></h1>
                                <p class="text-white mt-0 mb-5">This is your profile page. You can see the data of your
                                    college and also manage your own profile.
                                </p>
                                <a href="/admin/info_settings" class="btn btn-info">Edit profile</a>
                            </div>
                        </div>
                    </div>
                </div>
                <hr>
                <div class="row mb-5">
                    <div class="col-sm-3">
                        <div class="card" style="box-shadow: 0 1rem 2rem 0 rgba(136, 152, 170, .15) !important;">
                            <div class="card-header bg-primary text-white">
                                <div class="col-xs-3">
                                    <i class="fa fa-book-reader fa-4x"></i>
                                </div>
                                <div class="col-xs-9 text-right">
                                    <div><%= students.length %></div>
                                    <div>Students</div>
                                </div>
                            </div>
                            <a href="/admin/getAllStudents">
                                <div class="card-footer bg-primary text-white">
                                    <span class="float-left">View Details</span>
                                    <span class="float-right"><i class="fa fa-arrow-circle-right"></i></span>
                                    <div class="clearfix"></div>
                                </div>
                            </a>
                        </div>
                    </div>
                    <div class="col-sm-3">
                        <div class="card" style="box-shadow: 0 1rem 2rem 0 rgba(136, 152, 170, .15) !important;">
                            <div class="card-header bg-success text-white">
                                <div class="col-xs-3">
                                    <i class="fa fa-chalkboard-teacher fa-4x"></i>
                                </div>
                                <div class="col-xs-9 text-right">
                                    <div class="huge"><%= staffs.length %></div>
                                    <div>Staffs</div>
                                </div>
                            </div>
                            <a href="/admin/getAllStaffs">
                                <div class="card-footer bg-success text-white">
                                    <span class="float-left">View Details</span>
                                    <span class="float-right"><i class="fa fa-arrow-circle-right"></i></span>
                                    <div class="clearfix"></div>
                                </div>
                            </a>
                        </div>
                    </div>
                    <div class="col-sm-3">
                        <div class="card" style="box-shadow: 0 1rem 2rem 0 rgba(136, 152, 170, .15) !important;">
                            <div class="card-header bg-warning text-white">
                                <div class="col-xs-3">
                                    <i class="fas fa-university fa-4x"></i>
                                </div>
                                <div class="col-xs-9 text-right">
                                    <div class="huge"><%= departments.length %></div>
                                    <div>Departments</div>
                                </div>
                            </div>
                            <a href="/admin/getDept">
                                <div class="card-footer bg-warning text-white">
                                    <span class="float-left">View Details</span>
                                    <span class="float-right"><i class="fa fa-arrow-circle-right"></i></span>
                                    <div class="clearfix"></div>
                                </div>
                            </a>
                        </div>
                    </div>
                    <div class="col-sm-3">
                        <div class="card" style="box-shadow: 0 1rem 2rem 0 rgba(136, 152, 170, .15) !important;">
                            <div class="card-header bg-danger text-white">
                                <div class="col-xs-3">
                                    <i class="fa fa-book fa-4x"></i>
                                </div>
                                <div class="col-xs-9 text-right">
                                    <div class="huge"><%= courses.length %></div>
                                    <div>Courses</div>
                                </div>
                            </div>
                            <a href="/admin/getAllCourses">
                                <div class="card-footer bg-danger text-white">
                                    <span class="float-left">View Details</span>
                                    <span class="float-right"><i class="fa fa-arrow-circle-right"></i></span>
                                    <div class="clearfix"></div>
                                </div>
                            </a>
                        </div>
                    </div>
                </div>
                <div class="row mt-5">
                    <div class="col">
                        <div class="card card-profile shadow">
                            <div class="row justify-content-center">
                                <div class="col-lg-3 order-lg-2">
                                    <div class="card-profile-image">
                                        <a href="#">
                                            <img src="https://sammilanimahavidyalaya.org/wp-content/uploads/2016/01/student-icon.png"
                                                class="rounded-circle">
                                        </a>
                                    </div>
                                </div>
                            </div>
                            <div class="card-header text-center border-0 pt-8 pt-md-4 pb-0 pb-md-4">
                                <div class="d-flex justify-content-between">
                                    <a href="#" class="btn btn-sm btn-info mr-4">Email Teachers</a>
                                    <a href="#" class="btn btn-sm btn-default float-right">Email Students</a>
                                </div>
                            </div>
                            <div class="card-body pt-0 pt-md-4">
                                <div class="text-center mt-5">
                                    <h3>
                                        <%=user.name%><span class="font-weight-light">, 21</span>
                                    </h3>
                                    <div class="h5 font-weight-300">
                                        <i class="ni location_pin mr-2"></i>Dhangadhi,Kailali(10900)
                                    </div>
                                    <div class="h5 mt-4">
                                        <i class="ni business_briefcase-24 mr-2"></i>Administrator - SAS NAST
                                    </div>
                                    <div>
                                        <i class="ni education_hat mr-2"></i>Dhangadhi Engineering College
                                    </div>
                                    <hr class="my-4">
                                    <p>Descriptions about your college
                                    </p>
                                    <a href="#">Show more</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <%- include('../Includes/admin_end.ejs') %>