<!--

    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">
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta http-equiv="Content-Language" content="en_GB" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />

        <meta name="description" content="Queue system" />
        <meta name="author" content="" />
        <meta name="_csrf_header" th:content="${_csrf.headerName}" />
        <meta name="_csrf" th:content="${_csrf.token}" />

        <link rel="icon" href="/favicon.ico" />

        <title th:unless="${@thymeleafConfig.isTheDay()}">Queue</title>
        <title th:if="${@thymeleafConfig.isTheDay()}">Stack</title>
        <title>Queue</title>

        <link rel="stylesheet" href="/webjars/chihuahui/main.css" />
        <link rel="stylesheet" href="/webjars/font-awesome/css/all.css" />

        <script type="module" src="/webjars/chihuahui/components.js"></script>
        <script src="/webjars/chihuahui/theme.js"></script>
        <script src="/webjars/chihuahui/toast.js"></script>
        <script src="/webjars/jquery/jquery.min.js"></script>
        <script src="/webjars/jquery-cookie/jquery.cookie.js"></script>

        <script src="/webjars/sockjs-client/sockjs.min.js"></script>
        <script src="/webjars/stomp-websocket/stomp.min.js"></script>

        <script src="/js/global.js"></script>

        <script type="application/javascript">
            const csrfToken = $("meta[name='_csrf']").attr("content");
            $.ajaxSetup({
                headers: {
                    "X-CSRF-TOKEN": csrfToken,
                },
            });
        </script>

        <script th:if="${#authenticatedP != null}" th:inline="javascript" type="application/javascript">
            //<![CDATA[
            const authenticatedId = /*[[${#authenticatedP.id}]]*/ -1;
            //]]>
        </script>

        <style>
            :root:not([data-theme]),
            :root[data-theme="tu"] {
                --primary-hue: 193deg;
                --primary-saturation: 100%;

                --header-colour: #00a6d6;
                --primary-colour: #00a6d6;
                --primary-active-colour: var(--primary-300);
                --background-colour: #f7f7f7;
            }

            :root[data-theme="light"] {
                color-scheme: light;

                --header-colour: #b21c1a;

                --primary-hue: 220deg;
                --primary-saturation: 90%;

                --background-colour: #f5f5f5;

                --surface-header-colour: hsl(1deg, 60%, 80%);
                --on-surface-header-colour: hsl(1deg, 60%, 10%);
            }
            :root[data-theme="dark"] {
                color-scheme: dark;

                --header-colour: #801513;

                --primary-hue: 220deg;
                --primary-saturation: 90%;

                --primary-colour: var(--primary-700);
                --secondary-colour: var(--secondary-600);
            }
            [data-if-theme="dark"] {
                display: none;
            }
            :root[data-theme="dark"] [data-if-theme="dark"] {
                display: initial;
            }
            :root[data-theme="dark"] [data-if-theme="light"] {
                display: none;
            }
        </style>
    </head>

    <body>
        <th:block layout:fragment="container"></th:block>
    </body>
</html>
