<!--

    Queue - A Queueing system that can be used to handle labs in higher education
    Copyright (C) 2016-2023  Delft University of Technology

    This program is free software: you can redistribute it and/or modify
    it under the terms of the GNU Affero General Public License as
    published by the Free Software Foundation, either version 3 of the
    License, or (at your option) any later version.

    This program is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU Affero General Public License for more details.

    You should have received a copy of the GNU Affero General Public License
    along with this program.  If not, see <https://www.gnu.org/licenses/>.

-->
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorate="~{admin/view}">
    <body>
        <section layout:fragment="subcontent">
            <div class="flex vertical gap-3 mb-5">
                <div class="banner" data-type="info" role="alert" th:unless="${#strings.isEmpty(labsOngoing)}">
                    <span class="fa-solid fa-info-circle"></span>
                    <p th:text="${labsOngoing}"></p>
                </div>
                <div class="banner" data-type="info" role="alert" th:unless="${#strings.isEmpty(slotSelectionOpen)}">
                    <span class="fa-solid fa-info-circle"></span>
                    <p th:text="${slotSelectionOpen}"></p>
                </div>
            </div>

            <div class="surface">
                <div th:if="${#lists.isEmpty(runningLabs)}">No sessions running</div>

                <ul class="list divided" role="list">
                    <li th:each="lab : ${runningLabs}" class="pbl-3 flex align-start align-center">
                        <a
                            class="link"
                            th:href="@{/lab/{id}(id=${lab.id})}"
                            th:text="|${lab.name} ${#temporals.format(lab.slot.opensAt, 'dd MMMM yyyy HH:mm')} - ${#temporals.format(lab.slot.closesAt, 'dd MMMM yyyy HH:mm')} ${lab.slotOccupationString}|"></a>

                        <div class="flex wrap gap-2 p-1">
                            <span class="chip" th:if="${lab.slot.open()}">Active</span>
                            <span class="chip" th:if="${lab.slot.closed()}">Completed</span>

                            <span class="chip" th:if="${lab.type == T(nl.tudelft.queue.model.enums.QueueSessionType).EXAM}">Exam</span>
                            <span class="chip" th:if="${lab.type == T(nl.tudelft.queue.model.enums.QueueSessionType).SLOTTED}">Slotted</span>
                            <span class="chip" th:if="${lab.type == T(nl.tudelft.queue.model.enums.QueueSessionType).CAPACITY}">
                                Limited Capacity
                            </span>

                            <span class="chip" data-type="warning" th:if="${!lab.slot.closed() && lab.status.isOpenToEnqueueing()}">
                                Open for enqueueing
                            </span>
                        </div>
                    </li>
                </ul>
            </div>

            <!-- Invisible column for spacing at the bottom of the page -->
            <div class="row mt-3"></div>
        </section>
    </body>
</html>
