{% extends "../base.html" %}

{% block head %}
    <script defer type="module" src="{{fix_static('js/settings/settings.js')}}"></script>
{% end %}
{% block stylesheets %}
    <link rel="stylesheet" type="text/css"
          href="{{fix_static('css/form.css')}}">
{% end %}

{% block body %}
    <form method="post">
        {% if no_3rd_party_default %}
            <label class="form-element">
                Erlaube Inhalte von Drittanbietern
                <input type="checkbox"
                       name="no_3rd_party"
                       {% if not no_3rd_party %} checked {% end %}
                       value="nope">
            </label>
        {% else %}
            <label class="form-element">
                Deaktiviere Inhalte von Drittanbietern
                <input type="checkbox"
                       name="no_3rd_party"
                       {% if no_3rd_party %} checked {% end %}
                       value="sure">
            </label>
        {% end %}

        {% if settings.get("REDIRECT_MODULE_LOADED") %}
            {% if ask_before_leaving_default %}
                <label class="form-element">
                    Seite ohne zu fragen verlassen
                    <input type="checkbox"
                           name="ask_before_leaving"
                           {% if not ask_before_leaving %} checked {% end %}
                           value="nope">
                </label>
            {% else %}
                <label class="form-element">
                    Frage vor dem Verlassen der Seite
                    <input type="checkbox"
                           name="ask_before_leaving"
                           {% if ask_before_leaving %} checked {% end %}
                           value="sure">
                </label>
            {% end %}
        {% end %}

        <label class="form-element">
            Nutze coole Emojis von OpenMoji
            <select name="openmoji">
                <option {% if not openmoji %} selected {% end %}
                        value="nope">Deaktiviert</option>
                <option {% if openmoji == "glyf_colr0" %} selected {% end %}
                        value="glyf_colr0">Font (COLRv0)</option>
                <option {% if openmoji == "glyf_colr1" %} selected {% end %}
                        value="glyf_colr1">Font (COLRv1)</option>
                <option {% if openmoji == "img" %} selected {% end %}
                        value="img">Als SVGs</option>
            </select>
        </label>

        <label class="form-element">
            Nutze mehr JS, um die Seite dynamischer zu machen (experimentell)
            <input type="checkbox"
                   name="dynload"
                   {% if dynload %} checked {% end %}
                   value="sure">
        </label>

        <label class="form-element">
            Thema
            <select name="theme">
                {% for _ in themes %}
                    <option {% if _ == theme %} selected {% end %}
                            value="{{_}}">{{ _.title() }}</option>
                {% end %}
            </select>
        </label>

        <label class="form-element needs-light-dark-support">
            Farbschema
            <select name="scheme">
                {% for _ in colour_schemes %}
                    <option {% if _ == scheme %} selected {% end %}
                            value="{{_}}">{{ _.title() }}</option>
                {% end %}
            </select>
        </label>

        <label class="form-element">
            Deaktiviere Spezialeffekte
            <input type="checkbox"
                   name="effects"
                   {% if not effects %} checked {% end %}
                   value="nope">
        </label>

        <label class="form-element">
            Aktiviere Einstellungen für Experten
            <input type="checkbox"
                   name="advanced_settings"
                   {% if advanced_settings %} checked {% end %}
                   value="sure">
        </label>

        {% if advanced_settings %}
            <label class="form-element">
                Bumpscosity
                <select name="bumpscosity" id="bumpscosity-select">
                    {% for _ in bumpscosity_values %}
                        <option {% if _ == bumpscosity %} selected {% end %}
                                value="{{_}}">{{_}}</option>
                    {% end %}
                </select>
            </label>
        {% end %}

        {% if show_token_input %}
            <label class="form-element">
                Autorisierungsschlüssel
                <input type="text" name="access_token" value="{{token}}">
            </label>
        {% end %}

        <label class="form-element">
            Speicher in Cookies {% raw emoji2html("🍪") %} (empfohlen)
            <input type="checkbox"
                   name="save_in_cookie"
                   {% if save_in_cookie %} checked {% end %}
                   value="sure">
        </label>
        <input type="submit" value="Speichern">
    </form>
{% end %}
