{% extends "base.html" %}

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

{% block head %}<link rel="stylesheet" href="/static/css/pages/settings.css?v=4"><link rel="stylesheet" href="/static/css/components/dialogs.css?v=2"><script src="/static/js/local-models.js?v=1"></script><script src="/static/js/page-dialogs.js?v=1"></script><script src="/static/js/connected-apps.js?v=2" defer></script>{% endblock %}

{% block content %}
{% from '_ui.html' import page_header, empty_state, id_chip %}
{% 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 %}
            <li><a href="#connected-apps" data-section-link="connected-apps">Connected apps<span class="settings-count{% if connected_apps.apps %} is-set{% endif %}" title="{{ connected_apps.apps|length }} connected">{{ connected_apps.apps|length }}</span></a></li>
        </ol>
        <p class="settings-none" id="settings-none" hidden>No setting matches this search.</p>
    </nav>

<div class="settings-main">
<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>

{% set apps_view = connected_apps %}
<section class="panel settings-section apps-section" id="connected-apps" aria-labelledby="connected-apps-title">
    <div class="panel-header">
        <div>
            <h2 class="panel-title" id="connected-apps-title">Connected apps</h2>
            <p class="panel-description">Cloud apps such as Grok Bot and ChatGPT dots can use this memory. You approve each app with a pairing code, and all the apps you approve share one memory.</p>
        </div>
        <span class="panel-meta settings-section-count" id="apps-count">{{ apps_view.apps|length }} connected</span>
    </div>
    <div data-setting-search="connected apps grok bot chatgpt dots claude pairing code mcp oauth plugins connector shared local agents">
        {% if apps_view.error %}<p class="error-message" role="alert">{{ apps_view.error }}</p>{% endif %}
        <div class="table-scroll" id="apps-list"{% if not apps_view.apps %} hidden{% endif %}>
            <table class="data-table apps-table">
                <thead><tr><th scope="col">App</th><th scope="col">Memory of</th><th scope="col">Can</th><th scope="col">Connected</th><th scope="col">Last used</th>{% if not apps_view.read_only %}<th scope="col"><span class="sr-only">Disconnect</span></th>{% endif %}</tr></thead>
                <tbody>
                {% for app in apps_view.apps %}
                <tr data-grant-id="{{ app.grant_id }}">
                    <td class="apps-name"><strong>{{ app.app_name }}</strong></td>
                    <td data-label="Memory of"><span{% if not app.shared %} class="mono"{% endif %}>{{ app.memory_of }}</span></td>
                    <td data-label="Can"><span class="pill{% if not app.read_only %} pill--success{% endif %}">{{ app.can }}</span></td>
                    <td data-label="Connected"><time>{{ app.connected }}</time></td>
                    <td data-label="Last used"{% if app.last_used_title %} title="{{ app.last_used_title }}"{% endif %}>{{ app.last_used }}</td>
                    {% if not apps_view.read_only %}<td class="apps-action"><button type="button" class="btn btn-sm btn-danger" data-mutates data-disconnect="{{ app.grant_id }}" data-app-name="{{ app.app_name }}" aria-label="Disconnect {{ app.app_name }}">Disconnect</button></td>{% endif %}
                </tr>
                {% endfor %}
                </tbody>
            </table>
        </div>
        <div id="apps-empty"{% if apps_view.apps %} hidden{% endif %}>
            {{ empty_state('No apps are connected yet', 'Put your memory online, then sign in from the app with a pairing code.') }}
        </div>

        <div class="apps-grid">
            <div class="apps-card">
                <h3 class="apps-heading">Pairing code</h3>
                {% if apps_view.read_only %}
                <p class="apps-text">This UI is read-only, so apps can't be approved or disconnected here. In a terminal, <code>memorizz mcp apps pair</code> makes a code and <code>memorizz mcp apps revoke</code> disconnects an app.</p>
                {% else %}
                <p class="apps-text">Each code approves one app to use <strong class="mono">{{ apps_view.principal }}</strong>'s memory, or your local agents' if you choose to share it. It works once, for {{ apps_view.pairing_minutes }} minutes.</p>
                <div class="apps-pair-controls">
                    <button type="button" class="btn btn-primary" id="apps-pair" data-mutates>Make a pairing code</button>
                    <label class="apps-check" for="apps-read-only"><input type="checkbox" id="apps-read-only"> Read only</label>
                    <label class="apps-check" for="apps-shared"><input type="checkbox" id="apps-shared"> Share with my local agents</label>
                </div>
                <p class="apps-hint">Read only: the app can look up memories but not save new ones.</p>
                <p class="apps-hint">Share with my local agents: the app uses the same memory as Claude Code, Codex and your other agents on this computer, in every project, including past sessions. It can change those memories too, unless it's read only.</p>
                <div aria-live="polite">
                    <div class="apps-code" id="apps-code" hidden>
                        <div class="apps-code-row">
                            <code class="apps-code-value" id="apps-code-value"></code>
                            <button type="button" class="btn btn-sm apps-copy" id="apps-copy" data-copy="" title="Copy the code"><span class="apps-copy-idle">Copy</span><span class="apps-copy-done">Copied</span></button>
                        </div>
                        <p class="apps-code-note" id="apps-code-note"></p>
                    </div>
                </div>
                <p class="apps-error" id="apps-error" role="alert" hidden></p>
                {% endif %}
            </div>
            <div class="apps-card">
                <h3 class="apps-heading">Set up</h3>
                <ol class="apps-steps">
                    <li><strong>Put your memory online.</strong> In a terminal, run {{ id_chip('memorizz mcp apps serve --tunnel', 40) }}, or pass <code>--public-url https://…</code> for a fixed address. Keep it running; it prints the server URL.</li>
                    <li><strong>Grok Bot.</strong> Connect apps → Add a custom connector → name it memorizz, type Remote HTTPS, paste the URL (leave the OAuth fields empty), and sign in with a pairing code.</li>
                    <li><strong>Grok.</strong> grok.com/connectors → New Connector → Custom → paste the URL, and sign in with a pairing code.</li>
                    <li><strong>ChatGPT dots.</strong> Plugins → + → Add custom MCP server (Developer mode) → paste the URL, choose OAuth, and sign in with a pairing code. Your dot uses your plugins.</li>
                    <li><strong>Claude.</strong> On claude.ai: Customize → Connectors → Add custom connector → paste the URL. In Claude Code: <code>claude mcp add --transport http memorizz &lt;URL&gt;</code>, then <code>claude mcp login memorizz</code>.</li>
                </ol>
                <p class="apps-hint">A <code>--tunnel</code> address changes every time it starts, so the apps must be connected again. Use <code>--public-url</code> with a fixed address to keep them.</p>
            </div>
        </div>
    </div>
</section>
</div>
</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();
            localModels.schedule();
        }

        // Availability banner + "Manage models" panel for local providers,
        // rendered by the shared widget (static/js/local-models.js). The
        // panel's catalog is the same `modelCatalog` the dropdown uses, so
        // the two surfaces never drift; picking an "Available offline" row
        // loads it into the Default Model field via selectModelFromRow so
        // Save Keys persists it.
        const localModels = window.MemorizzLocalModels.mount({
            statusId: 'local-model-status',
            providers: ['ollama', 'huggingface'],
            provider: function() { return (providerSelect.value || '').trim(); },
            model: function() { return (modelHiddenInput.value || '').trim(); },
            refreshAttr: 'data-local-refresh',
            copy: {
                refreshText: 'refresh this check',
                ollamaMissing: 'Run {pull} in a terminal, or {browse}. Then {refresh}.',
                huggingfaceUnavailable: 'Install the SDK with <code>pip install memorizz[huggingface]</code>, then {refresh}.',
                huggingfaceMissing: 'It will be downloaded the first time the agent loads (a few hundred MB to several GB). You can pre-download with {download}, or {card}. Then {refresh}.',
            },
            manage: {
                catalog: modelCatalog,
                attrPrefix: 'data-',
                selectTitle: 'Use this model as the Default Model',
                onSelect: selectModelFromRow,
            },
        });

        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);
        }

        // 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 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 %}