{% extends "base.html" %}

{% block title %}Settings - Memorizz{% endblock %}

{% block head %}<link rel="stylesheet" href="/static/css/pages/settings.css?v=3">{% endblock %}

{% block content %}
{% from '_ui.html' import page_header %}
{% set summary = settings_summary %}
{{ page_header('Settings', 'Manage provider credentials and the saved defaults that the UI, CLI and MCP server load.', 'System') }}

{% if message %}
<div class="success-message">{{ message }}</div>
{% endif %}

{% if error %}
<div class="error-message">{{ error }}</div>
{% endif %}

{% for warning in config_warnings %}
<div class="warning-message" role="status">{{ warning }}</div>
{% endfor %}

<div class="fleet-tape settings-tape" role="list" aria-label="Configuration summary">
    <div role="listitem"><span>Keys configured</span><strong class="{{ 'is-warn' if not summary.keys_set else '' }}">{{ summary.keys_set }}<small>of {{ summary.keys_total }}</small></strong></div>
    <div role="listitem"><span>Active provider</span><strong class="settings-tape-text is-good">{{ provider_type or '—' }}</strong></div>
    <div role="listitem"><span>Saved default provider</span><strong class="settings-tape-text">{{ summary.saved_backend or 'Not set' }}</strong></div>
    <div role="listitem"><span>Default LLM</span><strong class="settings-tape-text" title="{{ summary.llm_provider }}{% if summary.llm_model %} · {{ summary.llm_model }}{% endif %}">{{ summary.llm_provider or 'Not set' }}{% if summary.llm_model %}<small>{{ summary.llm_model }}</small>{% endif %}</strong></div>
    <div role="listitem"><span>Embeddings</span><strong class="settings-tape-text{{ ' is-warn' if not summary.embedding_provider else '' }}" title="{{ summary.embedding_provider }}{% if summary.embedding_model %} · {{ summary.embedding_model }}{% endif %}">{{ summary.embedding_provider or 'Not set' }}{% if summary.embedding_model %}<small>{{ summary.embedding_model }}</small>{% endif %}</strong></div>
    <div role="listitem"><span>Sandbox</span><strong class="settings-tape-text">{{ summary.sandbox or 'Off' }}</strong></div>
    <div role="listitem"><span>Browser control</span><strong class="settings-tape-text">{{ summary.browser or 'Off' }}</strong></div>
</div>

<div class="settings-console">
    <nav class="settings-index" aria-label="Settings sections">
        <label class="fleet-search settings-filter">
            <kbd aria-hidden="true">/</kbd>
            <input type="search" id="settings-filter" placeholder="Find a setting" aria-label="Find a setting by name or variable" autocomplete="off">
        </label>
        <ol>
            <li><a href="#settings-saving" data-section-link="settings-saving">How saving works</a></li>
            {% for item in summary.sections %}
            <li><a href="#{{ item.id }}" data-section-link="{{ item.id }}">{{ item.title }}<span class="settings-count{% if item.set %} is-set{% endif %}" title="{{ item.set }} of {{ item.total }} fields set">{{ item.set }}/{{ item.total }}</span></a></li>
            {% endfor %}
        </ol>
        <p class="settings-none" id="settings-none" hidden>No setting matches this search.</p>
    </nav>

<form method="post" action="/settings" class="settings-form">
    <section class="panel settings-notes settings-section" id="settings-saving" aria-labelledby="settings-saving-title">
        <div class="panel-header">
            <h2 class="panel-title" id="settings-saving-title">How saving works</h2>
        </div>
        <dl class="detail-list">
            <div>
                <dt>Save target</dt>
                <dd class="mono">{{ env_file_path }}</dd>
            </div>
            <div>
                <dt>Active UI memory provider</dt>
                <dd>{{ provider_type }}</dd>
            </div>
        </dl>
        <p class="form-hint">Leave a field blank to keep its value. Saving updates this process's environment, but does not reconnect existing agents or switch their memory provider. Reconnect through <a href="/connect">Connect</a>; restart CLI/MCP processes to load saved defaults. No memory is migrated.</p>
        <p class="form-hint">Precedence: process exports &gt; project <code>.env</code> &gt; Memorizz <code>.env</code>. A project setting may override this save after restart; use <code>memorizz config set KEY --project</code> to edit it explicitly. Keep credential files out of version control; on POSIX, saves use owner-only permissions (0600).</p>
    </section>

    {% for section in settings_sections %}
    {% set item = summary.sections[loop.index0] %}
    <section class="panel settings-section" id="{{ item.id }}" aria-labelledby="{{ item.id }}-title">
        <div class="panel-header">
            <div>
                <h2 class="panel-title" id="{{ item.id }}-title">{{ section.title }}</h2>
                {% if section.description %}
                <p class="panel-description">{{ section.description }}</p>
                {% endif %}
            </div>
            <span class="panel-meta settings-section-count">{{ item.set }} of {{ item.total }} set</span>
        </div>
        {% if section.provider_checks %}
        <div class="sandbox-status-list">
            {% for check in section.provider_checks %}
            <div class="sandbox-status-item {% if check.ready %}sandbox-status-item--ok{% else %}sandbox-status-item--error{% endif %}">
                <div class="label-row">
                    <strong>{{ check.label }}</strong>
                    {% if check.ready %}
                    <span class="pill pill--success">Ready</span>
                    {% else %}
                    <span class="pill pill--warning">Needs setup</span>
                    {% endif %}
                </div>
                <p class="form-hint">{{ check.message }}</p>
            </div>
            {% endfor %}
        </div>
        {% endif %}
        <div class="form-grid settings-grid">
            {% for field in section.fields %}
            <div
                class="form-group"
                data-setting-search="{{ (field.label ~ ' ' ~ field.env ~ ' ' ~ section.title)|lower }}"
                {% if field.visible_if_sandbox_provider %}
                data-visible-if-sandbox-provider="{{ field.visible_if_sandbox_provider }}"
                {% endif %}
            >
                <div class="label-row">
                    <label for="{% if field.env == 'MEMORIZZ_DEFAULT_LLM_MODEL' %}{{ field.env }}_select{% elif field.field_type == 'checkbox' %}{{ field.env }}_checkbox{% else %}{{ field.env }}{% endif %}">{{ field.label }}</label>
                    {% if field.is_set %}
                    <span class="pill pill--success">Set</span>
                    {% else %}
                    <span class="pill">Not set</span>
                    {% endif %}
                </div>
                {% if field.field_type == 'select' %}
                {% if field.env == 'MEMORIZZ_DEFAULT_LLM_MODEL' %}
                <select id="{{ field.env }}_select" data-llm-model-select></select>
                <input
                    type="text"
                    id="{{ field.env }}_custom"
                    value="{{ field.current_value }}"
                    placeholder="Custom model ID or deployment name"
                    autocomplete="off"
                    spellcheck="false"
                    style="display: none; margin-top: 8px;"
                >
                <input type="hidden" id="{{ field.env }}" name="{{ field.env }}" value="{{ field.current_value }}">
                <div id="local-model-status" class="local-model-status" style="display: none; margin-top: 10px;"></div>
                {% else %}
                <select id="{{ field.env }}" name="{{ field.env }}">
                    {% for opt in field.options %}
                    <option value="{{ opt.value }}" {% if opt.value == field.current_value %}selected{% endif %}>{{ opt.label }}</option>
                    {% endfor %}
                </select>
                {% endif %}
                {% elif field.field_type == 'text' %}
                <input
                    type="text"
                    id="{{ field.env }}"
                    name="{{ field.env }}"
                    value="{{ field.current_value }}"
                    placeholder="{{ field.placeholder }}"
                    autocomplete="off"
                    spellcheck="false"
                >
                {% elif field.field_type == 'timezone' %}
                <input
                    type="text"
                    id="{{ field.env }}"
                    name="{{ field.env }}"
                    value="{{ field.current_value }}"
                    placeholder="{{ field.placeholder }}"
                    list="memorizz-timezones"
                    autocomplete="off"
                    spellcheck="false"
                >
                {% elif field.field_type == 'checkbox' %}
                <input type="hidden" id="{{ field.env }}" name="{{ field.env }}" value="{{ field.current_value }}" data-checkbox-hidden>
                <div class="checkbox-group">
                    <label for="{{ field.env }}_checkbox">
                        <input
                            type="checkbox"
                            id="{{ field.env }}_checkbox"
                            data-checkbox-for="{{ field.env }}"
                            {% if field.checkbox_checked %}checked{% endif %}
                        >
                        {{ field.checkbox_label or "Enabled" }}
                    </label>
                </div>
                {% else %}
                <input
                    type="password"
                    id="{{ field.env }}"
                    name="{{ field.env }}"
                    placeholder="{{ field.placeholder }}"
                    autocomplete="off"
                    spellcheck="false"
                >
                {% endif %}
                {% if field.hint %}
                <p class="form-hint">{{ field.hint|safe }}</p>
                {% endif %}
                <code class="settings-env">{{ field.env }}</code>
            </div>
            {% endfor %}
        </div>
    </section>
    {% endfor %}

    <div class="settings-actions">
        <button type="submit" class="btn btn-primary">Save settings</button>
        <span class="settings-actions-note">Blank fields keep their saved value.</span>
    </div>
</form>
</div>
{% endblock %}

{% block scripts %}
<script>
(function() {
    function initializeLlmModelControls() {
        const providerSelect = document.getElementById('MEMORIZZ_DEFAULT_LLM_PROVIDER');
        const modelSelect = document.getElementById('MEMORIZZ_DEFAULT_LLM_MODEL_select');
        const modelCustomInput = document.getElementById('MEMORIZZ_DEFAULT_LLM_MODEL_custom');
        const modelHiddenInput = document.getElementById('MEMORIZZ_DEFAULT_LLM_MODEL');
        if (!providerSelect || !modelSelect || !modelCustomInput || !modelHiddenInput) return;

        const modelCatalog = {{ llm_model_catalog|default({}, true)|tojson }};
        const defaultModelByProvider = {{ default_llm_model_by_provider|default({}, true)|tojson }};
        const CUSTOM_VALUE = '__custom__';

        function groupedModelsForProvider(provider) {
            const rows = modelCatalog[provider];
            return Array.isArray(rows) ? rows : [];
        }

        function setHiddenModelValue(value) {
            modelHiddenInput.value = (value || '').trim();
            scheduleLocalCheck();
        }

        // Debounced wrapper because the custom-model text input fires `input`
        // on every keystroke; we don't want to spam the API per char typed.
        let _localCheckDebounce = null;
        function scheduleLocalCheck() {
            if (_localCheckDebounce) clearTimeout(_localCheckDebounce);
            _localCheckDebounce = setTimeout(checkLocalModelAvailability, 350);
        }

        // Race protection — if a second fetch starts before the first returns
        // (e.g. user flips providers quickly) only the most recent paints.
        let _localCheckSeq = 0;
        async function checkLocalModelAvailability() {
            const statusEl = document.getElementById('local-model-status');
            if (!statusEl) return;

            const provider = (providerSelect.value || '').trim();
            const model = (modelHiddenInput.value || '').trim();
            if ((provider !== 'ollama' && provider !== 'huggingface') || !model) {
                statusEl.style.display = 'none';
                statusEl.innerHTML = '';
                return;
            }

            const seq = ++_localCheckSeq;
            statusEl.style.display = 'block';
            statusEl.innerHTML = '<p class="form-hint">Checking '
                + (provider === 'ollama' ? 'local Ollama' : 'HuggingFace cache')
                + '…</p>';

            const url = provider === 'ollama'
                ? '/api/ollama/installed'
                : '/api/huggingface/installed';

            let info;
            try {
                const res = await fetch(url, { cache: 'no-store' });
                info = await res.json();
            } catch (err) {
                if (seq !== _localCheckSeq) return;
                statusEl.innerHTML =
                    '<div class="warning-message"><strong>Could not reach the UI server</strong>: '
                    + escapeHtml(String(err)) + '</div>';
                return;
            }
            if (seq !== _localCheckSeq) return;

            if (provider === 'ollama') {
                renderOllamaStatus(statusEl, model, info);
            } else {
                renderHuggingFaceStatus(statusEl, model, info);
            }
        }

        function renderOllamaStatus(statusEl, model, info) {
            if (!info.reachable) {
                statusEl.innerHTML =
                    '<div class="warning-message">'
                    + '<strong>Ollama is not running</strong> at <code>'
                    + escapeHtml(info.host) + '</code>'
                    + (info.error ? ' &mdash; ' + escapeHtml(info.error) : '')
                    + '.<br>Install it from <a href="https://ollama.com/download" target="_blank" rel="noopener">ollama.com/download</a> and start it, then '
                    + '<a href="#" data-local-refresh>refresh this check</a>.'
                    + '</div>';
                wireRefreshLink(statusEl);
                return;
            }

            // Ollama treats a bare name as `:latest` — match both directions
            // so existing values like `llama3.1` register as installed when
            // the user actually pulled `llama3.1:latest`.
            const installed = (info.models || []).some(function(m) {
                return m === model
                    || m === model + ':latest'
                    || m + ':latest' === model;
            });

            const base = model.split(':')[0];
            const libUrl = 'https://ollama.com/library/' + encodeURIComponent(base);

            const banner = installed
                ? '<div class="success-message">'
                    + '<strong><code>' + escapeHtml(model) + '</code> is available offline</strong>'
                    + ' on Ollama at <code>' + escapeHtml(info.host) + '</code>.'
                    + '</div>'
                : '<div class="warning-message">'
                    + '<strong><code>' + escapeHtml(model) + '</code> is not installed locally.</strong><br>'
                    + 'Run <code>ollama pull ' + escapeHtml(model) + '</code> in a terminal, or '
                    + '<a href="' + libUrl + '" target="_blank" rel="noopener">browse <code>'
                    + escapeHtml(base) + '</code> on ollama.com</a>. '
                    + 'Then <a href="#" data-local-refresh>refresh this check</a>.'
                    + '</div>';

            statusEl.innerHTML = banner + manageListHtml(info.models, 'ollama', 'Ollama');
            wireRefreshLink(statusEl);
        }

        function renderHuggingFaceStatus(statusEl, model, info) {
            if (!info.available) {
                statusEl.innerHTML =
                    '<div class="warning-message">'
                    + '<strong>HuggingFace cache unavailable</strong>'
                    + (info.error ? ' &mdash; ' + escapeHtml(info.error) : '')
                    + '.<br>Install the SDK with <code>pip install memorizz[huggingface]</code>, then '
                    + '<a href="#" data-local-refresh>refresh this check</a>.'
                    + '</div>';
                wireRefreshLink(statusEl);
                return;
            }

            // HF repo IDs are case-sensitive; only exact match counts.
            const cached = (info.models || []).indexOf(model) !== -1;
            const repoUrl = 'https://huggingface.co/'
                + model.split('/').map(encodeURIComponent).join('/');
            const cacheLoc = info.cache_dir || 'local HF cache';

            const banner = cached
                ? '<div class="success-message">'
                    + '<strong><code>' + escapeHtml(model) + '</code> is cached locally</strong>'
                    + ' at <code>' + escapeHtml(cacheLoc) + '</code>.'
                    + '</div>'
                : '<div class="warning-message">'
                    + '<strong><code>' + escapeHtml(model) + '</code> is not cached locally.</strong><br>'
                    + 'It will be downloaded the first time the agent loads (a few hundred MB to several GB). '
                    + 'You can pre-download with <code>huggingface-cli download ' + escapeHtml(model) + '</code>, '
                    + 'or <a href="' + repoUrl + '" target="_blank" rel="noopener">view the model card</a>. '
                    + 'Then <a href="#" data-local-refresh>refresh this check</a>.'
                    + '</div>';

            statusEl.innerHTML = banner + manageListHtml(info.models, 'huggingface', 'HuggingFace');
            wireRefreshLink(statusEl);
        }

        // Build the manage-list panel: every locally-pulled model with a
        // trash button, plus every catalog model that isn't pulled yet with
        // a download button. Catalog data comes from the same `modelCatalog`
        // dict the dropdown uses, so the two surfaces never drift.
        function manageListHtml(installedModels, provider, label) {
            const installed = (installedModels || []).filter(Boolean);
            const installedSet = new Set(installed);
            const isInstalled = function(val) {
                if (installedSet.has(val)) return true;
                if (provider === 'ollama') {
                    if (installedSet.has(val + ':latest')) return true;
                    if (val.endsWith(':latest') && installedSet.has(val.slice(0, -7))) return true;
                }
                return false;
            };

            const catalog = (modelCatalog[provider] || []);
            const catalogValueSet = new Set(catalog.map(function(m) { return m.value; }));
            const catalogInstalled = catalog.filter(function(m) { return isInstalled(m.value); });
            const catalogMissing = catalog.filter(function(m) { return !isInstalled(m.value); });
            // User-pulled models that we don't have a catalog row for.
            const extras = installed.filter(function(name) {
                if (catalogValueSet.has(name)) return false;
                if (provider === 'ollama' && name.endsWith(':latest')) {
                    if (catalogValueSet.has(name.slice(0, -7))) return false;
                }
                return true;
            });
            const totalInstalled = catalogInstalled.length + extras.length;

            if (totalInstalled === 0 && catalogMissing.length === 0) {
                return '';
            }

            const rows = [];
            if (totalInstalled > 0) {
                rows.push('<div class="model-list-section">Available offline ('
                    + totalInstalled + ')</div>');
                catalogInstalled.forEach(function(m) {
                    rows.push(modelRow(m.value, m.label, provider, 'delete'));
                });
                extras.forEach(function(name) {
                    rows.push(modelRow(name, name, provider, 'delete'));
                });
            }
            if (catalogMissing.length > 0) {
                rows.push('<div class="model-list-section">Available to download ('
                    + catalogMissing.length + ')</div>');
                catalogMissing.forEach(function(m) {
                    rows.push(modelRow(m.value, m.label, provider, 'pull'));
                });
            }

            return '<details class="model-manager" open>'
                + '<summary>Manage ' + escapeHtml(label) + ' models</summary>'
                + '<div class="model-list">' + rows.join('') + '</div>'
                + '</details>';
        }

        function modelRow(value, label, provider, action) {
            const icon = action === 'delete' ? trashIconSvg() : downloadIconSvg();
            const title = action === 'delete' ? 'Remove from local cache' : 'Download to local cache';
            const aria = action === 'delete' ? ('Remove ' + value) : ('Download ' + value);
            const labelHtml = (label && label !== value)
                ? '<span class="model-row-label"> &mdash; ' + escapeHtml(label) + '</span>'
                : '';
            // Only "Available offline" rows (action === 'delete') are
            // selectable — picking one loads it into the Default Model
            // field above and triggers the existing setHiddenModelValue
            // flow so Save Keys persists it. Catalog rows that aren't
            // pulled yet stay non-selectable; they'd 404 if selected.
            const isSelectable = action === 'delete';
            const currentValue = (modelHiddenInput.value || '').trim();
            const isSelected = isSelectable && currentValue === value;
            const inner = '<code>' + escapeHtml(value) + '</code>' + labelHtml;
            const textHtml = isSelectable
                ? '<button type="button" class="model-row-select"'
                    + ' data-select-model="' + escapeHtml(value) + '"'
                    + ' aria-pressed="' + (isSelected ? 'true' : 'false') + '"'
                    + ' title="Use this model as the Default Model">'
                    + (isSelected
                        ? '<span class="model-row-check" aria-hidden="true">✓</span>'
                        : '')
                    + inner
                    + '</button>'
                : '<div class="model-row-text">' + inner + '</div>';
            return '<div class="model-row" data-row-action="' + action + '"'
                + (isSelected ? ' data-selected="true"' : '')
                + '>'
                + textHtml
                + '<button type="button" class="model-action-btn"'
                + ' data-action="' + action + '"'
                + ' data-provider="' + escapeHtml(provider) + '"'
                + ' data-model="' + escapeHtml(value) + '"'
                + ' title="' + escapeHtml(title) + '"'
                + ' aria-label="' + escapeHtml(aria) + '">'
                + icon + '</button>'
                + '</div>';
        }

        function selectModelFromRow(value) {
            const provider = (providerSelect.value || '').trim();
            const catalog = modelCatalog[provider] || [];
            const inCatalog = catalog.some(function(m) { return m.value === value; });
            if (inCatalog) {
                modelSelect.value = value;
                modelCustomInput.value = value;
                showCustomInput(false);
            } else {
                // User-pulled model that isn't in the dropdown's options —
                // route it through the "Custom" path so the value still
                // persists on Save Keys.
                modelSelect.value = CUSTOM_VALUE;
                modelCustomInput.value = value;
                showCustomInput(true);
            }
            setHiddenModelValue(value);
        }

        // Single click handler delegated from document, so freshly-rendered
        // rows after a refresh keep working without re-binding. Pull/delete
        // plumbing lives in the shared handleLocalModelAction()
        // (static/js/app.js); this wrapper maps the settings page's data
        // attributes onto it and refreshes availability afterwards.
        async function handleModelActionClick(button) {
            await handleLocalModelAction(
                button,
                button.dataset.action,
                button.dataset.provider,
                button.dataset.model,
                checkLocalModelAvailability
            );
        }

        document.addEventListener('click', function(ev) {
            const btn = ev.target.closest && ev.target.closest('.model-action-btn');
            if (!btn) return;
            ev.preventDefault();
            handleModelActionClick(btn);
        });

        document.addEventListener('click', function(ev) {
            const sel = ev.target.closest && ev.target.closest('[data-select-model]');
            if (!sel) return;
            ev.preventDefault();
            selectModelFromRow(sel.getAttribute('data-select-model'));
        });

        // Toggle dropdown vs. manage-list as the single selector. We watch
        // the status panel for a `.model-manager` element: if one is
        // present, the manage-list is taking over selection so we hide
        // the dropdown; otherwise (e.g. provider isn't local, or the
        // Ollama daemon is down) the dropdown stays visible as the
        // fallback selector.
        function syncDropdownVisibility() {
            const formGroup = modelHiddenInput.closest('.form-group');
            if (!formGroup) return;
            const hasManageList = !!document.querySelector('#local-model-status .model-manager');
            formGroup.classList.toggle('is-local-provider', hasManageList);
        }
        const _statusPanel = document.getElementById('local-model-status');
        if (_statusPanel && typeof MutationObserver !== 'undefined') {
            new MutationObserver(syncDropdownVisibility).observe(_statusPanel, {
                childList: true,
                subtree: true,
            });
        }
        syncDropdownVisibility();

        function wireRefreshLink(scope) {
            const link = scope.querySelector('[data-local-refresh]');
            if (!link) return;
            link.addEventListener('click', function(ev) {
                ev.preventDefault();
                checkLocalModelAvailability();
            });
        }

        function showCustomInput(show) {
            modelCustomInput.style.display = show ? '' : 'none';
        }

        function renderModelOptions(provider, preferredValue) {
            const models = groupedModelsForProvider(provider);
            const currentValue = (preferredValue || '').trim();
            const fallback = (defaultModelByProvider[provider] || '').trim();

            modelSelect.innerHTML = '';
            const grouped = {};
            models.forEach(function(model) {
                const groupName = model.group || 'Models';
                if (!grouped[groupName]) grouped[groupName] = [];
                grouped[groupName].push(model);
            });

            Object.keys(grouped).forEach(function(groupName) {
                const optgroup = document.createElement('optgroup');
                optgroup.label = groupName;
                grouped[groupName].forEach(function(model) {
                    const option = document.createElement('option');
                    option.value = model.value;
                    option.textContent = model.label;
                    optgroup.appendChild(option);
                });
                modelSelect.appendChild(optgroup);
            });

            const customOption = document.createElement('option');
            customOption.value = CUSTOM_VALUE;
            customOption.textContent = 'Custom model / deployment';
            modelSelect.appendChild(customOption);

            const inCatalog = models.some(function(model) {
                return model.value === currentValue;
            });

            if (currentValue && inCatalog) {
                modelSelect.value = currentValue;
                modelCustomInput.value = currentValue;
                showCustomInput(false);
                setHiddenModelValue(currentValue);
                return;
            }

            if (currentValue) {
                modelSelect.value = CUSTOM_VALUE;
                modelCustomInput.value = currentValue;
                showCustomInput(true);
                setHiddenModelValue(currentValue);
                return;
            }

            if (fallback && models.some(function(model) { return model.value === fallback; })) {
                modelSelect.value = fallback;
                modelCustomInput.value = fallback;
                showCustomInput(false);
                setHiddenModelValue(fallback);
                return;
            }

            if (models.length) {
                modelSelect.value = models[0].value;
                modelCustomInput.value = models[0].value;
                showCustomInput(false);
                setHiddenModelValue(models[0].value);
                return;
            }

            modelSelect.value = CUSTOM_VALUE;
            modelCustomInput.value = fallback;
            showCustomInput(true);
            setHiddenModelValue(fallback);
        }

        providerSelect.addEventListener('change', function() {
            renderModelOptions(providerSelect.value, modelHiddenInput.value);
        });

        modelSelect.addEventListener('change', function() {
            if (modelSelect.value === CUSTOM_VALUE) {
                showCustomInput(true);
                setHiddenModelValue(modelCustomInput.value);
                modelCustomInput.focus();
                return;
            }
            showCustomInput(false);
            modelCustomInput.value = modelSelect.value;
            setHiddenModelValue(modelSelect.value);
        });

        modelCustomInput.addEventListener('input', function() {
            if (modelSelect.value === CUSTOM_VALUE) {
                setHiddenModelValue(modelCustomInput.value);
            }
        });

        renderModelOptions(providerSelect.value, modelHiddenInput.value);
    }

    function initializeCheckboxFields() {
        document.querySelectorAll('[data-checkbox-for]').forEach(function(checkbox) {
            const hiddenId = checkbox.getAttribute('data-checkbox-for');
            const hiddenInput = document.getElementById(hiddenId);
            if (!hiddenInput) return;

            function sync() {
                hiddenInput.value = checkbox.checked ? '1' : '0';
            }

            checkbox.addEventListener('change', sync);
            sync();
        });
    }

    function initializeSandboxConditionalFields() {
        const sandboxProviderSelect = document.getElementById('MEMORIZZ_DEFAULT_SANDBOX_PROVIDER');
        if (!sandboxProviderSelect) return;

        const conditionalGroups = document.querySelectorAll('[data-visible-if-sandbox-provider]');

        function applyVisibility() {
            const selectedProvider = (sandboxProviderSelect.value || '').trim().toLowerCase();
            conditionalGroups.forEach(function(group) {
                const requiredProvider = (group.getAttribute('data-visible-if-sandbox-provider') || '').trim().toLowerCase();
                const visible = !requiredProvider || requiredProvider === selectedProvider;
                group.style.display = visible ? '' : 'none';
                group.querySelectorAll('input, select, textarea, button').forEach(function(control) {
                    control.disabled = !visible;
                });
            });
        }

        sandboxProviderSelect.addEventListener('change', applyVisibility);
        applyVisibility();
    }

    initializeLlmModelControls();
    initializeCheckboxFields();
    initializeSandboxConditionalFields();
})();

// Section index: jump links with the section in view highlighted, and a
// finder (/ focuses it) that narrows the form to matching fields. Hidden
// fields still submit, and blank ones keep their saved value.
(function() {
    const links = Array.from(document.querySelectorAll('[data-section-link]'));
    const sections = links
        .map(function(link) { return document.getElementById(link.dataset.sectionLink); })
        .filter(Boolean);
    const filter = document.getElementById('settings-filter');
    const none = document.getElementById('settings-none');

    function markCurrent() {
        let current = sections[0];
        sections.forEach(function(section) {
            if (!section.hidden && section.getBoundingClientRect().top <= 140) current = section;
        });
        if ((window.innerHeight + window.scrollY) >= document.documentElement.scrollHeight - 4) {
            const shown = sections.filter(function(section) { return !section.hidden; });
            current = shown[shown.length - 1] || current;
        }
        links.forEach(function(link) {
            if (current && link.dataset.sectionLink === current.id) link.setAttribute('aria-current', 'true');
            else link.removeAttribute('aria-current');
        });
    }
    let pending = false;
    window.addEventListener('scroll', function() {
        if (pending) return;
        pending = true;
        window.requestAnimationFrame(function() { pending = false; markCurrent(); });
    }, { passive: true });
    markCurrent();

    function applyFilter() {
        const query = (filter.value || '').trim().toLowerCase();
        let matches = 0;
        sections.forEach(function(section) {
            const groups = section.querySelectorAll('[data-setting-search]');
            let shown = 0;
            groups.forEach(function(group) {
                const hit = !query || group.dataset.settingSearch.includes(query);
                group.classList.toggle('is-filtered-out', !hit);
                if (hit) shown += 1;
            });
            const keep = !query || shown > 0;
            section.hidden = !keep;
            const link = links.find(function(item) { return item.dataset.sectionLink === section.id; });
            if (link) link.parentElement.hidden = !keep;
            matches += query ? shown : 1;
        });
        if (none) none.hidden = matches > 0;
        markCurrent();
    }
    if (filter) {
        filter.addEventListener('input', applyFilter);
        filter.addEventListener('keydown', function(event) {
            if (event.key === 'Escape') { filter.value = ''; applyFilter(); filter.blur(); }
        });
    }
    document.addEventListener('keydown', function(event) {
        if (event.key !== '/' || event.metaKey || event.ctrlKey || event.altKey) return;
        const target = event.target;
        if (target.closest && target.closest('input, textarea, select, [contenteditable="true"]')) return;
        if (!filter) return;
        event.preventDefault();
        filter.focus();
    });
})();
</script>
{% endblock %}