{% extends "base.html" %}

{% block title %}Configuration — didiAI Dashboard{% endblock %}

{% block content %}
<div class="mb-8">
    <h1 class="text-2xl font-bold text-white">Runtime Configuration</h1>
    <p class="mt-1 text-sm text-slate-400">
        Live settings pulled by web-api every 30 seconds — no restart required.
        Override values replace env defaults.
    </p>
</div>

{% set category_info = {
    'providers': {'icon': '🔌', 'title': 'Paid Providers', 'desc': 'Toggle premium-tier search engines on and off'},
    'routing': {'icon': '🔀', 'title': 'Routing Strategy', 'desc': 'How premium-tier picks providers per request'},
    'llm': {'icon': '🧠', 'title': 'LLM Models', 'desc': 'Which model OpenRouter calls use'},
    'tiers': {'icon': '🎚', 'title': 'Tier Limits', 'desc': 'Default result counts per tier'},
} %}

{% for cat_key, entries in categories.items() %}
    {% set info = category_info.get(cat_key, {'icon': '⚙', 'title': cat_key.title(), 'desc': ''}) %}
    <section class="mb-10">
        <div class="mb-4">
            <h2 class="text-lg font-semibold text-white flex items-center gap-2">
                <span>{{ info.icon }}</span> {{ info.title }}
            </h2>
            <p class="text-xs text-slate-500 mt-0.5">{{ info.desc }}</p>
        </div>
        <div class="space-y-2">
            {% for entry in entries %}
                {% include "partials/config_row.html" %}
            {% endfor %}
        </div>
    </section>
{% endfor %}

<div class="mt-12 p-4 bg-slate-900 border border-slate-800 rounded-xl text-xs text-slate-400">
    <p class="font-semibold text-slate-300 mb-1">ℹ How this works</p>
    <p>Changes here are stored in the dashboard database. The web-api container polls <code class="text-indigo-300">/api/config</code> every 30 seconds and merges overrides into its in-memory config. No restart is needed — your toggle or model change takes effect within ~30s on the next request.</p>
</div>
{% endblock %}