<!--

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

-->
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorate="~{container}">
    <!--@thymesVar id="request" type="nl.tudelft.queue.dto.view.RequestViewDTO"-->
    <!--@thymesVar id="prevRequests" type="java.util.List<nl.tudelft.queue.dto.view.RequestViewDTO>"-->

    <!--@thymesVar id="edition" type="nl.tudelft.labracore.api.dto.EditionDetailsDTO"-->
    <!--@thymesVar id="assistant" type="nl.tudelft.labracore.api.dto.PersonDetailsDTO"-->

    <head>
        <title th:text="${'Request #' + request.id}"></title>

        <style>
            .btn-group.feedback > .btn.focus {
                transition: 0.5s;
                outline: none !important;
                box-shadow: none;
            }

            .btn-group.feedback > .btn.active:nth-child(1) {
                background: #c23a2c !important;
                border: 1px solid #ad3427 !important;
            }

            .btn-group.feedback > .btn.active:nth-child(2) {
                background: #f78921 !important;
                border: 1px solid #f67c09 !important;
            }

            .btn-group.feedback > .btn.active:nth-child(3) {
                background: #ead234 !important;
                border: 1px solid #e8cd1d !important;
            }

            .btn-group.feedback > .btn.active:nth-child(4) {
                background: #76d142 !important;
                border: 1px solid #68c931 !important;
            }

            .btn-group.feedback > .btn.active:nth-child(5) {
                background: #489b52 !important;
                border: 1px solid #408949 !important;
            }

            .btn-group.feedback > .btn:hover:nth-child(1) {
                background: #c23a2c !important;
                border: 1px solid #ad3427 !important;
            }

            .btn-group.feedback > .btn:hover:nth-child(2) {
                background: #f78921 !important;
                border: 1px solid #f67c09 !important;
            }

            .btn-group.feedback > .btn:hover:nth-child(3) {
                background: #ead234 !important;
                border: 1px solid #e8cd1d !important;
            }

            .btn-group.feedback > .btn:hover:nth-child(4) {
                background: #76d142 !important;
                border: 1px solid #68c931 !important;
            }

            .btn-group.feedback > .btn:hover:nth-child(5) {
                background: #489b52 !important;
                border: 1px solid #408949 !important;
            }
        </style>
    </head>

    <body>
        <main layout:fragment="content">
            <div class="breadcrumbs mb-5">
                <a th:href="@{/}">Home</a>
                <span>&gt;</span>
                <a th:href="@{/editions}">Courses</a>
                <span>&gt;</span>
                <a th:href="@{/request/{id}(id=${request.id})}" th:text="${'Request #' + request.id}"></a>
            </div>

            <th:block layout:fragment="request-header"></th:block>

            <div class="flex gap-7 | md:vertical">
                <div class="flex vertical gap-5">
                    <th:block layout:fragment="feedback"></th:block>
                    <th:block layout:fragment="history"></th:block>
                </div>

                <div class="grow">
                    <th:block layout:fragment="request-info"></th:block>
                </div>

                <script src="/js/map_loader.js"></script>
                <script type="text/javascript" th:inline="javascript">
                    const roomId = /*[[${request.room != null} ? ${request.room.id}]]*/ 0;
                    updateRequestInfo(roomId);
                </script>
            </div>
        </main>
    </body>
</html>
