{%include "facultyheader.html"%}
{% load custom_filters %}
<style>
    .faculty-lecture-list .nav-pills .nav-link {
        color: black;
    }

    .faculty-lecture-list .nav-pills .nav-link.active {
        color: rgb(255, 255, 255);
    }
</style>

<!-- Header Layout Content -->
<div class="mdk-header-layout__content">

    <div class="mdk-drawer-layout js-mdk-drawer-layout" data-push data-responsive-width="992px">
        <div class="mdk-drawer-layout__content page">

            <div class="container-fluid page__container exam-module my-2">
                <div class="container">
                    <div class="row">
                        <div class="col-12">
                            <h4 class="mt-3 mb-4">Upcoming Lecture List</h4>
                        </div>
                        <div class="col-12">
                            <div class="card">
                                <div class="card-body">
                                    <div class="table-responsive">
                                        <table class="table table-nowrap card-table">
                                            <thead class="thead-light">
                                                <tr>
                                                    <th>Title</th>
                                                    <th>Topic Name</th>
                                                    <th>Lacture Date</th>
                                                   
                                                    <th class="text-center">Status </th>
                                                    <th class="text-center">Action</th>
                                                </tr>
                                            </thead>
                                            <tbody class="tbody">
                                                {% for lecture in upcommingLectures %}
                                                <tr>
                                                    <td>{{ lecture.title }}</td>
                                                    <td>
                                                        {% if lecture.related_topics %}
                                                            {% for lt in lecture.related_topics %}
                                                                {{ lt.topics.topic_name }}{% if not forloop.last %}, {% endif %}
                                                            {% endfor %}
                                                        {% else %}
                                                            <em>No topics</em>
                                                        {% endif %}
                                                    </td>
                                                    <td>
                                                        <div>
                                                            {{ lecture.lacture_date }}
                                                        </div>
                                                        <div>
                                                            <span>{{ lecture.start_time }}</span> -
                                                            <span>{{ lecture.end_time }}</span>
                                                        </div>
                                                    </td>
                                                    <td class="text-center">
                                                        {% if lecture.is_cancel %}
                                                        <span class="badge badge-danger">Cancelled</span>
                                                        {% else %}  
                                                        <span class="badge badge-success">Active</span>
                                                        {% endif %}
                                                    </td>

                                                    <td class="text-center"> <a href="" class="btn btn-primary text-white">Start</a></td>

                                                </tr>
                                                {% endfor %} 
                                            </tbody>

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

                        <div class="col-lg-12">
                            <ul class="pagination">
                                {% if paginated_lectures.has_previous %}
                                <li class="page-item ">
                                    <a class="page-link"
                                        href="?page={{ paginated_lectures.previous_page_number }}{{filter}}"
                                        aria-label="Previous">
                                        <span aria-hidden="true" class="material-icons">chevron_left</span>
                                        <span>Prev</span>
                                    </a>
                                </li>
                                {% endif %}

                                <li class="page-item active ">
                                    <a class="page-link" href="?page={{ paginated_lectures.number }}{{filter}}"
                                        aria-label="1">
                                        <span>{{ paginated_lectures.number }}</span>
                                    </a>
                                </li>

                                {% if paginated_lectures.has_next %}

                                <li class="page-item">
                                    <a class="page-link"
                                        href="?page={{ paginated_lectures.next_page_number }}{{filter}}"
                                        aria-label="Next">
                                        <span>Next</span>
                                        <span aria-hidden="true" class="material-icons">chevron_right</span>
                                    </a>
                                </li>
                                {% endif %}
                            </ul>
                        </div>
                    </div>
                </div>

                <div>

                </div>


            </div>

        </div>
        <!-- // END drawer-layout__content -->

        <!-- drawer -->
        {%include "facultysidebar.html"%}
        <!-- // END drawer -->
    </div>
    <!-- // END drawer-layout -->

</div>
<!-- // END header-layout__content -->

</div>
<!-- // END header-layout -->

{%include "facultyfooter.html"%}

<!-- FullCalendar CSS -->
<link href="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.8/main.min.css" rel="stylesheet" />

<!-- FullCalendar JS -->
<script src="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.8/main.min.js"></script>

</body>

</html>