<!--
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 }}">
    <head>
        <title>{{ string("project-name") }}</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link rel="alternate" type="text/calendar" href="/calendar.ics{{ get_query_string() }}" />
        <script type="text/javascript">
            const specification = {{ specification | tojson | safe }};
            const language = {{ language | tojson | safe }};
            /* Translation for dynamic elements. */
            const translations = {
                "button-encrypt": {{ string("button-encrypt") | tojson }},
                "button-encrypted": {{ string("button-encrypted") | tojson }},
                "button-edit": {{ string("button-edit") | tojson }},
                "button-remove": {{ string("button-remove") | tojson }},
            };
        </script>
        <link href="css/common.css" rel="stylesheet" type="text/css">
        <link href="css/index.css" rel="stylesheet" type="text/css">
        <link rel="icon" type="image/x-icon" href="{{ specification["favicon"] }}">
        <script src="js/index.js"></script>
        <script src="js/navigation.js"></script>
        <script src="js/common.js"></script>
        <script src="configuration.js"></script>
        {%- for name, code, percent in configuration["index"]["languages"]: %}
            <link rel="alternate" hreflang="{{code}}" href="/index.html?language={{code}}" />
        {%- endfor %}
        <style>
            {%- if not configuration["encryption"] %}
            .encryption-required {
                display: none;
            }
            {%- endif %}
        </style>
    </head>
    <body>
        <nav id="navigation" class="dark">
            <div class="navcontent">
                <a id="navigate-previous" class="needs-previous-section"></a>
                <h1><a id="currect-section" ></a></h1>
                <ul id="sections-dropdown">
                </ul>
                <a id="navigate-next" class="needs-next-section"></a>
            </div>
        </nav>
        <div class="flexcontainer">
        <main>
            <section id="configure-urls">  
                <h2>{{ html("project-name") }}</h2>
                <p>
                    {{ html("about") }}
                    {{ html("supported-standards") }}
                </p>
                <p>
                    {{ html("calendar-urls") }}
                </p>
                <div id="add-url-paragraph">
                    <input type="text" id="add-url-url" placeholder="{{ string("add-url-placeholder-url") }}" />
                    <div id="credentials">
                        <input type="checkbox" id="add-url-credentials-checkbox" checked onchange="toggleUrlCredentials()" />
                        <label for="add-url-credentials-checkbox" id="add-url-credentials-label" class="default-visible">
                            {{ string("add-url-calendar-public") }}
                        </label>
                        <input class="default-hidden" type="text" id="add-url-username" placeholder="{{ string("add-url-placeholder-username") }}" />
                        <input class="default-hidden" type="password" id="add-url-password" placeholder="{{ string("add-url-placeholder-password") }}" />
                        <button class="default-hidden" onclick="togglePasswordVisibility('add-url-password')" id="toggle-url-password-visibility"/>👁</button>
                        <button id="add-url-button" onclick="addURLFromInput()">{{ html("add-url-button") }}</button>
                    </div>
                    <div id="caldav-options" class="">
                        <div class="line">
                            {{ html("caldav-choose-calendar") }}
                            <select id="add-url-calendars"></select>
                        </line>
                        <div class="line">
                            <label for="caldav-enable-sign-up">{{ html("caldav-allow-sign-up") }}<input type="checkbox" id="caldav-enable-sign-up" /></label>
                        </div>
                    </div>
                </div>
                <p>
                    {{ html("section-customization") }}
                </p>
                <ul id="calendar-urls" class="no-style-listing">
                </ul>
                <p class="encryption-required">
                    {{ html("password-urls") }}
                </p>
                <p class="encryption-required action-paragraph">
                    🔑
                    <input type="password" id="encryption-password" />
                    <button onclick="togglePasswordVisibility('encryption-password')" id="toggle-password-visibility">👁</button>
                    <button onclick="decryptURLs()">🔓 {{ html("decrypt-urls") }}</button>
                </p>
            </section>
            <section class="languages" id="configure-languages">
                <h2>{{ html("language-title") }}</h2>
                <p>
                    {%- for name, code, percent in configuration["index"]["languages"]: %}
                        <a class="{{ ('current' if code == specification['language'] else '') }}" href="/index.html?language={{code}}#configure-languages">{{ name }}
                        {%- if percent != 100 -%}
                            ({{percent}}%)
                        {% endif -%}
                        </a>
                    {%- endfor %}
                    <a href="{{ specification['translate'] }}">{{ html("translate") }}</a>
                </p>
                <div>
                    <fieldset>
                        <legend>{{ html("language-description") }}</legend>
                        <div id="section_prefer_browser_language_false">
                            <input type="radio" name="browser-language" id="prefer_browser_language_false" value="false"  />
                            <label for="prefer_browser_language_false">{{ html("language-browser-false") }}</label>
                            <select id="select-language"></select>
                        </div>
                        <div id="section_prefer_browser_language_true">
                            <input type="radio" name="browser-language" id="prefer_browser_language_true" value="true" />
                            <label for="prefer_browser_language_true">{{ html("language-browser-true") }}</label>
                            <span id="language-chosen"></span>
                        </div>
                    </fieldset>
                    <a href="{{ specification['translate'] }}">{{ html("translate") }}</a>
                </div>
            </section>
            <section id="configure-title">
                <h2>{{ html("title-title") }}</h2>
                <p>
                    {{ html("title-description") }}<br/>
                    <input type="text" id="calendar-title" />
                </p>
            </section>
            <section id="configure-starting-date">
                <h2>{{ html("starting-date-title") }}</h2>
                <p>
                    {{ html("starting-date-description") }}
                </p>
                <p class="action-paragraph">
                    <input type="date" id="starting-date" required pattern="\d{4}-\d{2}-\d{2}" placeholder="YYYY-MM-DD"/>
                </p>
            </section>
            <section id="configure-time-and-hour">
                <h2>Time and Hours</h2>
                <h3>{{ html("first-hour-title") }}</h3>
                <p>
                    {{ html("first-hour-description") }}<br/>
                    <input type="number" min="0" max="23" id="starting-hour" />
                </p>
                <h3>{{ html("last-hour-title") }}</h3>
                <p>
                    {{ html("last-hour-description") }}<br/>
                    <input type="number" min="1" max="24" id="ending-hour" />
                </p>
                <h3>{{ html("time-increment-title") }}</h3>
                <div>
                    {{ html("time-increment-description") }}
                    <form id="time-increment">
                        <input class="time-increment-input" type="radio" id="time-6" name="time-select" value="6" /><label for="time-6">{{ html("time-increment-10") }}</label>
                        <input class="time-increment-input" type="radio" id="time-4" name="time-select" value="4" /><label for="time-4">{{ html("time-increment-15") }}</label>
                        <input class="time-increment-input" type="radio" id="time-2" name="time-select" value="2" /><label for="time-2">{{ html("time-increment-30") }}</label>
                        <input class="time-increment-input" type="radio" id="time-1" name="time-select" value="1" /><label for="time-1">{{ html("time-increment-60") }}</label>
                    </form>
                </div>
            </section>
            <section id="configure-hour-format">
                <h2>{{ html("hour-format-title") }}</h2>
                <p>
                    {{ html("hour-format-description") }} <a href="https://docs.dhtmlx.com/scheduler/settings_format.html">{{ html("hour-format-specification-link") }}</a><br/>
                </p>
                <p class="action-paragraph">
                    <select id="select-hour-format">
                        <option value="%G:%i">24:00 - 1:15, 13:45</option>
                        <option value="%H:%i">24:00 - 01:15, 13:45</option>
                        <option value="%g:%i %a">am/pm - 1:15 am, 1:45 pm</option>
                        <option value="%h:%i %a">am/pm - 01:15 am, 1:45 pm</option>
                        <option value="%g:%i %A">AM/PM - 1:15 AM, 1:45 PM</option>
                        <option value="%h:%i %A">AM/PM - 01:15 AM, 01:45 PM</option>
                    </select>
                </p>
            </section>
            <section id="configure-skins">
                <h2>{{ html("skins-title") }}</h2>
                <p>
                    {{ html("skins-description") }}
                    <!-- see the skins at the static/css/dhtmlx folder -->
                </p>
                <p class="action-paragraph">
                    <select id="select-skin">
                        <option value="terrace">{{ string("skins-terrace") }}</option>
                        <option value="dark">{{ string("skins-dark") }}</option>
                        <option value="material">{{ string("skins-material") }}</option>
                        <option value="flat">{{ string("skins-flat") }}</option>
                        <option value="contrast-black">{{ string("skins-contrast-black") }}</option>
                        <option value="contrast-white">{{ string("skins-contrast-white") }}</option>
                    </select>
                </p>
            </section>
            <section id="configure-links">
                <h2>{{ html("links-title") }}</h2>
                <p>
                    {{ html("links-description") }}
                </p>
                <p class="action-paragraph">
                    <select id="select-target">
                        <option value="_self">{{ string("links-self") }}</option>
                        <option value="_parent">{{ string("links-parent") }}</option>
                        <option value="_blank">{{ string("links-blank") }}</option>
                        <option value="_top">{{ string("links-top") }}</option>
                    </select>
                </p>
            </section>
            <section id="configure-map">
                <h2>{{ html("map-title") }}</h2>
                <p>
                    {{ html("map-description") }}
                </p>
                <p class="action-paragraph">
                    <select id="select-map">
                        <option value="osm">{{ string("map-osm") }}</option>
                        <option value="none">{{ string("map-none") }}</option>
                        <option value="bing">{{ string("map-bing") }}</option>
                        <option value="google">{{ string("map-google") }}</option>
                        <option value="yandex">{{ string("map-yandex") }}</option>
                        <option value="geo">{{ string("map-geo") }}</option>
                        <option value="" id="map-option-custom">{{ string("map-custom") }}</option>
                    </select>
                </p>
                <div>
                    <details id="map-details">
                        <summary>{{ html("map-custom-summary") }}</summary>
                        {{ html("map-link-location-description") }}<br/>
                        <input type="text" id="map-link-location" /><br/>
                        {{ html("map-link-geo-description") }}<br/>
                        <input type="text" id="map-link-geo" /><br/>
                    </details>
                </div>
            </section>
            <section id="configure-week">
                <h2>{{ html("configure-week-title") }}</h2>
                <p>
                {{ html("configure-week-description") }}
                </p>
                <p class="action-paragraph">
                    <select id="select-start-of-week">
                        <option value="mo">{{ string("calendar.date_day_full_mon") }} - {{ string("calendar.date_day_full_sun") }}</option>
                        <option value="su">{{ string("calendar.date_day_full_sun") }} - {{ string("calendar.date_day_full_sat") }}</option>
                        <option value="work">{{ string("calendar.date_day_full_mon") }} - {{ string("calendar.date_day_full_fri") }}</option>
                    </select>
                </p>
            </section>
            <section id="configure-style">
                <h2>{{ html("style-title") }}</h2>
                <p>
                    {{ html("style-description") }}<br/>
                </p>
                <ul class="no-style-listing">
                  <li>
                    <input type="color" value="#fefefe"
                           placeholder="white" class="color-input"
                           cssTemplate=".dhx_cal_navline, .dhx_scale_bar, .dhx_cal_container, .dhx_cal_header, .dhx_cal_scale_placeholder, .dhx_scale_holder, .dhx_scale_hour {background-color: {color};}">
                    {{ html("style-background") }}
                  </li>
                  <li>
                    <input type="color" value="#fefefe"
                           placeholder="blue" class="color-input"
                           cssTemplate=".event, .dhx_cal_tab.active, .dhx_cal_tab.active:hover {background-color: {color};} .dhx_month_head, .dhx_cal_tab, .dhx_cal_today_button {color: {color};} .dhx_cal_tab, .dhx_cal_tab.active {border-color: {color};}">
                    {{ html("style-click") }}
                  </li>
                  <li>
                    <input type="color" value="#fefefe"
                           placeholder="green" class="color-input"
                           cssTemplate=".dhx_scale_holder_now, .dhx_now .dhx_month_head, .dhx_now .dhx_month_body { background-color: {color};}">
                    {{ html("style-date") }}
                  </li>
                  <li>
                    <input type="color" value="#fefefe"
                           placeholder="black" class="color-input"
                           cssTemplate=".dhx_month_body, .dhx_month_head, .dhx_cal_container { background-color: {color}; }">
                    {{ html("style-days") }}
                  </li>
                  <li>
                    <input type="color" value="#fefefe"
                           placeholder="black" class="color-input"
                           cssTemplate=".dhx_after .dhx_month_body, .dhx_before .dhx_month_body, .dhx_after .dhx_month_head, .dhx_before .dhx_month_head { background-color: {color}; }">
                    {{ html("style-days-outside") }}
                  </li>
                </ul>
                <p>
                    {{ html("style-css") }} {{ html("style-css-classes") }}
                    <code class="css-class-example">.event {}</code>
                    <code class="css-class-example">.UID-... {}</code>
                    <code class="css-class-example">.CATEGORY-... {}</code>
                    <code class="css-class-example">.CALENDAR-INDEX-0 {}</code>
                    <code class="css-class-example">.CALENDAR-INDEX-... {}</code>
                    <code class="css-class-example">.TRANSP-OPAQUE {}</code>
                    <code class="css-class-example">.TRANSP-TRANSPARENT {}</code>
                    <code class="css-class-example">.CLASS-PRIVATE {}</code>
                    <code class="css-class-example">.CLASS-CONFIDENTIAL {}</code>
                    <code class="css-class-example">.CLASS-PUBLIC {}</code>
                    <code class="css-class-example">.STATUS-TENTATIVE {}</code>
                    <code class="css-class-example">.STATUS-CONFIRMED {}</code>
                    <code class="css-class-example">.STATUS-CANCELLED {}</code>
                    <code class="css-class-example">.PRIORITY-1 {}</code>
                    <code class="css-class-example">.PRIORITY-... {}</code>
                    <code class="css-class-example">.error {}</code>
                    <textarea id="css-input"></textarea>
                </p>
            </section>
            <section id="configure-event-status">
                <h2>{{ html("event-status-title") }}</h2>
                <p>
                  {{ html("event-status-description") }}
                </p>
                <div class="action-paragraph">
                  <form id="event-status-form">
                    <!-- We have three event status, see https://icalendar.org/iCalendar-RFC-5545/3-8-1-11-status.html -->
                    <input type="checkbox" class="check-event-status specification-checkbox" id="style-event-status-tentative" /><label for="style-event-status-tentative" class="STATUS-TENTATIVE">{{ html("event-status-tentative") }}</label>
                    <input type="checkbox" class="check-event-status specification-checkbox" id="style-event-status-confirmed" /><label for="style-event-status-confirmed" class="STATUS-CONFIRMED">{{ html("event-status-confirmed") }}</label>
                    <input type="checkbox" class="check-event-status specification-checkbox" id="style-event-status-cancelled" /><label for="style-event-status-cancelled" class="STATUS-CANCELLED">{{ html("event-status-cancelled") }}</label>
                  </form>
                </div>
            </section>
            <section id="configure-loader">
                <h2>{{ html("loader-title") }}</h2>
                <p>
                  {{ html("loader-description") }}
                </p>
                <p class="action-paragraph">
                  <select id="select-loader">
                      <option value="" id="default-loader">{{ string("loader-default") }}</option>
                      <option value="">{{ string("loader-none") }}</option>
                  </select>
                </p>
            </section>
            <section id="configure-tabs">
                <h2>{{ html("tabs-title") }}</h2>
                <p>
                  {{ html("tabs-description") }}
                </p>
                <p class="action-paragraph">
                  <select id="select-tab">
                      <option value="month">{{ string("calendar.labels_month_tab") }}</option>
                      <option value="week">{{ string("calendar.labels_week_tab") }}</option>
                      <option value="day">{{ string("calendar.labels_day_tab") }}</option>
                      <option value="agenda">{{ string("calendar.labels_agenda_tab") }}</option>
                  </select>
                </p>
                <p>
                  {{ html("controls-description") }}
                </p>
                <div class="action-paragraph">
                    <label for="check-controls-month"   ><div class="belongs-together button"><input type="checkbox" class="tabs     specification-list-checkbox" value="month"    id="check-controls-month"   />{{ html("calendar.labels_month_tab")            }}</div></label>
                    <label for="check-controls-week"    ><div class="belongs-together button"><input type="checkbox" class="tabs     specification-list-checkbox" value="week"     id="check-controls-week"    />{{ html("calendar.labels_week_tab")             }}</div></label>
                    <label for="check-controls-day"     ><div class="belongs-together button"><input type="checkbox" class="tabs     specification-list-checkbox" value="day"      id="check-controls-day"     />{{ html("calendar.labels_day_tab")              }}</div></label>
                    <label for="check-controls-agenda"  ><div class="belongs-together button"><input type="checkbox" class="tabs     specification-list-checkbox" value="agenda"   id="check-controls-agenda"  />{{ html("calendar.labels_agenda_tab")           }}</div></label>
                    <label for="check-controls-next"    ><div class="belongs-together button"><input type="checkbox" class="controls specification-list-checkbox" value="next"     id="check-controls-next"    />{{ html("calendar.labels_next")                 }}</div></label>
                    <label for="check-controls-previous"><div class="belongs-together button"><input type="checkbox" class="controls specification-list-checkbox" value="previous" id="check-controls-previous"/>{{ html("calendar.labels_prev")                 }}</div></label>
                    <label for="check-controls-today"   ><div class="belongs-together button"><input type="checkbox" class="controls specification-list-checkbox" value="today"    id="check-controls-today"   />{{ html("calendar.labels_dhx_cal_today_button") }}</div></label>
                    <label for="check-controls-date"    ><div class="belongs-together button"><input type="checkbox" class="controls specification-list-checkbox" value="date"     id="check-controls-date"    />{{ html("calendar.labels_date")                 }}</div></label>
                </div>
            </section>
            <section id="configure-menu">
                <h2>{{ html("menu-title") }}</h2>
                <p>
                    {{ html("menu-description") }}
                </p>
                <div class="action-paragraph">
                    <label for="check-controls-menu"                   ><div class="belongs-together button"><input type="checkbox" class="controls specification-list-checkbox" value="menu" id="check-controls-menu"                   />{{ html("controls-menu")                    }}</div></label>
                    <label for="menu_shows_title"                      ><div class="belongs-together button"><input type="checkbox" class="specification-checkbox"                            id="menu_shows_title"                      />{{ html("menu-shows-title")                 }}</div></label>
                    <label for="menu_shows_description"                ><div class="belongs-together button"><input type="checkbox" class="specification-checkbox"                            id="menu_shows_description"                />{{ html("menu-shows-description")           }}</div></label>
                    <label for="menu_shows_calendar_names"             ><div class="belongs-together button"><input type="checkbox" class="specification-checkbox"                            id="menu_shows_calendar_names"             />{{ html("menu-shows-calendar-names")        }}</div></label>
                    <label for="menu_shows_calendar_descriptions"      ><div class="belongs-together button"><input type="checkbox" class="specification-checkbox"                            id="menu_shows_calendar_descriptions"      />{{ html("menu-shows-calendar-descriptions") }}</div></label>
                    <label for="menu_shows_calendar_visibility_toggle" ><div class="belongs-together button"><input type="checkbox" class="specification-checkbox"                            id="menu_shows_calendar_visibility_toggle" />{{ html("menu-shows-calendar-visibility")   }}</div></label>
                </div>
            </section>
            <section id="configure-timezone">
                <h2>{{ html("timezone-title") }}</h2>
                <p>
                  {{ html("timezone-description") }}
                  <span class="timezone-of-browser">{{ string("loading") }}</span>
                </p>
                <p class="action-paragraph">
                  <select id="select-timezone">
                      <option value="">{{ string("timezone-browser") }}</option>
                  </select>
                </p>
            </section>
            <section id="configure-participants">
                <h2>{{ html("participants-title") }}</h2>
                <p>
                  {{ html("participants-description") }}
                </p>
                <p class="participants">
                    <input type="checkbox" class="check-event-status specification-checkbox" id="show_organizers" /><label for="show_organizers">{{ html("participants-organizers") }}</label><br/>
                    <input type="checkbox" class="check-event-status specification-checkbox" id="show_attendees" /><label for="show_attendees">{{ html("participants-attendees") }}</label><br/>
                    <input type="checkbox" class="check-event-status specification-checkbox" id="show_participant_status" /><label for="show_participant_status">{{ html("participants-status") }}</label><br/>
                    <input type="checkbox" class="check-event-status specification-checkbox" id="show_participant_type" /><label for="show_participant_type">{{ html("participants-type") }}</label><br/>
                    <input type="checkbox" class="check-event-status specification-checkbox" id="show_participant_role" /><label for="show_participant_role">{{ html("participants-role") }}</label>
                </p>
            </section>
            <section id="configure-embed">
                <h2>{{ html("calendar-embed-title") }}</h2>
                <p>
                    {{ html("calendar-code-execution") }}
                </p>
                <a id="calendar-link" target="_blank"></a>
                <p>
                    {{ html("calendar-code") }}
                </p>
                <pre id="calendar-code" class="code"></pre>
            </section>
            <section id="configure-spec" class="not-for-config">
                <h2>{{ html("spec-title") }}</h2>
                {{ html("spec-description") }}
                <pre class="code" id="json-specification"></pre>
                {{ html("spec-host-html") }}
                {{ html("spec-link") }}
                <a id="example-specification-link" target="_blank"></a>
            </section>
            <section id="configure-about" class="not-for-config"    >
                <h2>{{ html("about-title") }}</h2>
                {{ html("project-description") }}
                <ul>
                    <li><a href="{{ specification["contributing"] | safe }}">{{ html("improve") }}</a></li>
                    <li>
                        <a href="{{ specification["source_code"] | safe }}">{{ html("source-code") }}</a>
                        {{ html("version").format(version=
                        specification["version"] if specification["version"] else configuration["version"]
                        )
                        }}
                    </li>
                    <li><a href="{{ specification["privacy_policy"] | safe }}">{{ html("privacy-policy") }}</a></li>
                </ul>
            </section>
            <div class="bottom-navigation">
                <a id="bottom-previous-link" class="button needs-previous-section">⬅</a>
                <select id="select-sections" onchange="selectSection()"></select>
                <a id="bottom-done-link" href="#configure-embed" class="button">{{ html("calendar-embed-title") }}</a>
                <a id="bottom-next-link" class="button needs-next-section">➡</a>
            </div>
        </main>
        <aside>
            <div id="calendar-code-execution"></div>
            <div id="height-slider">↕ <span id="calendar-height"></span> ↕</div>
        </aside>
        </div>
        <div id="overlay"></div>
        <div class="button" id="width-slider">↔</div>
    </body>
</html>
