{% extends "base.html" %}

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

{% block content %}
<style>
    /* Local-model manager widget styles are shared in styles.css
       (.local-model-status .model-manager etc). Below: page-specific rules. */

    /* When the manage-list is the active selector for a local provider,
       hide the redundant dropdown + custom input + hint so users only have
       one way to pick a model. The label-row (with the Set/Missing badge)
       stays visible so the field's status is still legible. */
    .form-group.is-local-provider #MEMORIZZ_DEFAULT_LLM_MODEL_select,
    .form-group.is-local-provider #MEMORIZZ_DEFAULT_LLM_MODEL_custom,
    .form-group.is-local-provider > .form-hint {
        display: none !important;
    }
</style>
<div class="page-header">
    <h1>Settings</h1>
    <p>Manage provider credentials and saved defaults.</p>
</div>

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

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

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

<form method="post" action="/settings" class="agent-form">
    <div class="detail-section">
        <h2>Notes</h2>
        <p>Save target: <code>{{ env_file_path }}</code>. Active UI memory provider: <strong>{{ provider_type }}</strong>.</p>
        <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>
    </div>

    {% for section in settings_sections %}
    <div class="detail-section">
        <h2>{{ section.title }}</h2>
        {% if section.description %}
        <p class="form-hint">{{ section.description }}</p>
        {% endif %}
        {% 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="badge badge-success">Ready</span>
                    {% else %}
                    <span class="badge badge-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"
                {% 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="badge badge-success">Set</span>
                    {% else %}
                    <span class="badge badge-warning">Missing</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 %}
            </div>
            {% endfor %}
        </div>
    </div>
    {% endfor %}

    <div class="form-actions">
        <button type="submit" class="btn btn-primary">Save Settings</button>
    </div>
</form>
{% 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();
        }

        function escapeHtml(s) {
            return String(s).replace(/[&<>"']/g, function(c) {
                return ({
                    '&': '&amp;', '<': '&lt;', '>': '&gt;',
                    '"': '&quot;', "'": '&#39;'
                })[c];
            });
        }

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

        function trashIconSvg() {
            return '<svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">'
                + '<polyline points="3 6 5 6 21 6"></polyline>'
                + '<path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"></path>'
                + '<path d="M10 11v6"></path><path d="M14 11v6"></path>'
                + '<path d="M9 6V4a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v2"></path>'
                + '</svg>';
        }

        function downloadIconSvg() {
            return '<svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">'
                + '<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>'
                + '<polyline points="7 10 12 15 17 10"></polyline>'
                + '<line x1="12" y1="15" x2="12" y2="3"></line>'
                + '</svg>';
        }

        // 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();
})();
</script>
{% endblock %}