<!--

    Queue - A Queueing system that can be used to handle labs in higher education
    Copyright (C) 2016-2020  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/>.

-->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
    <!--@thymesVar id="#authenticatedP" type="nl.tudelft.labracore.lib.security.user.Person"-->

    <!--@thymesVar id="qSession" type="nl.tudelft.queue.dto.view.labs.ExamLabViewDTO"-->

    <head>
        <style th:fragment="style">
            .exam-slot__header {
                position: relative;
            }
            .exam-slot__header::before {
                background-color: var(--divider-colour);
                content: "";
                height: 100%;
                left: 0;
                position: absolute;
                top: 0;
                width: 1px;
            }
            .exam-slot:last-child .exam-slot__header::after {
                background-color: var(--divider-colour);
                content: "";
                height: 100%;
                right: 0;
                position: absolute;
                top: 0;
                width: 1px;
            }

            .slot-progress {
                display: flex;
                height: 0.5rem;
                position: relative;
                width: calc(100% - 2rem);
            }
            .slot-progress::before {
                background-color: var(--disabled-colour);
                content: "";
                height: 100%;
                position: absolute;
                inset: 0;
                z-index: -1;
            }
            .slot-progress::after {
                background-color: var(--divider-colour);
                content: "";
                height: 1px;
                left: -1rem;
                position: absolute;
                top: 0.25rem;
                width: calc(100% + 2rem);
                z-index: -2;
            }
            .slot-progress__handled {
                background-color: var(--accept-colour);
            }
            .slot-progress__occupied {
                background-color: var(--primary-colour);
            }
        </style>
    </head>

    <body>
        <div th:fragment="exam-lab-slots" style="overflow-x: auto; scroll-snap-type: x mandatory">
            <div class="grid gap-0" th:styleappend="|grid-template-columns: repeat(${qSession.examTimeSlots.size()}, 1fr);|">
                <div class="exam-slot flex vertical" th:each="ts : ${qSession.examTimeSlots}" style="min-width: 23.625rem; scroll-snap-align: start">
                    <div class="exam-slot__header">
                        <div class="flex vertical gap-0 align-center mb-3">
                            <div>
                                <span class="single-line" th:text="${ts.slot.toSentence()}"></span>
                                <span class="chip" data-type="accept" th:if="${ts.active}">Active</span>
                                <span class="chip" data-type="error" th:unless="${ts.active}">Inactive</span>
                            </div>
                            <span class="single-line" th:text="|(${ts.handled} handled / ${ts.occupied} occupied / ${ts.capacity})|"></span>
                            <div class="slot-progress mt-3">
                                <div class="slot-progress__handled" th:styleappend="|width: ${(ts.handled * 100) / ts.capacity}%|"></div>
                                <div
                                    class="slot-progress__occupied"
                                    th:styleappend="|width: ${((ts.occupied - ts.handled) * 100) / ts.capacity}%|"></div>
                            </div>
                        </div>
                        <div class="flex gap-3 justify-center pb-3">
                            <form method="get" th:action="@{/time-slot/{id}/close(id=${ts.id})}">
                                <button class="button p-less" data-type="error" th:disabled="${!ts.active || !ts.slot.closed()}">Close</button>
                            </form>
                            <form
                                method="get"
                                th:action="@{/time-slot/{id}/take-next(id=${ts.id})}"
                                th:with="open = ${@labRequestRepository.countNextExamRequests(ts.id, #authenticatedP)}">
                                <button
                                    class="button p-less"
                                    th:with="enabled = ${ts.active && open > 0}"
                                    th:classappend="${qSession.isActive() ? '' : 'hidden'}"
                                    th:disabled="${!enabled}"
                                    th:text="|Take next (${open})|"></button>
                            </form>
                        </div>
                    </div>

                    <table class="table mbl-5">
                        <tr class="flex vertical align-center" th:if="${ts.examRequests.isEmpty()}">
                            <td>No requests yet</td>
                        </tr>
                        <tr
                            th:each="request : ${ts.examRequests}"
                            th:data-request="${request.id}"
                            tabindex="0"
                            role="link"
                            class="request"
                            th:data-status="${request.eventInfo.status.name().toLowerCase()}">
                            <td class="fit-content">
                                <span class="single-line chip" th:text="${request.eventInfo.status.displayName}"></span>
                            </td>
                            <td>
                                <span class="single-line inline-block pbl-3" th:text="${request.requesterName}"></span>
                            </td>
                        </tr>
                    </table>
                </div>
            </div>

            <script>
                document.addEventListener("DOMContentLoaded", function () {
                    document.querySelectorAll(".request").forEach(r =>
                        r.addEventListener("click", function (event) {
                            if (["a", "button"].includes(event.target.tagName.toLowerCase())) return;
                            window.location = `/request/${r.dataset.request}`;
                        })
                    );
                    document.querySelectorAll(".request").forEach(r =>
                        r.addEventListener("keydown", function (event) {
                            if (event.key !== "Enter" || ["a", "button"].includes(event.target.tagName.toLowerCase())) return;
                            window.location = `/request/${r.dataset.request}`;
                        })
                    );
                });
            </script>
        </div>
    </body>
</html>
