{%- extends "base.html" -%}
{%- block title -%} Settings {%- endblock -%}

{%- block content -%}

<div class="theme-panel">
    {%- for theme in THEME_NAMES -%}
    <div class="{{ theme }}">
        {%- for mode in THEME_MODES -%}
            {{ m.set_theme_button(theme, mode) }}
        {%- endfor -%}
    </div>
    {%- endfor -%}
</div>

{%- call m.settings_option("use_js") -%}
    Javascript <br>
    (Reloads the page. When this option is disabled, all buttons turn into links
    and reload the page with the functionality preserved).
{%- endcall -%}

{%- call m.settings_option("use_hl") -%}
    Code highlighting.
{%- endcall -%}

{%- call m.settings_option("fonts") -%}
    External fonts <br>
    (Connects fonts from third-party resources instead of standard browser fonts).
{%- endcall -%}

{%- call m.settings_option("extra_css") -%}
    Extra CSS animations <br>
    (Connects an additional stylesheet with animations).
{%- endcall -%}

<hr>

<div class="range-block">
    <form action="" method="post" class="line-block">
        <label for="body-width-range" class="frame">{{ g.body_width }}</label>
        
        {%- if not g.use_js -%}
            <input type="submit" value="Apply" class="button">
        {%- endif -%}

        <input
            id="body-width-range" class="frame range" type="range" name="body_width"
            min="20" max="100" step="5" value="{{ g.body_width }}"
        >
    </form>
    Max site body width <br>
    (Determines the maximum width of the space occupied by the site on the screen)
</div>

{%- endblock -%}