<!--
SPDX-FileCopyrightText: 2024 Nicco Kunzmann and Open Web Calendar Contributors <https://open-web-calendar.quelltext.eu/>

SPDX-License-Identifier: GPL-2.0-only
-->

<!DOCTYPE html>
<html lang="{{ language }}">
    <!-- Mostly copied from https://docs.dhtmlx.com/scheduler/howtostart_nodejs.html#step2addingschedulertothepage -->
    <head>
        <title>{{ specification["title"] | safe }}</title>
        <meta charset="utf-8">
        <link rel="alternate" type="text/calendar" href="/calendar.ics{{ get_query_string() }}" />
        <script type="text/javascript">
            var specification = {{ specification | tojson | safe }};
        </script>
        <!-- scheduler -->
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script src="js/dhtmlx/dhtmlxscheduler.js"></script>
        <script src="js/calendar.js"></script>
        <script src="js/signup.js"></script>
        <script src="js/common.js"></script>
        <link href="css/dhtmlx/dhtmlxscheduler_material/fonts.googleapis.com/family-Roboto-400-500-600.css"
            rel="stylesheet" type="text/css">
        <link href="css/dhtmlx/dhtmlxscheduler.css"
            rel="stylesheet" type="text/css">
        <link href="css/dhtmlx/style.css"
            rel="stylesheet" type="text/css">
        <link rel="icon" type="image/x-icon" href="{{ specification.favicon }}">
        <!-- see https://docs.dhtmlx.com/scheduler/localization.html -->
        <script src="locale_{{ language }}.js" charset="utf-8"></script>
        {% for link in specification.css_url %}
        <link href="{{ link }}" rel="stylesheet" type="text/css">
        {% endfor %}
        <style>
            html, body{
                margin:0px;
                padding:0px;
                height:100%;
                overflow:hidden;
            }
            /* Event Status */
            {% if specification['style-event-status-tentative'] %}.STATUS-TENTATIVE { font-style: italic; }{% endif %}
            {% if specification['style-event-status-confirmed'] %}.event { font-weight: normal; } .STATUS-CONFIRMED { font-weight: bold; }{% endif %}
            {% if specification['style-event-status-cancelled'] %}.STATUS-CANCELLED { text-decoration: line-through; }{% endif %}
            /* participants */
            {% if not specification['show_participant_status'] %}.PARTICIPANT .status { display: none; }{% endif %}
            {% if not specification['show_participant_type'] %}.PARTICIPANT .type { display: none; }{% endif %}
            {% if not specification['show_participant_role'] %}.PARTICIPANT .role { display: none; }{% endif %}
            {{ specification['css'] | safe }}
        </style>
        {% for link in specification.javascript_url %}
        <script src="{{ link }}" charset="utf-8"></script>
        {% endfor %}
        <script type="text/javascript">
            function onCalendarInitialized() {
                {{ specification.javascript | replace('</script', '</scr\\ipt') | safe }}
            };
        </script>
    </head>
    <body>
        <div class="hamburger-menu">
            <input id="menu__toggle" type="checkbox" class="menu__toggle"/>
            <label class="menu__btn burger-menu-label" for="menu__toggle">
                <span></span>
            </label>
            <div class="menu__box" id="menu-meta-data">
                {% if specification['menu_shows_title'] %}<div class="menu-text menu-calendar-title">{{ specification["title"] }}</div>{% endif %}
                {% if specification['menu_shows_description'] %}<div class="menu-text menu-calendar-description">{{ specification["description"] }}</div>{% endif %}
            </div>
        </div>
        <div id="scheduler_here" class="dhx_cal_container"
            style='width:100%; height:100%;'>
            <div class="dhx_cal_navline"></div>
            <div class="dhx_cal_header"></div>
            <div class="dhx_cal_data"></div>
        </div>
        <div id="loader" class="fullsize"></div>
        <div id="errorWindow" class="hidden fullsize">
            <a class="closeButton" href="javascript:toggleErrorWindow();">X</a>
        </div>
        <div id="email-signup" class="fullsize hidden">
            <div class="sign-up-content">
                <input type="text" placeholder="{{ string("calendar.signup-name") }}" id="signup-name" class="item"/>
                <input type="text" placeholder="{{ string("calendar.signup-email") }}" id="signup-email" class="item"/>
                <div class="row">
                    <button class="item" id="sign-up-button">{{ string("calendar.icon_signup") }}</button>
                    <button class="item" onclick="cancelSignUp()">❌</button>
                </div>
            </div>
        </div>
        <div class="status-window">
            <a class="item" id="errorStatusIcon" href="javascript:toggleErrorWindow();">!</a>
            <a class="item" id="infoIcon" href="/about.html{{ get_query_string() | safe }}" target="{{ specification['target'] }}">?</a>
        </div>
    </body>
</html>
