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

        <section id="content-wrapper">
            <main role="main" class="pt-5 main">
                <div class="header pb-4 pb-sm-8 pt-5 pt-lg-4 d-flex align-items-center"
                    style="max-height: 100px; background-size: cover; background-position: center top;">
                    <h1>Hello <%= user.st_name %>
                    </h1>
                </div>

                <hr>

                <div class="row">
                    <div class="col-sm-4">
                        <div class="card mb-5" style="box-shadow: 0 1rem 2rem 0 rgba(136, 152, 170, .15) !important;">
                            <img height="250" class="card-img-top"
                                src="https://au.res.keymedia.com/files/image/iStock-classroom-girls-students-school.jpg"
                                alt="image">
                            <div class="card-body">
                                <h5 class="card-title">Mark Attendance</h5>
                                <p class="card-text">Record Daily Attendace of your students here! 
                                </p>
                            

                            </div>
                            <div class="card-footer">
                                <div class="btn-wrapper text-center d-flex justify-content-between"
                                    style="color: #fff;">
                                    <a href="/staff/student-attendance" class="btn btn-success">Mark Attendance</a>
                                </div>
                            </div>
                        </div>
                    </div>
                                <div class="col-sm-4">
                                    <div class="card mb-5" style="box-shadow: 0 1rem 2rem 0 rgba(136, 152, 170, .15) !important;">
                                        <img height="250" class="card-img-top"
                                            src="https://itslearning.com/uk/wp-content/uploads/sites/19/slider58/reports.png">
                                        <div class="card-body">
                                            <h5 class="card-title">Generate Class Report</h5>
                                            <p class="card-text">See how well your class is performing! Generate the overall class
                                             Attendace here.
                                            </p>
                                
                                        </div>
                                
                                <div class="card-footer">
                                    <div class="btn-wrapper text-center d-flex justify-content-between" style="color: #fff;">
                                        <a href="/admin/addStaff" class="btn btn-danger">Class Report</a>
                                    </div>
                                </div>


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

            </main>
        </section>

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