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

{% block head %}
    <link rel="stylesheet" type="text/css"
          href="{{fix_static('css/form.css')}}">
    <script type="module" src="{{fix_static('js/settings/settings.js')}}"></script>
{% 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 %}

        <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 (Colr v0)</option>
                <option {% if openmoji == "glyf_colr1" %}selected{% end %} value="glyf_colr1">Font (Colr v1)</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">
            Theme
            <select name="theme">
                {% for _ in themes %}
                    <option {% if _ == theme %}selected{% end %}
                            value="{{_}}">{{_}}</option>
                {% end %}
            </select>
        </label>

        <label class="form-element">
            Aktiviere Spezialeffekte
            <input type="checkbox"
               name="effects"
                {% if effects %}
                   checked
                {% end %}
               value="sure">
        </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 %}
