{{/* Admin settings — core system configuration. */}}

{{define "admin-settings"}}
<div class="admin-page">
    <h2>Settings</h2>
    <p class="section-hint">Core system configuration. Changes take effect immediately.</p>

    {{/* ── Registration ───────────────────── */}}
    <div class="settings-section">
        <h3 style="font-size:14px;margin:0 0 12px;">Registration</h3>
        <div class="form-group">
            <label class="checkbox-label">
                <input type="checkbox" id="settRegEnabled"> Allow new user registration
            </label>
        </div>
        <div class="form-group">
            <label>Default new user state</label>
            <select id="settRegDefaultState" style="width:180px;">
                <option value="active">Active immediately</option>
                <option value="pending">Pending approval</option>
            </select>
        </div>
    </div>

    {{/* ── User Permissions ─────────────────── */}}
    <div class="settings-section">
        <h3 style="font-size:14px;margin:0 0 12px;">User Permissions</h3>
        <div class="form-group">
            <label class="checkbox-label">
                <input type="checkbox" id="settUserBYOK"> Allow users to add own API keys (BYOK)
            </label>
        </div>
        <div class="form-group">
            <label class="checkbox-label">
                <input type="checkbox" id="settUserPersonas"> Allow users to create personas
            </label>
        </div>
        <div class="form-group">
            <label class="checkbox-label">
                <input type="checkbox" id="settKBDirect"> Allow direct knowledge base access
            </label>
        </div>
    </div>

    {{/* ── Banner ─────────────────────────── */}}
    <div class="settings-section">
        <h3 style="font-size:14px;margin:0 0 12px;">Environment Banner</h3>
        <div class="form-group">
            <label class="checkbox-label">
                <input type="checkbox" id="settBannerEnabled"> Show banner
            </label>
        </div>
        <div id="bannerFields" style="display:none;">
            <div class="form-row">
                <div class="form-group" style="flex:2;min-width:200px;">
                    <label>Text</label>
                    <input type="text" id="settBannerText" placeholder="DEVELOPMENT">
                </div>
                <div class="form-group" style="flex:1;min-width:100px;">
                    <label>Background</label>
                    <input type="color" id="settBannerBg" value="#007a33" style="width:60px;height:30px;padding:2px;">
                </div>
                <div class="form-group" style="flex:1;min-width:100px;">
                    <label>Text Color</label>
                    <input type="color" id="settBannerFg" value="#ffffff" style="width:60px;height:30px;padding:2px;">
                </div>
            </div>
        </div>
    </div>

    {{/* ── System Prompt ──────────────────── */}}
    <div class="settings-section">
        <h3 style="font-size:14px;margin:0 0 12px;">Default System Prompt</h3>
        <div class="form-group">
            <textarea id="settSystemPrompt" rows="4" style="width:100%;resize:vertical;" placeholder="Optional system prompt applied to all new conversations"></textarea>
        </div>
    </div>

    <div style="margin-top:16px;">
        <button class="btn-small btn-primary" onclick="Pages.saveSettings()">Save Settings</button>
    </div>
</div>
{{end}}