<!--

    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" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorate="~{layout}">
    <head>
        <link rel="stylesheet" href="/css/presentation.css" />
        <script src="/webjars/momentjs/min/moment.min.js"></script>
        <script>
            document.addEventListener("DOMContentLoaded", async function () {
                await navigator.wakeLock.request("screen");
            });
        </script>
    </head>

    <body>
        <main layout:fragment="container" style="height: 100%; container-type: size">
            <form class="flex vertical align-center" method="get" th:if="${room == null}">
                <h2 class="font-800 mbl-5">Select room</h2>
                <div class="grid auto-fit" style="min-width: var(--content-width)">
                    <button
                        name="room"
                        th:value="${room.id}"
                        th:each="room : ${lab.session.rooms}"
                        th:text="|${room.building.name} - ${room.name}|"
                        class="button"></button>
                </div>
            </form>

            <div class="presentation" th:if="${room != null}" layout:fragment="presentation">
                <div class="slide" th:if="${presentation.defaultSlides.showCurrentRoom}">
                    <div class="slide__sidebar">
                        <img th:src="@{/img/tudelft_logo_light.png}" alt="TU Delft" />
                    </div>

                    <h2 class="slide__title">You are in</h2>

                    <div class="slide__content">
                        <div>
                            <h1
                                style="color: var(--primary-colour); text-align: center; font-size: 7cqw; font-weight: 500"
                                th:text="|${room.building.name} - ${room.name}|"></h1>

                            <div class="flex justify-center">
                                <div id="image-holder" hidden>
                                    <img style="height: 24cqw" alt="Room map" />
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="slide__footer">
                        <span style="color: var(--primary-colour)">https://queue.tudelft.nl/</span>
                        <span></span>
                    </div>
                </div>

                <div class="slide" th:if="${presentation.defaultSlides.showQueueSite}">
                    <div class="slide__sidebar">
                        <img th:src="@{/img/tudelft_logo_light.png}" alt="tu delft" />
                    </div>

                    <h2 class="slide__title">Do you have a question?</h2>

                    <div class="slide__content">
                        <p style="font-size: 3cqw">
                            Enqueue at
                            <span class="fw-500" style="color: var(--primary-colour)">https://queue.tudelft.nl/</span>
                            .
                        </p>
                    </div>

                    <div class="slide__footer">
                        <span></span>
                        <span th:text="|This is ${room.building.name} - ${room.name}|"></span>
                    </div>
                </div>

                <div class="slide" th:if="${presentation.defaultSlides.showLabInfo}">
                    <div class="slide__sidebar">
                        <img th:src="@{/img/tudelft_logo_light.png}" alt="tu delft" />
                    </div>

                    <h2 class="slide__title">Session Information</h2>

                    <div class="slide__content">
                        <div th:utext="${lab.extraInfo}" style="width: 100%"></div>
                    </div>

                    <div class="slide__footer">
                        <span style="color: var(--primary-colour)">https://queue.tudelft.nl/</span>
                        <span th:text="|This is ${room.building.name} - ${room.name}|"></span>
                    </div>
                </div>

                <div class="slide" th:if="${presentation.defaultSlides.showFeedbackReminder}">
                    <div class="slide__sidebar">
                        <img th:src="@{/img/tudelft_logo_light.png}" alt="tu delft" />
                    </div>

                    <h2 class="slide__title">TA Feedback</h2>

                    <div class="slide__content">
                        <div class="flex vertical p-0 align-center" style="font-size: 3cqw">
                            <p style="text-align: center">
                                Did the TA help you well?
                                <br />
                                Can they do something to explain it better?
                            </p>
                            <p>Leave feedback. We appreciate it!</p>
                            <p>Your feedback is fully anonymous.</p>
                        </div>
                    </div>

                    <div class="slide__footer">
                        <span style="color: var(--primary-colour)">https://queue.tudelft.nl/</span>
                        <span th:text="|This is ${room.building.name} - ${room.name}|"></span>
                    </div>
                </div>

                <div class="slide" th:if="${presentation.defaultSlides.showExamEnrolment}">
                    <div class="slide__sidebar">
                        <img th:src="@{/img/tudelft_logo_light.png}" alt="tu delft" />
                    </div>

                    <h2 class="slide__title">Enrol for your exams!</h2>

                    <div class="slide__content">
                        <div class="flex vertical align-center gap-0">
                            <h1>My TU Delft</h1>
                            <h2 style="color: var(--primary-colour)">https://my.tudelft.nl/</h2>
                        </div>
                    </div>

                    <div class="slide__footer">
                        <span style="color: var(--primary-colour)">https://queue.tudelft.nl/</span>
                        <span th:text="|This is ${room.building.name} - ${room.name}|"></span>
                    </div>
                </div>

                <div class="slide" th:each="slide : ${presentation.customSlides}">
                    <div class="slide__sidebar">
                        <img th:src="@{/img/tudelft_logo_light.png}" alt="tu delft" />
                    </div>
                    <h2 class="slide__title" th:text="${slide.title}"></h2>
                    <div class="slide__content">
                        <div th:utext="${slide.content}" style="width: 100%"></div>
                    </div>
                    <div class="slide__footer">
                        <span style="color: var(--primary-colour)">https://queue.tudelft.nl/</span>
                        <span th:text="|This is ${room.building.name} - ${room.name}|"></span>
                    </div>
                </div>

                <div class="slide" id="session-over-slide">
                    <div class="slide__sidebar">
                        <img th:src="@{/img/tudelft_logo_light.png}" alt="tu delft" />
                    </div>
                    <h2 class="slide__title">This session is now over</h2>
                    <div class="slide__content"></div>
                    <div class="slide__footer"></div>
                </div>

                <script src="/js/map_loader.js"></script>
                <script type="text/javascript" th:inline="javascript">
                    const roomId = /*[[${room.id}]]*/ 0;
                    updateRequestInfo(roomId);
                </script>
                <script type="text/javascript" th:inline="javascript">
                    let sessionEnd = /*[[${lab.session.endTime}]]*/ null;
                </script>

                <script>
                    function prevSlide() {
                        const current = document.querySelector("[data-current]");
                        let prev = current.previousElementSibling;
                        if (prev == null || !prev.classList.contains("slide")) {
                            prev = document.querySelector(".slide:last-of-type");
                            if (prev.id === "session-over-slide") {
                                prev = prev.previousElementSibling;
                            }
                        }
                        current.removeAttribute("data-current");
                        prev.setAttribute("data-current", "");
                    }
                    function nextSlide() {
                        const current = document.querySelector("[data-current]");
                        let next = current.nextElementSibling;
                        if (next == null || !next.classList.contains("slide") || next.id === "session-over-slide") {
                            next = document.querySelector(".slide:first-of-type");
                        }
                        current.removeAttribute("data-current");
                        next.setAttribute("data-current", "");
                    }

                    document.addEventListener("DOMContentLoaded", function () {
                        const interval = setInterval(nextSlide, 10000);

                        const keyHandler = function (event) {
                            switch (event.key) {
                                case "ArrowLeft":
                                    prevSlide();
                                    break;
                                case "ArrowRight":
                                    nextSlide();
                                    break;
                            }
                        };

                        setInterval(function () {
                            if (moment(sessionEnd).isBefore(moment())) {
                                clearInterval(interval);
                                document.querySelector("[data-current]").removeAttribute("data-current");
                                document.getElementById("session-over-slide").setAttribute("data-current", "");
                                document.removeEventListener("keydown", keyHandler);
                            }
                        }, 1000);

                        document.querySelector(".slide:first-of-type").setAttribute("data-current", "");
                        document.addEventListener("keydown", keyHandler);
                    });
                </script>
            </div>
        </main>
    </body>
</html>
