<!--

    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.LabViewDTO"-->
    <!--@thymesVar id="requests" type="java.util.List<nl.tudelft.queue.dto.view.RequestViewDTO>"-->

    <!--@thymesVar id="current" type="nl.tudelft.queue.dto.view.RequestViewDTO"-->

    <body>
        <div th:fragment="full-request-table" class="flex vertical gap-3">
            <div class="flex space-between align-center">
                <h3 class="font-500">Requests for this lab</h3>
                <th:block th:if="${qSession instanceof T(nl.tudelft.queue.dto.view.LabViewDTO)}" th:with="assignments = ${allAssignments}">
                    <th:block
                        th:replace="~{request/list/filters :: filters(returnPath=@{/lab/{id}(id=${qSession.id})}, multipleLabs=${false})}"></th:block>
                </th:block>
            </div>

            <p th:if="${not @permissionService.canViewSessionRequests(qSession.id)}">
                <th:block th:if="${current != null && current.eventInfo.status.isPending()}">You are waiting to be processed.</th:block>

                <th:block th:if="${current != null && !current.eventInfo.status.isPending()}">Your request is currently being processed.</th:block>

                <th:block th:if="${current == null}">You are not enqueued.</th:block>
            </p>

            <table class="table">
                <tr class="table__header">
                    <th class="fit-content">Status</th>
                    <th>Request</th>
                    <th>Assigned</th>
                    <th>Course</th>
                    <th>Handled</th>
                    <th>Feedback</th>
                </tr>
                <tr th:if="${not @permissionService.canViewSessionRequests(qSession.id) and #lists.isEmpty(requests)}">
                    <td colspan="6">You don't have any requests yet for this lab.</td>
                </tr>
                <tr
                    th:each="request : ${requests}"
                    class="request"
                    tabindex="0"
                    role="link"
                    th:data-request="${request.id}"
                    th:data-status="${request.eventInfo.status.name().toLowerCase()}">
                    <td class="fit-content">
                        <span
                            class="chip single-line"
                            style="border-color: var(--colour); color: var(--colour)"
                            th:text="${request.eventInfo.status.displayName}"></span>
                    </td>
                    <td>
                        <div class="flex vertical gap-0">
                            <span th:text="${request.toSentence()}"></span>
                            <span class="font-100" th:text="${#temporals.format(request.createdAt, 'yyyy-MM-dd HH:mm')}"></span>
                        </div>
                    </td>
                    <td>
                        <span class="single-line" th:text="|${request.eventInfo.assignedTo?.displayName}|"></span>
                    </td>
                    <td>
                        <span class="single-line" th:text="${request.edition?.course?.code} ?: ${request.editionCollection.name}"></span>
                    </td>
                    <td>
                        <div class="flex vertical gap-0" th:if="${request.eventInfo.status.isHandled()}">
                            <span class="single-line" th:text="|${request.eventInfo.assignedTo.displayName}|"></span>
                            <span class="font-100" th:text="${#temporals.format(request.eventInfo.handledAt, 'yyyy-MM-dd HH:mm')}"></span>
                        </div>
                    </td>
                    <td>
                        <th:block
                            th:if="${@permissionService.canGiveFeedback(request.id) and request instanceof T(nl.tudelft.queue.dto.view.requests.LabRequestViewDTO)}">
                            <span th:if="${request.eventInfo.status.isHandled() and !request.feedbacks.isEmpty()}">Feedback given</span>

                            <th:block th:if="${request.eventInfo.status.isHandled() and request.feedbacks.isEmpty()}">
                                <a class="link" style="color: var(--colour)" th:href="@{/request/{id}(id=${request.id})}">Click to give feedback</a>
                            </th:block>
                        </th:block>
                    </td>
                </tr>
            </table>

            <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>
