{% extends "base.html" %}
{% load i18n %}

{% block title %}{% trans "Edit Settings" %}{% endblock title %}

{% block page_heading %}{% trans "Edit Settings" %}{% endblock page_heading %}

{% block content %}
<section class="card mb-3" aria-labelledby="appearance-heading">
    <div class="card-body">
        <h2 class="h5 card-title" id="appearance-heading">{% trans "Appearance" %}</h2>
        <form action="{% url 'set_language' %}" method="post" class="row g-2 mb-3 align-items-start">{% csrf_token %}
            <label class="col-sm-4 col-form-label" for="language">{% trans "Language" %}</label>
            <div class="col-sm-6">
                <select id="language" name="language" class="form-select" aria-describedby="language-help">
                    {% get_current_language as LANGUAGE_CODE %}
                    {% get_available_languages as LANGUAGES %}
                    {% get_language_info_list for LANGUAGES as languages %}
                    {% for language in languages %}
                        <option value="{{ language.code }}"{% if language.code == LANGUAGE_CODE %} selected{% endif %}>{{ language.name_local }} ({{ language.code }})</option>
                    {% endfor %}
                </select>
                <div id="language-help" class="form-text">{% trans "Yours only, in this browser" %}</div>
            </div>
            <div class="col-sm-2"><button type="submit" class="btn btn-outline-primary w-100">{% trans "Change" %}</button></div>
        </form>
        <form method="post" class="row g-2 align-items-start">{% csrf_token %}
            <label class="col-sm-4 col-form-label" for="theme">{% trans bootstrap_theme.name %}</label>
            <div class="col-sm-6">
                <select id="theme" class="form-select" name="{{ bootstrap_theme.key }}" aria-describedby="theme-help">
                {% for theme in themes_list %}
                    <option value="{{ theme }}"{% if bootstrap_theme.value == theme %} selected{% endif %}>{{ theme }}</option>
                {% endfor %}
                </select>
                <div id="theme-help" class="form-text">{% trans "For every user" %}</div>
            </div>
            <div class="col-sm-2"><button type="submit" class="btn btn-outline-primary w-100">{% trans "Change" %}</button></div>
        </form>
    </div>
</section>

{% for title, settings in groups %}
<section class="card mb-3" aria-labelledby="group-{{ forloop.counter }}">
    <div class="card-body">
        <form method="post">{% csrf_token %}
            <h2 class="h5 card-title mb-3" id="group-{{ forloop.counter }}">{% trans title %}</h2>
            {% for setting in settings %}
            <div class="row g-2 mb-3">
                <label class="col-sm-4 col-form-label" for="setting-{{ setting.key }}">{% trans setting.name %}</label>
                <div class="col-sm-6">
                {% if setting.choices %}
                    <select id="setting-{{ setting.key }}" class="form-select" name="{{ setting.key }}" aria-describedby="help-{{ setting.key }}">
                        {% for choice in setting.choices_as_list %}
                            <option value="{{ choice }}"{% if setting.value == choice %} selected{% endif %}>{% trans choice %}</option>
                        {% endfor %}
                    </select>
                {% elif setting.bounds %}
                    <input id="setting-{{ setting.key }}" class="form-control" type="number" name="{{ setting.key }}" value="{{ setting.value }}"
                           min="{{ setting.bounds.0 }}" max="{{ setting.bounds.1 }}" step="1" required aria-describedby="help-{{ setting.key }}">
                {% else %}
                    <input id="setting-{{ setting.key }}" class="form-control" type="text" name="{{ setting.key }}" value="{{ setting.value }}"
                           maxlength="25" aria-describedby="help-{{ setting.key }}">
                {% endif %}
                    <input type="hidden" name="was-{{ setting.key }}" value="{{ setting.value }}">
                    <div id="help-{{ setting.key }}" class="form-text">{% trans setting.description %}</div>
                </div>
            </div>
            {% endfor %}
            <div class="text-end">
                <button type="submit" class="btn btn-primary">{% trans "Save" %}</button>
            </div>
        </form>
    </div>
</section>
{% endfor %}
{% endblock %}