{% extends "base.html" %}

{% block content %}
<section class="page-header">
    <div>
        <p class="page-kicker">Settings</p>
        <h1 class="page-title">Configuration</h1>
        <p class="page-subtitle">Manage application settings across categories.</p>
    </div>
</section>

<section class="panel">
    <div class="settings-toolbar">
        <div class="form-group">
            <label for="settings-search">Search settings</label>
            <input
                id="settings-search"
                type="text"
                placeholder="Search (e.g. timezone, model, cache)"
                hx-get="/ui/settings/search"
                hx-trigger="keyup changed delay:250ms"
                hx-target="#settings-search-results"
                name="q"
            >
        </div>
        <div class="settings-actions">
            <form
                hx-post="/ui/settings/import"
                hx-target="#settings-panel"
                hx-swap="innerHTML"
                enctype="multipart/form-data"
            >
                <input type="hidden" name="section" value="general">
                <input type="file" name="settings_file" accept=".json" required>
                <button class="btn-ghost" type="submit">Import</button>
            </form>
            <a class="btn-ghost" href="/ui/settings/export">Export</a>
            <form
                hx-post="/ui/settings/reset"
                hx-target="#settings-panel"
                hx-swap="innerHTML"
            >
                <input type="hidden" name="section" value="general">
                <button class="btn-ghost" type="submit">Reset defaults</button>
            </form>
        </div>
    </div>
    <div id="settings-search-results" class="settings-search-results"></div>
</section>

<div class="settings-layout">
    <nav class="settings-tabs" role="tablist">
        <button
            class="settings-tab settings-tab-active"
            role="tab"
            aria-selected="true"
            hx-get="/ui/settings/general"
            hx-target="#settings-panel"
            hx-swap="innerHTML"
            onclick="document.querySelectorAll('.settings-tab').forEach(t=>t.classList.remove('settings-tab-active'));this.classList.add('settings-tab-active')"
        >General</button>
        <button
            class="settings-tab"
            role="tab"
            aria-selected="false"
            hx-get="/ui/settings/models"
            hx-target="#settings-panel"
            hx-swap="innerHTML"
            onclick="document.querySelectorAll('.settings-tab').forEach(t=>t.classList.remove('settings-tab-active'));this.classList.add('settings-tab-active')"
        >Models</button>
        <button
            class="settings-tab"
            role="tab"
            aria-selected="false"
            hx-get="/ui/settings/organization"
            hx-target="#settings-panel"
            hx-swap="innerHTML"
            onclick="document.querySelectorAll('.settings-tab').forEach(t=>t.classList.remove('settings-tab-active'));this.classList.add('settings-tab-active')"
        >Organization</button>
        <button
            class="settings-tab"
            role="tab"
            aria-selected="false"
            hx-get="/ui/settings/appearance"
            hx-target="#settings-panel"
            hx-swap="innerHTML"
            onclick="document.querySelectorAll('.settings-tab').forEach(t=>t.classList.remove('settings-tab-active'));this.classList.add('settings-tab-active')"
        >Appearance</button>
        <button
            class="settings-tab"
            role="tab"
            aria-selected="false"
            hx-get="/ui/settings/advanced"
            hx-target="#settings-panel"
            hx-swap="innerHTML"
            onclick="document.querySelectorAll('.settings-tab').forEach(t=>t.classList.remove('settings-tab-active'));this.classList.add('settings-tab-active')"
        >Advanced</button>
    </nav>
    <div id="settings-panel" hx-get="/ui/settings/general" hx-trigger="load" hx-target="#settings-panel" hx-swap="innerHTML">
        <div class="loading-state">Loading settings...</div>
    </div>
</div>
{% endblock %}