<!--

    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" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorate="~{lab/view}">
    <!--@thymesVar id="qSession" type="nl.tudelft.queue.dto.view.LabViewDTO"-->

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

    <body>
        <th:block layout:fragment="session-info">
            <div class="grid auto-fit">
                <th:block th:replace="lab/view/components/lab-info :: lab-info"></th:block>
                <th:block layout:fragment="additional-lab-info"></th:block>
            </div>

            <div class="surface p-0" th:if="${!#strings.isEmpty(qSession.extraInfo)}">
                <h3 class="surface__header">Extra information for this lab</h3>
                <div class="surface__content" th:utext="${qSession.extraInfo}"></div>
            </div>

            <dialog th:if="${param.requestFinished != null}" id="feedback-reminder" class="dialog">
                <div class="flex vertical p-7">
                    <h3 class="font-500 underlined">Give feedback</h3>
                    <p>Do you want to give feedback to your TA?</p>
                    <div>
                        <input type="checkbox" id="no-feedback-reminder" />
                        <label for="no-feedback-reminder">Do not show this again</label>
                        <p class="font-200">(you can always give feedback by going to your 'Request history' in the top right)</p>
                    </div>
                    <div class="flex space-between" id="feedback-buttons">
                        <button data-style="outlined" class="button p-less" data-cancel>No feedback</button>
                        <a th:href="@{/request/{id}(id=${param.requestFinished})}" class="button p-less">Give feedback</a>
                    </div>
                </div>
            </dialog>

            <script>
                const url = new URL(window.location.href);
                if (url.searchParams.has("requestFinished") && localStorage.getItem("do-not-show-feedback-reminders") !== "true") {
                    document.getElementById("feedback-reminder").showModal();
                    document.activeElement.blur();
                }
                document.addEventListener("DOMContentLoaded", function () {
                    document
                        .getElementById("feedback-buttons")
                        .querySelectorAll(".button")
                        .forEach(b =>
                            b.addEventListener("click", function () {
                                const doNotShowAgain = document.getElementById("no-feedback-reminder").checked;
                                if (doNotShowAgain) {
                                    localStorage.setItem("do-not-show-feedback-reminders", "true");
                                }
                            })
                        );
                });
            </script>
        </th:block>
    </body>
</html>
