{% extends "partials/base.html" %}
{% load static %} 
{% block content %}

<!-- Page Wrapper -->
<div class="page-wrapper">
    <div class="content">
        <div class="d-md-flex d-block align-items-center justify-content-between mb-3">
            {% block title %}
            {% include "partials/title.html" with title="Time Table" text="Dashboard" textone="Academic" texttwo="Time Table" %}
            {% endblock title %}
            <div class="d-flex my-xl-auto right-content align-items-center flex-wrap">
                <div class="pe-1 mb-2">
                    <a href="#" class="btn btn-outline-light bg-white btn-icon me-1" data-bs-toggle="tooltip"
                        data-bs-placement="top" aria-label="Refresh" data-bs-original-title="Refresh">
                        <i class="ti ti-refresh"></i>
                    </a>
                </div>
                <div class="pe-1 mb-2">
                    <button type="button" class="btn btn-outline-light bg-white btn-icon me-1"
                        data-bs-toggle="tooltip" data-bs-placement="top" aria-label="Print"
                        data-bs-original-title="Print">
                        <i class="ti ti-printer"></i>
                    </button>
                </div>
                <div class="dropdown me-2 mb-2">
                    <a href="javascript:void(0);"
                        class="dropdown-toggle btn btn-light fw-medium d-inline-flex align-items-center"
                        data-bs-toggle="dropdown">
                        <i class="ti ti-file-export me-2"></i>Export
                    </a>
                    <ul class="dropdown-menu  dropdown-menu-end p-3">
                        <li>
                            <a href="javascript:void(0);" class="dropdown-item rounded-1"><i
                                    class="ti ti-file-type-pdf me-2"></i>Export as PDF</a>
                        </li>
                        <li>
                            <a href="javascript:void(0);" class="dropdown-item rounded-1"><i
                                    class="ti ti-file-type-xls me-2"></i>Export as Excel </a>
                        </li>
                    </ul>
                </div>
                <div class="mb-2">
                    <a href="#" class="btn btn-primary d-flex align-items-center" data-bs-toggle="modal"
                        data-bs-target="#add_time_table"><i class="ti ti-square-rounded-plus me-2"></i>Add Time
                        Table</a>
                </div>
            </div>
        </div>
        <div class="card">
            <div class="card-header d-flex align-items-center justify-content-between flex-wrap pb-0">
                <h4 class="mb-3">Time Table</h4>
                <div class="d-flex align-items-center flex-wrap">
                    <div class="dropdown mb-3 me-2">
                        <a href="javascript:void(0);" class="btn btn-outline-light bg-white dropdown-toggle"
                            data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false"><i
                                class="ti ti-filter me-2"></i>Filter</a>
                        <div class="dropdown-menu drop-width">
                            <form action="class-time-table">
                                <div class="d-flex align-items-center border-bottom p-3">
                                    <h4>Filter</h4>
                                </div>
                                <div class="p-3 pb-0 border-bottom">
                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="mb-3">
                                                <label class="form-label">Class</label>
                                                <select class="select">
                                                    <option>Select</option>
                                                    <option>I</option>
                                                    <option>II</option>
                                                    <option>III</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-md-12">
                                            <div class="mb-3">
                                                <label class="form-label">Section</label>
                                                <select class="select">
                                                    <option>Select</option>
                                                    <option>A</option>
                                                    <option>B</option>
                                                    <option>C</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="p-3 d-flex align-items-center justify-content-end">
                                    <a href="#" class="btn btn-light me-3">Reset</a>
                                    <button type="submit" class="btn btn-primary">Apply</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card-body pb-0">
                <div class="d-flex flex-nowrap overflow-auto">
                    <div class="d-flex flex-column me-4 flex-fill">
                        <div class="mb-3">
                            <h6>Monday</h6>
                        </div>
                        <div class="bg-transparent-danger rounded p-3 mb-4">
                            <p class="d-flex align-items-center text-nowrap mb-1"><i
                                    class="ti ti-clock me-1"></i>09:00 - 09:45 AM</p>
                            <p class="text-dark">Subject : Maths</p>
                            <div class="bg-white rounded p-1 mt-3">
                                <a href="{% url 'teacher_details' %}" class="text-muted d-flex align-items-center">
                                    <span class="avatar avatar-sm me-2"><img
                                            src="{% static 'assets/img/teachers/teacher-07.jpg' %}" alt="Img"></span>
                                    Jacquelin
                                </a>
                            </div>
                        </div>
                        <div class="bg-transparent-primary rounded p-3 mb-4">
                            <p class="d-flex align-items-center text-nowrap mb-1"><i
                                    class="ti ti-clock me-1"></i>09:45 - 10:30 AM</p>
                            <p class="text-dark">Subject : English</p>
                            <div class="bg-white rounded p-1 mt-3">
                                <a href="{% url 'teacher_details' %}" class="text-muted d-flex align-items-center">
                                    <span class="avatar avatar-sm me-2"><img
                                            src="{% static 'assets/img/teachers/teacher-03.jpg' %}" alt="Img"></span>
                                    Hellana
                                </a>
                            </div>
                        </div>
                        <div class="bg-transparent-success rounded p-3 mb-4">
                            <p class="d-flex align-items-center text-nowrap mb-1"><i
                                    class="ti ti-clock me-1"></i>10:45 - 11:30 AM</p>
                            <p class="text-dark">Subject : Computer</p>
                            <div class="bg-white rounded p-1 mt-3">
                                <a href="{% url 'teacher_details' %}" class="text-muted d-flex align-items-center">
                                    <span class="avatar avatar-sm me-2"><img
                                            src="{% static 'assets/img/teachers/teacher-02.jpg' %}" alt="Img"></span>
                                    Daniel
                                </a>
                            </div>
                        </div>
                        <div class="bg-transparent-pending rounded p-3 mb-4">
                            <p class="d-flex align-items-center text-nowrap mb-1"><i
                                    class="ti ti-clock me-1"></i>11:30 - 12:15 PM</p>
                            <p class="text-dark">Subject : Spanish</p>
                            <div class="bg-white rounded p-1 mt-3">
                                <a href="{% url 'teacher_details' %}" class="text-muted d-flex align-items-center">
                                    <span class="avatar avatar-sm me-2"><img
                                            src="{% static 'assets/img/teachers/teacher-03.jpg' %}" alt="Img"></span>
                                    Erickson
                                </a>
                            </div>
                        </div>
                        <div class="bg-transparent-info rounded p-3 mb-4">
                            <p class="d-flex align-items-center text-nowrap mb-1"><i
                                    class="ti ti-clock me-1"></i>01:30 - 02:15 PM</p>
                            <p class="text-dark">Subject : Science</p>
                            <div class="bg-white rounded p-1 mt-3">
                                <a href="{% url 'teacher_details' %}" class="text-muted d-flex align-items-center">
                                    <span class="avatar avatar-sm me-2"><img
                                            src="{% static 'assets/img/teachers/teacher-05.jpg' %}" alt="Img"></span>
                                    Morgan
                                </a>
                            </div>
                        </div>
                        <div class="bg-transparent-light rounded p-3 mb-4">
                            <p class="d-flex align-items-center text-nowrap mb-1"><i
                                    class="ti ti-clock me-1"></i>02:15 - 03:00 PM</p>
                            <p class="text-dark">Subject : Chemistry</p>
                            <div class="bg-white rounded p-1 mt-3">
                                <a href="{% url 'teacher_details' %}" class="text-muted d-flex align-items-center">
                                    <span class="avatar avatar-sm me-2"><img
                                            src="{% static 'assets/img/teachers/teacher-06.jpg' %}" alt="Img"></span>
                                    Aaron
                                </a>
                            </div>
                        </div>
                        <div class="bg-transparent-warning rounded p-3 mb-4">
                            <p class="d-flex align-items-center text-nowrap mb-1"><i
                                    class="ti ti-clock me-1"></i>03:15 - 04:00 PM</p>
                            <p class="text-dark">Subject : Physics</p>
                            <div class="bg-white rounded p-1 mt-3">
                                <a href="{% url 'teacher_details' %}" class="text-muted d-flex align-items-center">
                                    <span class="avatar avatar-sm me-2"><img
                                            src="{% static 'assets/img/teachers/teacher-01.jpg' %}" alt="Img"></span>
                                    Teresa
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="d-flex flex-column me-4 flex-fill">
                        <div class="mb-3">
                            <h6>Tuesday</h6>
                        </div>
                        <div class="bg-transparent-pending rounded p-3 mb-4">
                            <p class="d-flex align-items-center text-nowrap mb-1"><i
                                    class="ti ti-clock me-1"></i>09:00 - 09:45 AM</p>
                            <p class="text-dark">Subject : Spanish</p>
                            <div class="bg-white rounded p-1 mt-3">
                                <a href="{% url 'teacher_details' %}" class="text-muted d-flex align-items-center">
                                    <span class="avatar avatar-sm me-2"><img
                                            src="{% static 'assets/img/teachers/teacher-03.jpg' %}" alt="Img"></span>
                                    Erickson
                                </a>
                            </div>
                        </div>
                        <div class="bg-transparent-warning rounded p-3 mb-4">
                            <p class="d-flex align-items-center text-nowrap mb-1"><i
                                    class="ti ti-clock me-1"></i>09:45 - 10:30 AM</p>
                            <p class="text-dark">Subject : Physics</p>
                            <div class="bg-white rounded p-1 mt-3">
                                <a href="{% url 'teacher_details' %}" class="text-muted d-flex align-items-center">
                                    <span class="avatar avatar-sm me-2"><img
                                            src="{% static 'assets/img/teachers/teacher-01.jpg' %}" alt="Img"></span>
                                    Teresa
                                </a>
                            </div>
                        </div>
                        <div class="bg-transparent-light rounded p-3 mb-4">
                            <p class="d-flex align-items-center text-nowrap mb-1"><i
                                    class="ti ti-clock me-1"></i>10:45 - 11:30 AM</p>
                            <p class="text-dark">Subject : Chemistry</p>
                            <div class="bg-white rounded p-1 mt-3">
                                <a href="{% url 'teacher_details' %}" class="text-muted d-flex align-items-center">
                                    <span class="avatar avatar-sm me-2"><img
                                            src="{% static 'assets/img/teachers/teacher-06.jpg' %}" alt="Img"></span>
                                    Aaron
                                </a>
                            </div>
                        </div>
                        <div class="bg-transparent-danger rounded p-3 mb-4">
                            <p class="d-flex align-items-center text-nowrap mb-1"><i
                                    class="ti ti-clock me-1"></i>11:30 - 12:15 PM</p>
                            <p class="text-dark">Subject : Maths</p>
                            <div class="bg-white rounded p-1 mt-3">
                                <a href="{% url 'teacher_details' %}" class="text-muted d-flex align-items-center">
                                    <span class="avatar avatar-sm me-2"><img
                                            src="{% static 'assets/img/teachers/teacher-07.jpg' %}" alt="Img"></span>
                                    Jacquelin
                                </a>
                            </div>
                        </div>
                        <div class="bg-transparent-success rounded p-3 mb-4">
                            <p class="d-flex align-items-center text-nowrap mb-1"><i
                                    class="ti ti-clock me-1"></i>01:30 - 02:15 PM</p>
                            <p class="text-dark">Subject : Computer</p>
                            <div class="bg-white rounded p-1 mt-3">
                                <a href="{% url 'teacher_details' %}" class="text-muted d-flex align-items-center">
                                    <span class="avatar avatar-sm me-2"><img
                                            src="{% static 'assets/img/teachers/teacher-02.jpg' %}" alt="Img"></span>
                                    Daniel
                                </a>
                            </div>
                        </div>
                        <div class="bg-transparent-primary rounded p-3 mb-4">
                            <p class="d-flex align-items-center text-nowrap mb-1"><i
                                    class="ti ti-clock me-1"></i>02:15 - 03:00 PM</p>
                            <p class="text-dark">Subject : English</p>
                            <div class="bg-white rounded p-1 mt-3">
                                <a href="{% url 'teacher_details' %}" class="text-muted d-flex align-items-center">
                                    <span class="avatar avatar-sm me-2"><img
                                            src="{% static 'assets/img/teachers/teacher-03.jpg' %}" alt="Img"></span>
                                    Hellana
                                </a>
                            </div>
                        </div>
                        <div class="bg-transparent-info rounded p-3 mb-4">
                            <p class="d-flex align-items-center text-nowrap mb-1"><i
                                    class="ti ti-clock me-1"></i>03:15 - 04:00 PM</p>
                            <p class="text-dark">Subject : Science</p>
                            <div class="bg-white rounded p-1 mt-3">
                                <a href="{% url 'teacher_details' %}" class="text-muted d-flex align-items-center">
                                    <span class="avatar avatar-sm me-2"><img
                                            src="{% static 'assets/img/teachers/teacher-05.jpg' %}" alt="Img"></span>
                                    Morgan
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="d-flex flex-column me-4 flex-fill">
                        <div class="mb-3">
                            <h6>Wednesday</h6>
                        </div>
                        <div class="bg-transparent-success rounded p-3 mb-4">
                            <p class="d-flex align-items-center text-nowrap mb-1"><i
                                    class="ti ti-clock me-1"></i>09:00 - 09:45 AM</p>
                            <p class="text-dark">Subject : Computer</p>
                            <div class="bg-white rounded p-1 mt-3">
                                <a href="{% url 'teacher_details' %}" class="text-muted d-flex align-items-center">
                                    <span class="avatar avatar-sm me-2"><img
                                            src="{% static 'assets/img/teachers/teacher-02.jpg' %}" alt="Img"></span>
                                    Daniel
                                </a>
                            </div>
                        </div>
                        <div class="bg-transparent-info rounded p-3 mb-4">
                            <p class="d-flex align-items-center text-nowrap mb-1"><i
                                    class="ti ti-clock me-1"></i>09:45 - 10:30 AM</p>
                            <p class="text-dark">Subject : Science</p>
                            <div class="bg-white rounded p-1 mt-3">
                                <a href="{% url 'teacher_details' %}" class="text-muted d-flex align-items-center">
                                    <span class="avatar avatar-sm me-2"><img
                                            src="{% static 'assets/img/teachers/teacher-05.jpg' %}" alt="Img"></span>
                                    Morgan
                                </a>
                            </div>
                        </div>
                        <div class="bg-transparent-danger rounded p-3 mb-4">
                            <p class="d-flex align-items-center text-nowrap mb-1"><i
                                    class="ti ti-clock me-1"></i>10:45 - 11:30 AM</p>
                            <p class="text-dark">Subject : Maths</p>
                            <div class="bg-white rounded p-1 mt-3">
                                <a href="{% url 'teacher_details' %}" class="text-muted d-flex align-items-center">
                                    <span class="avatar avatar-sm me-2"><img
                                            src="{% static 'assets/img/teachers/teacher-07.jpg' %}" alt="Img"></span>
                                    Jacquelin
                                </a>
                            </div>
                        </div>
                        <div class="bg-transparent-light rounded p-3 mb-4">
                            <p class="d-flex align-items-center text-nowrap mb-1"><i
                                    class="ti ti-clock me-1"></i>11:30 - 12:15 PM</p>
                            <p class="text-dark">Subject : Chemistry</p>
                            <div class="bg-white rounded p-1 mt-3">
                                <a href="{% url 'teacher_details' %}" class="text-muted d-flex align-items-center">
                                    <span class="avatar avatar-sm me-2"><img
                                            src="{% static 'assets/img/teachers/teacher-06.jpg' %}" alt="Img"></span>
                                    Aaron
                                </a>
                            </div>
                        </div>
                        <div class="bg-transparent-warning rounded p-3 mb-4">
                            <p class="d-flex align-items-center text-nowrap mb-1"><i
                                    class="ti ti-clock me-1"></i>01:30 - 02:15 PM</p>
                            <p class="text-dark">Subject : Physics</p>
                            <div class="bg-white rounded p-1 mt-3">
                                <a href="{% url 'teacher_details' %}" class="text-muted d-flex align-items-center">
                                    <span class="avatar avatar-sm me-2"><img
                                            src="{% static 'assets/img/teachers/teacher-01.jpg' %}" alt="Img"></span>
                                    Teresa
                                </a>
                            </div>
                        </div>
                        <div class="bg-transparent-primary rounded p-3 mb-4">
                            <p class="d-flex align-items-center text-nowrap mb-1"><i
                                    class="ti ti-clock me-1"></i>02:15 - 03:00 PM</p>
                            <p class="text-dark">Subject : English</p>
                            <div class="bg-white rounded p-1 mt-3">
                                <a href="{% url 'teacher_details' %}" class="text-muted d-flex align-items-center">
                                    <span class="avatar avatar-sm me-2"><img
                                            src="{% static 'assets/img/teachers/teacher-03.jpg' %}" alt="Img"></span>
                                    Hellana
                                </a>
                            </div>
                        </div>
                        <div class="bg-transparent-pending rounded p-3 mb-4">
                            <p class="d-flex align-items-center text-nowrap mb-1"><i
                                    class="ti ti-clock me-1"></i>03:15 - 04:00 PM</p>
                            <p class="text-dark">Subject : Spanish</p>
                            <div class="bg-white rounded p-1 mt-3">
                                <a href="{% url 'teacher_details' %}" class="text-muted d-flex align-items-center">
                                    <span class="avatar avatar-sm me-2"><img
                                            src="{% static 'assets/img/teachers/teacher-03.jpg' %}" alt="Img"></span>
                                    Erickson
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="d-flex flex-column me-4 flex-fill">
                        <div class="mb-3">
                            <h6>Thursday</h6>
                        </div>
                        <div class="bg-transparent-warning rounded p-3 mb-4">
                            <p class="d-flex align-items-center text-nowrap mb-1"><i
                                    class="ti ti-clock me-1"></i>09:00 - 09:45 AM</p>
                            <p class="text-dark">Subject : Physics</p>
                            <div class="bg-white rounded p-1 mt-3">
                                <a href="{% url 'teacher_details' %}" class="text-muted d-flex align-items-center">
                                    <span class="avatar avatar-sm me-2"><img
                                            src="{% static 'assets/img/teachers/teacher-01.jpg' %}" alt="Img"></span>
                                    Teresa
                                </a>
                            </div>
                        </div>
                        <div class="bg-transparent-success rounded p-3 mb-4">
                            <p class="d-flex align-items-center text-nowrap mb-1"><i
                                    class="ti ti-clock me-1"></i>09:45 - 10:30 AM</p>
                            <p class="text-dark">Subject : Computer</p>
                            <div class="bg-white rounded p-1 mt-3">
                                <a href="{% url 'teacher_details' %}" class="text-muted d-flex align-items-center">
                                    <span class="avatar avatar-sm me-2"><img
                                            src="{% static 'assets/img/teachers/teacher-02.jpg' %}" alt="Img"></span>
                                    Daniel
                                </a>
                            </div>
                        </div>
                        <div class="bg-transparent-primary rounded p-3 mb-4">
                            <p class="d-flex align-items-center text-nowrap mb-1"><i
                                    class="ti ti-clock me-1"></i>10:45 - 11:30 AM</p>
                            <p class="text-dark">Subject : English</p>
                            <div class="bg-white rounded p-1 mt-3">
                                <a href="{% url 'teacher_details' %}" class="text-muted d-flex align-items-center">
                                    <span class="avatar avatar-sm me-2"><img
                                            src="{% static 'assets/img/teachers/teacher-03.jpg' %}" alt="Img"></span>
                                    Hellana
                                </a>
                            </div>
                        </div>
                        <div class="bg-transparent-info rounded p-3 mb-4">
                            <p class="d-flex align-items-center text-nowrap mb-1"><i
                                    class="ti ti-clock me-1"></i>11:30 - 12:15 PM</p>
                            <p class="text-dark">Subject : Science</p>
                            <div class="bg-white rounded p-1 mt-3">
                                <a href="{% url 'teacher_details' %}" class="text-muted d-flex align-items-center">
                                    <span class="avatar avatar-sm me-2"><img
                                            src="{% static 'assets/img/teachers/teacher-05.jpg' %}" alt="Img"></span>
                                    Morgan
                                </a>
                            </div>
                        </div>
                        <div class="bg-transparent-pending rounded p-3 mb-4">
                            <p class="d-flex align-items-center text-nowrap mb-1"><i
                                    class="ti ti-clock me-1"></i>01:30 - 02:15 PM</p>
                            <p class="text-dark">Subject : Spanish</p>
                            <div class="bg-white rounded p-1 mt-3">
                                <a href="{% url 'teacher_details' %}" class="text-muted d-flex align-items-center">
                                    <span class="avatar avatar-sm me-2"><img
                                            src="{% static 'assets/img/teachers/teacher-03.jpg' %}" alt="Img"></span>
                                    Erickson
                                </a>
                            </div>
                        </div>
                        <div class="bg-transparent-light rounded p-3 mb-4">
                            <p class="d-flex align-items-center text-nowrap mb-1"><i
                                    class="ti ti-clock me-1"></i>02:15 - 03:00 PM</p>
                            <p class="text-dark">Subject : Chemistry</p>
                            <div class="bg-white rounded p-1 mt-3">
                                <a href="{% url 'teacher_details' %}" class="text-muted d-flex align-items-center">
                                    <span class="avatar avatar-sm me-2"><img
                                            src="{% static 'assets/img/teachers/teacher-06.jpg' %}" alt="Img"></span>
                                    Aaron
                                </a>
                            </div>
                        </div>
                        <div class="bg-transparent-danger rounded p-3 mb-4">
                            <p class="d-flex align-items-center text-nowrap mb-1"><i
                                    class="ti ti-clock me-1"></i>03:15 - 04:00 PM</p>
                            <p class="text-dark">Subject : Maths</p>
                            <div class="bg-white rounded p-1 mt-3">
                                <a href="{% url 'teacher_details' %}" class="text-muted d-flex align-items-center">
                                    <span class="avatar avatar-sm me-2"><img
                                            src="{% static 'assets/img/teachers/teacher-07.jpg' %}" alt="Img"></span>
                                    Jacquelin
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="d-flex flex-column me-4 flex-fill">
                        <div class="mb-3">
                            <h6>Friday</h6>
                        </div>
                        <div class="bg-transparent-primary rounded p-3 mb-4">
                            <p class="d-flex align-items-center text-nowrap mb-1"><i
                                    class="ti ti-clock me-1"></i>09:00 - 09:45 AM</p>
                            <p class="text-dark">Subject : English</p>
                            <div class="bg-white rounded p-1 mt-3">
                                <a href="{% url 'teacher_details' %}" class="text-muted d-flex align-items-center">
                                    <span class="avatar avatar-sm me-2"><img
                                            src="{% static 'assets/img/teachers/teacher-03.jpg' %}" alt="Img"></span>
                                    Hellana
                                </a>
                            </div>
                        </div>
                        <div class="bg-transparent-pending rounded p-3 mb-4">
                            <p class="d-flex align-items-center text-nowrap mb-1"><i
                                    class="ti ti-clock me-1"></i>09:45 - 10:30 AM</p>
                            <p class="text-dark">Subject : Spanish</p>
                            <div class="bg-white rounded p-1 mt-3">
                                <a href="{% url 'teacher_details' %}" class="text-muted d-flex align-items-center">
                                    <span class="avatar avatar-sm me-2"><img
                                            src="{% static 'assets/img/teachers/teacher-03.jpg' %}" alt="Img"></span>
                                    Erickson
                                </a>
                            </div>
                        </div>
                        <div class="bg-transparent-warning rounded p-3 mb-4">
                            <p class="d-flex align-items-center text-nowrap mb-1"><i
                                    class="ti ti-clock me-1"></i>10:45 - 11:30 AM</p>
                            <p class="text-dark">Subject : Physics</p>
                            <div class="bg-white rounded p-1 mt-3">
                                <a href="{% url 'teacher_details' %}" class="text-muted d-flex align-items-center">
                                    <span class="avatar avatar-sm me-2"><img
                                            src="{% static 'assets/img/teachers/teacher-01.jpg' %}" alt="Img"></span>
                                    Teresa
                                </a>
                            </div>
                        </div>
                        <div class="bg-transparent-light rounded p-3 mb-4">
                            <p class="d-flex align-items-center text-nowrap mb-1"><i
                                    class="ti ti-clock me-1"></i>11:30 - 12:15 PM</p>
                            <p class="text-dark">Subject : Chemistry</p>
                            <div class="bg-white rounded p-1 mt-3">
                                <a href="{% url 'teacher_details' %}" class="text-muted d-flex align-items-center">
                                    <span class="avatar avatar-sm me-2"><img
                                            src="{% static 'assets/img/teachers/teacher-06.jpg' %}" alt="Img"></span>
                                    Aaron
                                </a>
                            </div>
                        </div>
                        <div class="bg-transparent-danger rounded p-3 mb-4">
                            <p class="d-flex align-items-center text-nowrap mb-1"><i
                                    class="ti ti-clock me-1"></i>01:30 - 02:15 PM</p>
                            <p class="text-dark">Subject : Maths</p>
                            <div class="bg-white rounded p-1 mt-3">
                                <a href="{% url 'teacher_details' %}" class="text-muted d-flex align-items-center">
                                    <span class="avatar avatar-sm me-2"><img
                                            src="{% static 'assets/img/teachers/teacher-07.jpg' %}" alt="Img"></span>
                                    Jacquelin
                                </a>
                            </div>
                        </div>
                        <div class="bg-transparent-success rounded p-3 mb-4">
                            <p class="d-flex align-items-center text-nowrap mb-1"><i
                                    class="ti ti-clock me-1"></i>02:15 - 3:00 PM</p>
                            <p class="text-dark">Subject : Computer</p>
                            <div class="bg-white rounded p-1 mt-3">
                                <a href="{% url 'teacher_details' %}" class="text-muted d-flex align-items-center">
                                    <span class="avatar avatar-sm me-2"><img
                                            src="{% static 'assets/img/teachers/teacher-02.jpg' %}" alt="Img"></span>
                                    Daniel
                                </a>
                            </div>
                        </div>
                        <div class="bg-transparent-info rounded p-3 mb-4">
                            <p class="d-flex align-items-center text-nowrap mb-1"><i
                                    class="ti ti-clock me-1"></i>03:15 - 04:00 PM</p>
                            <p class="text-dark">Subject : Science</p>
                            <div class="bg-white rounded p-1 mt-3">
                                <a href="{% url 'teacher_details' %}" class="text-muted d-flex align-items-center">
                                    <span class="avatar avatar-sm me-2"><img
                                            src="{% static 'assets/img/teachers/teacher-05.jpg' %}" alt="Img"></span>
                                    Morgan
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="d-flex flex-column flex-fill">
                        <div class="mb-3">
                            <h6>Saturday</h6>
                        </div>
                        <div class="bg-transparent-primary rounded p-3 mb-4">
                            <p class="d-flex align-items-center text-nowrap mb-1"><i
                                    class="ti ti-clock me-1"></i>09:00 - 09:45 AM</p>
                            <p class="text-dark">Subject : English</p>
                            <div class="bg-white rounded p-1 mt-3">
                                <a href="{% url 'teacher_details' %}" class="text-muted d-flex align-items-center">
                                    <span class="avatar avatar-sm me-2"><img
                                            src="{% static 'assets/img/teachers/teacher-03.jpg' %}" alt="Img"></span>
                                    Hellana
                                </a>
                            </div>
                        </div>
                        <div class="bg-transparent-pending rounded p-3 mb-4">
                            <p class="d-flex align-items-center text-nowrap mb-1"><i
                                    class="ti ti-clock me-1"></i>09:45 - 10:30 AM</p>
                            <p class="text-dark">Subject : Spanish</p>
                            <div class="bg-white rounded p-1 mt-3">
                                <a href="{% url 'teacher_details' %}" class="text-muted d-flex align-items-center">
                                    <span class="avatar avatar-sm me-2"><img
                                            src="{% static 'assets/img/teachers/teacher-03.jpg' %}" alt="Img"></span>
                                    Erickson
                                </a>
                            </div>
                        </div>
                        <div class="bg-transparent-warning rounded p-3 mb-4">
                            <p class="d-flex align-items-center text-nowrap mb-1"><i
                                    class="ti ti-clock me-1"></i>10:45 - 11:30 AM</p>
                            <p class="text-dark">Subject : Physics</p>
                            <div class="bg-white rounded p-1 mt-3">
                                <a href="{% url 'teacher_details' %}" class="text-muted d-flex align-items-center">
                                    <span class="avatar avatar-sm me-2"><img
                                            src="{% static 'assets/img/teachers/teacher-01.jpg' %}" alt="Img"></span>
                                    Teresa
                                </a>
                            </div>
                        </div>
                        <div class="bg-transparent-light rounded p-3 mb-4">
                            <p class="d-flex align-items-center text-nowrap mb-1"><i
                                    class="ti ti-clock me-1"></i>11:30 - 12:15 PM</p>
                            <p class="text-dark">Subject : Chemistry</p>
                            <div class="bg-white rounded p-1 mt-3">
                                <a href="{% url 'teacher_details' %}" class="text-muted d-flex align-items-center">
                                    <span class="avatar avatar-sm me-2"><img
                                            src="{% static 'assets/img/teachers/teacher-06.jpg' %}" alt="Img"></span>
                                    Aaron
                                </a>
                            </div>
                        </div>
                        <div class="bg-transparent-danger rounded p-3 mb-4">
                            <p class="d-flex align-items-center text-nowrap mb-1"><i
                                    class="ti ti-clock me-1"></i>01:30 - 02:15 PM</p>
                            <p class="text-dark">Subject : Maths</p>
                            <div class="bg-white rounded p-1 mt-3">
                                <a href="{% url 'teacher_details' %}" class="text-muted d-flex align-items-center">
                                    <span class="avatar avatar-sm me-2"><img
                                            src="{% static 'assets/img/teachers/teacher-07.jpg' %}" alt="Img"></span>
                                    Jacquelin
                                </a>
                            </div>
                        </div>
                        <div class="bg-transparent-success rounded p-3 mb-4">
                            <p class="d-flex align-items-center text-nowrap mb-1"><i
                                    class="ti ti-clock me-1"></i>02:15 - 3:00 PM</p>
                            <p class="text-dark">Subject : Computer</p>
                            <div class="bg-white rounded p-1 mt-3">
                                <a href="{% url 'teacher_details' %}" class="text-muted d-flex align-items-center">
                                    <span class="avatar avatar-sm me-2"><img
                                            src="{% static 'assets/img/teachers/teacher-02.jpg' %}" alt="Img"></span>
                                    Daniel
                                </a>
                            </div>
                        </div>
                        <div class="bg-transparent-info rounded p-3 mb-4">
                            <p class="d-flex align-items-center text-nowrap mb-1"><i
                                    class="ti ti-clock me-1"></i>03:15 - 04:00 PM</p>
                            <p class="text-dark">Subject : Science</p>
                            <div class="bg-white rounded p-1 mt-3">
                                <a href="{% url 'teacher_details' %}" class="text-muted d-flex align-items-center">
                                    <span class="avatar avatar-sm me-2"><img
                                            src="{% static 'assets/img/teachers/teacher-05.jpg' %}" alt="Img"></span>
                                    Morgan
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="card-footer border-0 pb-0">
                <div class="row">
                    <div class="col-lg-4 col-xxl-4 col-xl-4 d-flex">
                        <div class="card flex-fill">
                            <div class="card-body">
                                <span class="bg-primary badge badge-sm mb-2">Morning Break</span>
                                <p class="text-dark"><i class="ti ti-clock me-1"></i>10:30 to 10 :45 AM</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4 col-xxl-3 d-flex">
                        <div class="card flex-fill">
                            <div class="card-body">
                                <span class="bg-warning badge badge-sm mb-2">Lunch</span>
                                <p class="text-dark"><i class="ti ti-clock me-1"></i>10:30 to 10 :45 AM</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4 col-xxl-3 d-flex">
                        <div class="card flex-fill">
                            <div class="card-body">
                                <span class="bg-info badge badge-sm mb-2">Evening Break</span>
                                <p class="text-dark"><i class="ti ti-clock me-1"></i>03:30 PM to 03:45 PM</p>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>
<!-- /Page Wrapper -->

<!-- Add Class Time Table -->
<div class="modal fade" id="add_time_table">
    <div class="modal-dialog modal-dialog-centered modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Add Time Table</h4>
                <button type="button" class="btn-close custom-btn-close" data-bs-dismiss="modal"
                    aria-label="Close">
                    <i class="ti ti-x"></i>
                </button>
            </div>
            <form action="class-time-table">
                <div class="modal-body">
                    <div class="row">
                        <div class="col-lg-4">
                            <div class="mb-3">
                                <label class="form-label">Class</label>
                                <input type="text" class="form-control">
                            </div>
                        </div>
                        <div class="col-lg-4">
                            <div class="mb-3">
                                <label class="form-label">Section</label>
                                <select class="select">
                                    <option>A</option>
                                    <option>B</option>
                                    <option>C</option>
                                    <option>D</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-lg-4">
                            <div class="mb-3">
                                <label class="form-label">Subject Group</label>
                                <select class="select">
                                    <option>Class I</option>
                                    <option>Class II</option>
                                    <option>Class III</option>
                                    <option>Class IV</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-lg-4">
                            <div class="mb-3">
                                <label class="form-label">Period Start Time</label>
                                <select class="select">
                                    <option>Select</option>
                                    <option>09:00 AM</option>
                                    <option>09:45 AM</option>
                                    <option>10:45 AM</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-lg-4">
                            <div class="mb-3">
                                <label class="form-label">Duration(min)</label>
                                <select class="select">
                                    <option>Select</option>
                                    <option>45 Mins</option>
                                    <option>1 Hour</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="add-more-timetable">
                        <ul class="tab-links nav nav-pills" id="pills-tab2" role="tablist">
                            <li class="nav-link active" id="pills-monday-tab" data-bs-toggle="pill"
                                data-bs-target="#pills-monday" role="tab" aria-controls="pills-monday"
                                aria-selected="true"><a href="javascript:void(0);">Monday</a></li>
                            <li class="nav-link" id="pills-tuesday-tab" data-bs-toggle="pill"
                                data-bs-target="#pills-tuesday" role="tab" aria-controls="pills-tuesday"
                                aria-selected="false" tabindex="-1"><a href="javascript:void(0);">Tuesday</a>
                            </li>
                            <li class="nav-link" id="pills-wednesday-tab" data-bs-toggle="pill"
                                data-bs-target="#pills-wednesday" role="tab" aria-controls="pills-wednesday"
                                aria-selected="false" tabindex="-1"><a href="javascript:void(0);">Wednesday</a>
                            </li>
                            <li class="nav-link" id="pills-thursday-tab" data-bs-toggle="pill"
                                data-bs-target="#pills-thursday" role="tab" aria-controls="pills-thursday"
                                aria-selected="false" tabindex="-1"><a href="javascript:void(0);">Thursday</a>
                            </li>
                            <li class="nav-link" id="pills-friday-tab" data-bs-toggle="pill"
                                data-bs-target="#pills-friday" role="tab" aria-controls="pills-friday"
                                aria-selected="false" tabindex="-1"><a href="javascript:void(0);">Friday</a>
                            </li>
                        </ul>
                        <div class="tab-content pt-0 dashboard-tab">
                            <div class="tab-pane fade show active" id="pills-monday" role="tabpanel"
                                aria-labelledby="pills-monday-tab">
                                <div class="add-timetable-row">
                                    <div class="row timetable-count">
                                        <div class="col-lg-3">
                                            <div class="mb-3">
                                                <label class="form-label">Subject</label>
                                                <select class="select">
                                                    <option>Select</option>
                                                    <option>English</option>
                                                    <option>Spanish</option>
                                                    <option>Physics</option>
                                                    <option>Maths</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-lg-3">
                                            <div class="mb-3">
                                                <label class="form-label">Teacher</label>
                                                <select class="select">
                                                    <option>Select</option>
                                                    <option>Hellana</option>
                                                    <option>Erickson</option>
                                                    <option>Teresa</option>
                                                    <option>Aaron</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-lg-3">
                                            <div class="mb-3">
                                                <label class="form-label">Time From</label>
                                                <select class="select">
                                                    <option>Select</option>
                                                    <option>09:00</option>
                                                    <option>09:45</option>
                                                    <option>10:45</option>
                                                    <option>11:30</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-lg-3">
                                            <div class="d-flex align-items-end">
                                                <div class="mb-3 flex-fill">
                                                    <label class="form-label">Time To</label>
                                                    <select class="select">
                                                        <option>Select</option>
                                                        <option>09:45</option>
                                                        <option>10:45</option>
                                                        <option>11:30</option>
                                                        <option>12:15</option>
                                                    </select>
                                                </div>
                                                <div class="mb-3 ms-2">
                                                    <a href="#" class="delete-time-table"><i
                                                            class="ti ti-trash"></i></a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div>
                                    <a href="javascript:void(0);" class="btn btn-primary add-new-timetable"><i
                                            class="ti ti-square-rounded-plus-filled me-2"></i>Add New</a>
                                </div>
                            </div>
                            <div class="tab-pane fade" id="pills-tuesday" role="tabpanel"
                                aria-labelledby="pills-tuesday-tab">
                                <div class="add-timetable-row">
                                    <div class="row timetable-count">
                                        <div class="col-lg-3">
                                            <div class="mb-3">
                                                <label class="form-label">Subject</label>
                                                <select class="select">
                                                    <option>Select</option>
                                                    <option>English</option>
                                                    <option>Spanish</option>
                                                    <option>Physics</option>
                                                    <option>Maths</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-lg-3">
                                            <div class="mb-3">
                                                <label class="form-label">Teacher</label>
                                                <select class="select">
                                                    <option>Select</option>
                                                    <option>Hellana</option>
                                                    <option>Erickson</option>
                                                    <option>Teresa</option>
                                                    <option>Aaron</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-lg-3">
                                            <div class="mb-3">
                                                <label class="form-label">Time From</label>
                                                <select class="select">
                                                    <option>Select</option>
                                                    <option>09:00</option>
                                                    <option>09:45</option>
                                                    <option>10:45</option>
                                                    <option>11:30</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-lg-3">
                                            <div class="d-flex align-items-end">
                                                <div class="mb-3 flex-fill">
                                                    <label class="form-label">Time To</label>
                                                    <select class="select">
                                                        <option>Select</option>
                                                        <option>09:45</option>
                                                        <option>10:45</option>
                                                        <option>11:30</option>
                                                        <option>12:15</option>
                                                    </select>
                                                </div>
                                                <div class="mb-3 ms-2">
                                                    <a href="#" class="delete-time-table"><i
                                                            class="ti ti-trash"></i></a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div>
                                    <a href="javascript:void(0);" class="btn btn-primary add-new-timetable"><i
                                            class="ti ti-square-rounded-plus-filled me-2"></i>Add New</a>
                                </div>
                            </div>
                            <div class="tab-pane fade" id="pills-wednesday" role="tabpanel"
                                aria-labelledby="pills-wednesday-tab">
                                <div class="add-timetable-row">
                                    <div class="row timetable-count">
                                        <div class="col-lg-3">
                                            <div class="mb-3">
                                                <label class="form-label">Subject</label>
                                                <select class="select">
                                                    <option>Select</option>
                                                    <option>English</option>
                                                    <option>Spanish</option>
                                                    <option>Physics</option>
                                                    <option>Maths</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-lg-3">
                                            <div class="mb-3">
                                                <label class="form-label">Teacher</label>
                                                <select class="select">
                                                    <option>Select</option>
                                                    <option>Hellana</option>
                                                    <option>Erickson</option>
                                                    <option>Teresa</option>
                                                    <option>Aaron</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-lg-3">
                                            <div class="mb-3">
                                                <label class="form-label">Time From</label>
                                                <select class="select">
                                                    <option>Select</option>
                                                    <option>09:00</option>
                                                    <option>09:45</option>
                                                    <option>10:45</option>
                                                    <option>11:30</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-lg-3">
                                            <div class="d-flex align-items-end">
                                                <div class="mb-3 flex-fill">
                                                    <label class="form-label">Time To</label>
                                                    <select class="select">
                                                        <option>Select</option>
                                                        <option>09:45</option>
                                                        <option>10:45</option>
                                                        <option>11:30</option>
                                                        <option>12:15</option>
                                                    </select>
                                                </div>
                                                <div class="mb-3 ms-2">
                                                    <a href="#" class="delete-time-table"><i
                                                            class="ti ti-trash"></i></a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div>
                                    <a href="javascript:void(0);" class="btn btn-primary add-new-timetable"><i
                                            class="ti ti-square-rounded-plus-filled me-2"></i>Add New</a>
                                </div>
                            </div>
                            <div class="tab-pane fade" id="pills-thursday" role="tabpanel"
                                aria-labelledby="pills-thursday-tab">
                                <div class="add-timetable-row">
                                    <div class="row timetable-count">
                                        <div class="col-lg-3">
                                            <div class="mb-3">
                                                <label class="form-label">Subject</label>
                                                <select class="select">
                                                    <option>Select</option>
                                                    <option>English</option>
                                                    <option>Spanish</option>
                                                    <option>Physics</option>
                                                    <option>Maths</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-lg-3">
                                            <div class="mb-3">
                                                <label class="form-label">Teacher</label>
                                                <select class="select">
                                                    <option>Select</option>
                                                    <option>Hellana</option>
                                                    <option>Erickson</option>
                                                    <option>Teresa</option>
                                                    <option>Aaron</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-lg-3">
                                            <div class="mb-3">
                                                <label class="form-label">Time From</label>
                                                <select class="select">
                                                    <option>Select</option>
                                                    <option>09:00</option>
                                                    <option>09:45</option>
                                                    <option>10:45</option>
                                                    <option>11:30</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-lg-3">
                                            <div class="d-flex align-items-end">
                                                <div class="mb-3 flex-fill">
                                                    <label class="form-label">Time To</label>
                                                    <select class="select">
                                                        <option>Select</option>
                                                        <option>09:45</option>
                                                        <option>10:45</option>
                                                        <option>11:30</option>
                                                        <option>12:15</option>
                                                    </select>
                                                </div>
                                                <div class="mb-3 ms-2">
                                                    <a href="#" class="delete-time-table"><i
                                                            class="ti ti-trash"></i></a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div>
                                    <a href="javascript:void(0);" class="btn btn-primary add-new-timetable"><i
                                            class="ti ti-square-rounded-plus-filled me-2"></i>Add New</a>
                                </div>
                            </div>
                            <div class="tab-pane fade" id="pills-friday" role="tabpanel"
                                aria-labelledby="pills-friday-tab">
                                <div class="add-timetable-row">
                                    <div class="row timetable-count">
                                        <div class="col-lg-3">
                                            <div class="mb-3">
                                                <label class="form-label">Subject</label>
                                                <select class="select">
                                                    <option>Select</option>
                                                    <option>English</option>
                                                    <option>Spanish</option>
                                                    <option>Physics</option>
                                                    <option>Maths</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-lg-3">
                                            <div class="mb-3">
                                                <label class="form-label">Teacher</label>
                                                <select class="select">
                                                    <option>Select</option>
                                                    <option>Hellana</option>
                                                    <option>Erickson</option>
                                                    <option>Teresa</option>
                                                    <option>Aaron</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-lg-3">
                                            <div class="mb-3">
                                                <label class="form-label">Time From</label>
                                                <select class="select">
                                                    <option>Select</option>
                                                    <option>09:00</option>
                                                    <option>09:45</option>
                                                    <option>10:45</option>
                                                    <option>11:30</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-lg-3">
                                            <div class="d-flex align-items-end">
                                                <div class="mb-3 flex-fill">
                                                    <label class="form-label">Time To</label>
                                                    <select class="select">
                                                        <option>Select</option>
                                                        <option>09:45</option>
                                                        <option>10:45</option>
                                                        <option>11:30</option>
                                                        <option>12:15</option>
                                                    </select>
                                                </div>
                                                <div class="mb-3 ms-2">
                                                    <a href="#" class="delete-time-table"><i
                                                            class="ti ti-trash"></i></a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div>
                                    <a href="javascript:void(0);" class="btn btn-primary add-new-timetable"><i
                                            class="ti ti-square-rounded-plus-filled me-2"></i>Add New</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <a href="#" class="btn btn-light me-2" data-bs-dismiss="modal">Cancel</a>
                    <button type="submit" class="btn btn-primary">Add Time Table</button>
                </div>
            </form>
        </div>

    </div>
</div>
<!-- /Add Class Time Table -->

{% endblock content %}