<!--

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

-->
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
    <!--@thymesVar id="requests" type="org.springframework.data.domain.Page<nl.tudelft.queue.dto.view.RequestViewDTO>"-->

    <body>
        <th:block th:fragment="request-table(showName, showOnlyRelevant)">
            <table id="request-table" class="table">
                <thead>
                    <tr class="table__header">
                        <th>Status</th>
                        <th th:classappend="${@thymeleafConfig.isTheDay()} ? 'ctrl-right'">Type</th>
                        <th th:if="${showName}" th:classappend="${@thymeleafConfig.isTheDay()} ? 'ctrl-right'">Requested by</th>
                        <th th:classappend="${@thymeleafConfig.isTheDay()} ? 'ctrl-right'">Room</th>
                        <th th:classappend="${@thymeleafConfig.isTheDay()} ? 'ctrl-right'">Assignment</th>
                        <th th:classappend="${@thymeleafConfig.isTheDay()} ? 'ctrl-right'">Course</th>
                        <th th:unless="${showOnlyRelevant}" th:classappend="${@thymeleafConfig.isTheDay()} ? 'ctrl-right'">Assigned</th>
                        <th th:unless="${showOnlyRelevant}" th:classappend="${@thymeleafConfig.isTheDay()} ? 'ctrl-right'">Handled</th>
                    </tr>
                </thead>
                <tbody th:classappend="${@thymeleafConfig.isTheDay()} ? 'ctrl-alt-down'">
                    <tr th:if="${requests.isEmpty()}" id="no-requests-info">
                        <td colspan="8">There aren't any requests.</td>
                    </tr>
                    <!-- Changes made to this template should be made accordingly to the template in request/list.html -->
                    <th:block th:each="request : ${requests}">
                        <tr
                            class="request"
                            th:data-status="${request.eventInfo.status.name().toLowerCase()}"
                            th:id="'request-' + ${request.id}"
                            th:data-request="${request.id}"
                            role="link"
                            tabindex="0">
                            <td class="fit-content">
                                <span
                                    class="chip single-line"
                                    th:text="${request.eventInfo.status.displayName}"
                                    th:classappend="${@thymeleafConfig.isTheDay()} ? 'ctrl-alt-right'"
                                    th:id="'status-' + ${request.id}"></span>
                            </td>
                            <td th:classappend="${@thymeleafConfig.isTheDay()} ? 'ctrl-alt-right'">
                                <span class="single-line">
                                    <th:block th:if="${request instanceof T(nl.tudelft.queue.model.SelectionRequest)}">Selection</th:block>

                                    <!--@thymesVar id="request" type="nl.tudelft.queue.dto.view.requests.LabRequestViewDTO"-->
                                    <th:block
                                        th:unless="${request instanceof T(nl.tudelft.queue.model.SelectionRequest)}"
                                        th:text="${request.requestType.displayName()}"></th:block>
                                </span>
                            </td>
                            <td th:if="${showName}" th:classappend="${@thymeleafConfig.isTheDay()} ? 'ctrl-alt-right'">
                                <span class="single-line" th:text="${request.requesterEntityName()}"></span>
                            </td>
                            <td
                                th:if="${request.room != null && request.room.building != null}"
                                th:classappend="${@thymeleafConfig.isTheDay()} ? 'ctrl-alt-right'">
                                <span class="single-line" th:text="|${request.room.building.name} - ${request.room.name}|"></span>
                            </td>
                            <td th:if="${request.onlineMode != null}" th:classappend="${@thymeleafConfig.isTheDay()} ? 'ctrl-alt-right'">
                                <span class="single-line" th:text="|${'@Online'} - ${request.onlineMode.displayName}|"></span>
                            </td>
                            <td th:classappend="${@thymeleafConfig.isTheDay()} ? 'ctrl-alt-right'">
                                <div class="flex vertical gap-0">
                                    <span class="single-line" th:text="|${request.assignment.name} (${request.assignment.module.name})|"></span>
                                    <span class="font-100" th:text="${#temporals.format(request.createdAt, 'yyyy-MM-dd HH:mm')}"></span>
                                </div>
                            </td>
                            <td th:classappend="${@thymeleafConfig.isTheDay()} ? 'ctrl-alt-right'">
                                <span class="single-line" th:text="${request.organizationName()}"></span>
                            </td>
                            <td
                                th:unless="${showOnlyRelevant}"
                                th:id="'assigned-' + ${request.id}"
                                th:classappend="${@thymeleafConfig.isTheDay()} ? 'ctrl-alt-right'">
                                <div class="flex vertical gap-0" th:if="${request.eventInfo.assignedTo != null}">
                                    <span class="single-line" th:text="${request.eventInfo.assignedTo.displayName}">Name</span>
                                    <span class="font-100" th:text="${#temporals.format(request.eventInfo.lastAssignedAt, 'HH:mm')}"></span>
                                </div>
                            </td>
                            <td th:unless="${showOnlyRelevant}" th:classappend="${@thymeleafConfig.isTheDay()} ? 'ctrl-alt-right'">
                                <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, 'HH:mm')}"></span>
                                </div>
                            </td>
                        </tr>
                    </th:block>
                </tbody>
            </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>

            <!-- Changes made to this template should be made accordingly to the template in request/list/request-table.html -->
            <script id="request-entry-template" type="text/x-handlebars-template">
                <tr class="request" data-status="pending" id="request-{{id}}" data-request="{{id}}" role="link" tabindex="0">
                    <td class="fit-content">
                        <span class="chip single-line" th:classappend="${@thymeleafConfig.isTheDay()} ? 'ctrl-alt-right'" id="status-{{id}}">
                            New
                        </span>
                    </td>
                    <td th:classappend="${@thymeleafConfig.isTheDay()} ? 'ctrl-alt-right'">
                        {{requestTypeDisplayName}}
                    </td>
                    {{#if roomName}}
                        {{#if buildingName}}
                            <td th:classappend="${@thymeleafConfig.isTheDay()} ? 'ctrl-alt-right'">
                                <span class="single-line">
                                    {{buildingName}} - {{roomName}}
                                </span>
                            </td>
                        {{/if}}
                    {{else if onlineMode}}
                        <td th:classappend="${@thymeleafConfig.isTheDay()} ? 'ctrl-alt-right'">
                            <span class="single-line">
                                @Online - {{onlineModeDisplayName}}
                            </span>
                        </td>
                    {{/if}}
                    <td th:classappend="${@thymeleafConfig.isTheDay()} ? 'ctrl-alt-right'">
                        <div class="flex vertical gap-0">
                            <span class="single-line">
                                {{assignmentName}} ({{moduleName}})
                            </span>
                            <span class="font-100">
                                Right now
                            </span>
                        </div>
                    </td>
                    <td th:classappend="${@thymeleafConfig.isTheDay()} ? 'ctrl-alt-right'">
                        <span class="single-line">
                            {{organizationName}}
                        </span>
                    </td>
                </tr>
            </script>
        </th:block>
    </body>
</html>
