<!--

    Queue - A Queueing system that can be used to handle labs in higher education
    Copyright (C) 2016-2024  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="request" type="nl.tudelft.queue.dto.view.requests.LabRequestViewDTO"-->
    <!--@thymesVar id="prevRequests" type="java.util.List<nl.tudelft.queue.dto.view.requests.LabRequestViewDTO>"-->
    <!--@thymesVar id="#authenticatedP" type="nl.tudelft.labracore.lib.security.user.Person"-->

    <body>
        <th:block th:fragment="request-info">
            <div class="surface p-0">
                <div class="surface__header flex space-between align-center">
                    <h3 class="title">Info</h3>
                    <div class="flex align-center gap-3">
                        <th:block>
                            <form
                                th:if="${@permissionService.canRevokeRequest(request.data) and #authenticatedP.id == request.getRequester().getId()}"
                                th:action="@{/request/{id}/revoke(id=${request.id})}"
                                method="post">
                                <button
                                    type="submit"
                                    th:if="${@permissionService.canRevokeRequest(request.data)}"
                                    class="button p-less"
                                    data-type="error"
                                    data-style="outlined">
                                    Revoke request
                                </button>
                            </form>
                        </th:block>
                        <!--                        <div class="menu-wrapper">-->
                        <!--                            <button aria-haspopup="menu" class="fa-solid fa-ellipsis-vertical button" aria-controls="report-menu"></button>-->
                        <!--                            <ul class="menu" th:id="report-menu" role="menu">-->
                        <!--                                <li>-->
                        <!--                                    <a th:href="@{/report/{id}(id=${request.id})}" role="menuitem">Report user in this request</a>-->
                        <!--                                </li>-->
                        <!--                            </ul>-->
                        <!--                        </div>-->
                    </div>
                </div>

                <div class="surface__content flex vertical">
                    <dl>
                        <dt class="fw-500">Request by</dt>
                        <dd th:text="${request.requester.displayName}"></dd>

                        <th:block th:if="${request.getStudentGroup().getMembers().size() > 1}">
                            <dt class="fw-500 mt-3">Group</dt>
                            <dd th:text="${request.studentGroupName()}"></dd>
                        </th:block>

                        <dt class="fw-500 mt-3">Course</dt>
                        <dd th:text="|${request.edition.course.name} (${request.edition.course.code})|"></dd>

                        <dt class="fw-500 mt-3">Lab</dt>
                        <dd th:text="${request.session.name}"></dd>

                        <dt class="fw-500 mt-3">Assignment</dt>
                        <dd th:text="${request.assignment.name}"></dd>

                        <th:block th:if="${request.room != null}">
                            <dt class="fw-500 mt-3">Room</dt>
                            <dd th:text="|${request.room.building.name} - ${request.room.name}|"></dd>
                        </th:block>

                        <th:block th:if="${request.onlineMode != null}">
                            <dt class="fw-500 mt-3">Online Mode</dt>
                            <dd th:text="|${'@Online'} - ${request.onlineMode.displayName}|"></dd>
                        </th:block>

                        <dt class="fw-500 mt-3">Type</dt>
                        <dd th:text="${request.requestType.displayName()}"></dd>

                        <th:block th:if="${request.qSession.isBilingual}">
                            <dt class="fw-500 mt-3">Language</dt>
                            <th:block th:switch="${request.language.name()}">
                                <dd th:case="'ANY'">English or Dutch</dd>
                                <dd th:case="'DUTCH_ONLY'">Dutch</dd>
                            </th:block>
                        </th:block>

                        <th:block th:unless="${#strings.isEmpty(request.question)}">
                            <dt class="fw-500 mt-3">Question</dt>
                            <dd th:text="${request.question}"></dd>
                        </th:block>

                        <th:block th:unless="${#strings.isEmpty(request.comment)}">
                            <dt class="fw-500 mt-3">Comment</dt>
                            <dd th:text="${request.comment}"></dd>
                        </th:block>

                        <th:block
                            th:if="${request.getOnlineMode() == T(nl.tudelft.queue.model.enums.OnlineMode).JITSI && request.getJitsiRoom() != null && @permissionService.canViewRequestJitsiRoom(request.id)}">
                            <dt class="fw-500 mt-3">Link to Jitsi Room</dt>
                            <dd class="flex gap-2 align-center">
                                <a th:href="@{${@jitsiService.getJitsiRoomUrl(request.data)}}" th:target="_blank" class="button p-min">
                                    <i class="fa fa-link" aria-hidden="true"></i>
                                </a>
                                <a
                                    class="link"
                                    th:href="@{${@jitsiService.getJitsiRoomUrl(request.data)}}"
                                    th:text="${@jitsiService.getJitsiRoomUrl(request.data)}"></a>
                            </dd>
                        </th:block>

                        <th:block th:if="${assistant != null}">
                            <dt class="fw-500 mt-3">Assistant</dt>
                            <dd th:text="${assistant.displayName}"></dd>
                        </th:block>

                        <dt class="fw-500 mt-3">Status</dt>
                        <dd th:include="request/status :: status(${request.eventInfo.status})"></dd>

                        <th:block
                            th:if="${!#strings.isEmpty(request.eventInfo.reasonForAssistant) && @permissionService.canViewRequestAssistantReason(request.id)}">
                            <dt class="fw-500 mt-3">Reason (TA only)</dt>
                            <dd th:text="${request.eventInfo.reasonForAssistant}"></dd>
                        </th:block>

                        <th:block th:unless="${#strings.isEmpty(request.eventInfo.reasonForStudent)}">
                            <dt class="fw-500 mt-3">Reason</dt>
                            <dd th:text="${request.eventInfo.reasonForStudent}"></dd>
                        </th:block>
                    </dl>

                    <div class="grid col-4 mb-3 gap-3" th:if="${@permissionService.canFinishRequest(request.id)}">
                        <a th:href="@{/request/{id}/approve(id=${request.id})}" class="button" data-type="accept">
                            <span class="fa-solid fa-check mr-1"></span>
                            Approve
                        </a>
                        <a th:href="@{/request/{id}/reject(id=${request.id})}" class="button" data-type="error">
                            <span class="fa-solid fa-xmark mr-1"></span>
                            Reject
                        </a>
                        <a th:href="@{/request/{id}/forward(id=${request.id})}" class="button">
                            <span class="fa-solid fa-mail-forward mr-1"></span>
                            Forward
                        </a>
                        <a th:href="@{/request/{id}/not-found(id=${request.id})}" class="button" data-type="warning">
                            <span class="fa-solid fa-question mr-1"></span>
                            Not found
                        </a>
                    </div>
                </div>
            </div>

            <div id="image-holder" class="mt-5" hidden>
                <div class="surface p-0">
                    <h3 class="surface__header">Room map</h3>
                    <div class="surface__content">
                        <img alt="Room map" />
                    </div>
                </div>
            </div>

            <div class="mt-5" th:if="${@permissionService.canViewRequestAssistantReason(request.id)}">
                <h3 class="font-500 mb-3">Previous</h3>

                <p th:if="${#lists.isEmpty(prevRequests)}">
                    There are no previous requests by
                    <strong class="fw-500" th:text="${request.requester.displayName}"></strong>
                    for
                    <strong class="fw-500" th:text="${request.assignment.name}"></strong>
                    .
                </p>

                <ul class="surface list divided pbl-3 pil-5" role="list" th:unless="${#lists.isEmpty(prevRequests)}">
                    <li class="flex vertical gap-0 pbl-3" th:each="prevRequest : ${prevRequests}">
                        <div>
                            <a class="link" th:href="@{/request/{id}(id=${prevRequest.id})}" th:text="|Request #${prevRequest.id}|"></a>
                            <span>
                                <th:block th:if="${prevRequest.eventInfo.status.isRevoked()}">
                                    was
                                    <strong class="fw-500">revoked</strong>
                                    .
                                </th:block>

                                <th:block th:if="${prevRequest.eventInfo.status.isPending()}">
                                    is
                                    <strong class="fw-500">pending</strong>
                                    .
                                </th:block>

                                <th:block th:if="${prevRequest.eventInfo.status.isProcessing()}">
                                    is being
                                    <strong class="fw-500">processed</strong>
                                    by
                                    <strong class="fw-500" th:text="${prevRequest.eventInfo.assignedTo.displayName}"></strong>
                                </th:block>

                                <th:block th:if="${prevRequest.eventInfo.status.isHandled()}">
                                    was
                                    <strong class="fw-500" th:text="${prevRequest.eventInfo.status.displayName.toLowerCase()}"></strong>
                                    by
                                    <strong class="fw-500" th:text="${prevRequest.eventInfo.assignedTo.displayName}"></strong>
                                    <th:block
                                        th:if="${@permissionService.canViewRequestAssistantReason(prevRequest.id)} and ${prevRequest.eventInfo.reasonForAssistant != null} and ${!prevRequest.eventInfo.reasonForAssistant.isBlank()}"
                                        th:text="'because [' + ${prevRequest.eventInfo.reasonForAssistant} + ']'"></th:block>
                                </th:block>
                            </span>
                        </div>
                        <span
                            class="font-200"
                            th:if="${prevRequest.eventInfo.status.isFinished()}"
                            th:text="${#temporals.format(prevRequest.eventInfo.lastEventAt, 'dd MMMM yyyy')}"></span>
                    </li>
                </ul>
            </div>
        </th:block>
    </body>
</html>
