{% extends "base_template.html" %}

{% block title %}{{ schema.title }} settings{% endblock %}

{% block content %}
<div class="d-flex flex-column align-items-start gap-2 mb-4">
    <h1 class="h3 mb-0">{{ schema.title }} <small class="text-muted">settings</small></h1>
    <a href="{{ url_for('settings.admin_index') }}" class="btn btn-sm btn-outline-secondary">All settings</a>
</div>

{% with messages = get_flashed_messages(with_categories=true) %}
    {% for category, message in messages %}
        <div class="alert alert-{{ 'danger' if category == 'danger' else 'success' }} py-2">{{ message }}</div>
    {% endfor %}
{% endwith %}

<form method="POST">
    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
    <div class="card">
        <div class="card-body">
            {% for f in schema.fields %}
            <div class="mb-3">
                {% if f.type == 'bool' %}
                <div class="form-check form-switch">
                    <input class="form-check-input" type="checkbox" role="switch"
                           name="{{ f.key }}" id="{{ f.key }}" {% if cfg[f.key] %}checked{% endif %}>
                    <label class="form-check-label" for="{{ f.key }}">{{ f.label }}</label>
                </div>
                {% elif f.type == 'select' %}
                <label class="form-label" for="{{ f.key }}">{{ f.label }}</label>
                <select class="form-select" name="{{ f.key }}" id="{{ f.key }}">
                    {% for value, label in f.options %}
                    <option value="{{ value }}" {% if cfg[f.key] == value %}selected{% endif %}>{{ label }}</option>
                    {% endfor %}
                </select>
                {% elif f.type == 'color' %}
                <label class="form-label" for="{{ f.key }}">{{ f.label }}</label>
                <input type="color" class="form-control form-control-color"
                       name="{{ f.key }}" id="{{ f.key }}" value="{{ cfg[f.key] }}">
                {% elif f.type == 'int' %}
                <label class="form-label" for="{{ f.key }}">{{ f.label }}</label>
                <input type="number" class="form-control"
                       name="{{ f.key }}" id="{{ f.key }}" value="{{ cfg[f.key] }}">
                {% else %}
                <label class="form-label" for="{{ f.key }}">{{ f.label }}</label>
                <input type="text" class="form-control"
                       name="{{ f.key }}" id="{{ f.key }}" value="{{ cfg[f.key] }}">
                {% endif %}
                {% if f.help %}<small class="text-muted d-block mt-1">{{ f.help }}</small>{% endif %}
                {# Where the value in the box came from. Without this a field
                   showing something nobody here typed reads as a mystery,
                   and the answer is usually the product's own .env. #}
                {% if sources[f.key] == 'environment' %}
                <small class="text-muted d-block mt-1">
                    Currently set by the product configuration ({{ f.env or (schema.feature ~ '_' ~ f.key) | upper }}).
                    Changing it here overrides that.
                </small>
                {% elif sources[f.key] == 'panel' %}
                <small class="text-muted d-block mt-1">
                    Set here, overriding the product configuration.
                </small>
                {% endif %}
            </div>
            {% endfor %}
        </div>
        <div class="card-footer d-flex justify-content-between align-items-center">
            <span class="text-muted small">Changes apply immediately. A field left as it is keeps following the product configuration.</span>
            <button class="btn btn-primary" type="submit">Save</button>
        </div>
    </div>
</form>
{% endblock %}