prismcast 1.4.2 → 1.5.0

package/dist/routes/root/scripts/config.js

@@ -0,0 +1,1662 @@
+/* Copyright(C) 2024-2026, HJD (https://github.com/hjdhjd). All rights reserved.
+ *
+ * config.ts: Client-side JavaScript generator for the PrismCast configuration subtab.
+ */
+import { VIDEO_QUALITY_PRESETS } from "../../../config/presets.js";
+import { isRunningAsService } from "../../../utils/index.js";
+export function generateConfigSubtabScript() {
+    // Build preset data for auto-filling bitrate and frame rate when preset changes. Viewport is derived server-side and not included here.
+    const presetBlocks = [];
+    for (const preset of VIDEO_QUALITY_PRESETS) {
+        // Only include bitrate and frame rate, not viewport (viewport is derived from preset server-side).
+        const bitrateValue = preset.values["streaming.videoBitsPerSecond"];
+        const frameRateValue = preset.values["streaming.frameRate"];
+        // Convert bitrate from bps to Mbps for display.
+        const block = [
+            "    '" + preset.id + "': {",
+            "      'streaming-videoBitsPerSecond': " + String(bitrateValue / 1000000) + ",",
+            "      'streaming-frameRate': " + String(frameRateValue),
+            "    }"
+        ].join("\n");
+        presetBlocks.push(block);
+    }
+    // Pass service status to JavaScript for conditional messaging.
+    const isService = isRunningAsService();
+    return [
+        "<script>",
+        "(function() {",
+        // Service mode flag for conditional UI behavior.
+        "  var isServiceMode = " + String(isService) + ";",
+        // Preset values for auto-filling bitrate and frame rate.
+        "  var presetValues = {",
+        presetBlocks.join(",\n"),
+        "  };",
+        // When quality preset changes, auto-fill bitrate and frame rate with preset values.
+        "  function onPresetChange(presetId) {",
+        "    var values = presetValues[presetId];",
+        "    if (!values) return;",
+        "    for (var inputId in values) {",
+        "      var input = document.getElementById(inputId);",
+        "      if (input) {",
+        "        input.value = values[inputId];",
+        "        input.dispatchEvent(new Event('input', { bubbles: true }));",
+        "      }",
+        "    }",
+        "  }",
+        // Show a toast notification. Auto-dismiss durations: success/info = 5s, warning = 8s, error = no auto-dismiss. Optional action: { label, onclick } appends an
+        // inline button between the message text and the close button.
+        "  function showToast(message, type, duration, action) {",
+        "    var container = document.getElementById('toast-container');",
+        "    if (!container) return;",
+        "    var toast = document.createElement('div');",
+        "    toast.className = 'toast ' + (type || 'info');",
+        "    toast.textContent = message;",
+        "    toast.setAttribute('role', (type === 'error' || type === 'warning') ? 'alert' : 'status');",
+        "    if (action && action.label) {",
+        "      var actionBtn = document.createElement('button');",
+        "      actionBtn.type = 'button';",
+        "      actionBtn.className = 'toast-action';",
+        "      actionBtn.textContent = action.label;",
+        "      actionBtn.onclick = function() { if (action.onclick) action.onclick(); dismissToast(toast); };",
+        "      toast.appendChild(actionBtn);",
+        "    }",
+        "    var closeBtn = document.createElement('button');",
+        "    closeBtn.type = 'button';",
+        "    closeBtn.className = 'toast-close';",
+        "    closeBtn.textContent = '\\u00d7';",
+        "    closeBtn.setAttribute('aria-label', 'Dismiss');",
+        "    closeBtn.onclick = function() { dismissToast(toast); };",
+        "    toast.appendChild(closeBtn);",
+        "    container.appendChild(toast);",
+        "    var ms = duration !== undefined ? duration : type === 'error' ? 0 : type === 'warning' ? 8000 : 5000;",
+        "    if (ms > 0) { setTimeout(function() { dismissToast(toast); }, ms); }",
+        "  }",
+        // Expose showToast globally so other script blocks (e.g., channels-subtab IIFE) can use the toast system.
+        "  window.showToast = showToast;",
+        // Dismiss a toast with slide-out animation.
+        "  function dismissToast(toast) {",
+        "    if (toast.classList.contains('toast-exit')) return;",
+        "    toast.classList.add('toast-exit');",
+        "    toast.addEventListener('animationend', function() { if (toast.parentNode) toast.parentNode.removeChild(toast); });",
+        "  }",
+        // Hint appended to success toasts when a channel operation changes M3U playlist content that Channels DVR consumes.
+        "  var PLAYLIST_HINT = ' Reload the playlist in Channels DVR to see this change.';",
+        // Queue a toast to appear after the next page reload.
+        "  function showToastAfterReload(message, type) {",
+        "    sessionStorage.setItem('pendingToast', JSON.stringify({ message: message, type: type || 'success' }));",
+        "    location.reload();",
+        "  }",
+        // Interval handle for restart polling.
+        "  var restartPollInterval = null;",
+        // Track whether a restart is pending (deferred due to active streams).
+        "  var pendingRestart = false;",
+        // Show the pending restart dialog when streams are active.
+        "  function showPendingRestartDialog(streamCount) {",
+        "    pendingRestart = true;",
+        "    document.getElementById('restart-stream-count').textContent = streamCount;",
+        "    document.getElementById('restart-dialog').style.display = 'flex';",
+        "    updateRestartDialogStatus();",
+        "  }",
+        // Update the restart dialog when stream count changes. Exposed on window so the status script's streamRemoved handler can trigger it across script blocks.
+        "  function updateRestartDialogStatus() {",
+        "    var count = Object.keys(streamData).length;",
+        "    document.getElementById('restart-stream-count').textContent = count;",
+        "    if (count === 0 && pendingRestart) {",
+        "      pendingRestart = false;",
+        "      document.getElementById('restart-dialog').style.display = 'none';",
+        "      triggerRestart();",
+        "    }",
+        "  }",
+        "  window.updateRestartDialogStatus = updateRestartDialogStatus;",
+        // Cancel the pending restart.
+        "  window.cancelPendingRestart = function() {",
+        "    pendingRestart = false;",
+        "    document.getElementById('restart-dialog').style.display = 'none';",
+        "    showToast('Restart cancelled. Changes will apply on next restart.', 'info');",
+        "  };",
+        // Force immediate restart despite active streams.
+        "  window.forceRestart = function() {",
+        "    pendingRestart = false;",
+        "    document.getElementById('restart-dialog').style.display = 'none';",
+        "    fetch('/config/restart-now', { method: 'POST' })",
+        "      .then(function(response) {",
+        "        if (response.ok) {",
+        "          waitForServerRestart();",
+        "        } else {",
+        "          return response.json().then(function(data) {",
+        "            throw new Error(data.message || 'Restart failed');",
+        "          });",
+        "        }",
+        "      })",
+        "      .catch(function(err) {",
+        "        showToast('Failed to restart: ' + err.message, 'error');",
+        "      });",
+        "  };",
+        // Trigger restart (called when streams reach 0).
+        "  function triggerRestart() {",
+        "    fetch('/config/restart-now', { method: 'POST' })",
+        "      .then(function(response) {",
+        "        if (response.ok) {",
+        "          waitForServerRestart();",
+        "        }",
+        "      })",
+        "      .catch(function() {",
+        "        showToast('Failed to trigger restart. Please restart manually.', 'error');",
+        "      });",
+        "  }",
+        // Wait for server restart by polling /health, then reload.
+        "  function waitForServerRestart() {",
+        "    var attempts = 0;",
+        "    var maxAttempts = 30;",
+        "    showToast('Restarting server...', 'info', 0);",
+        "    if (restartPollInterval) { clearInterval(restartPollInterval); }",
+        "    restartPollInterval = setInterval(function() {",
+        "      attempts++;",
+        "      fetch('/health')",
+        "        .then(function(response) {",
+        "          if (response.ok) {",
+        "            clearInterval(restartPollInterval);",
+        "            restartPollInterval = null;",
+        "            showToastAfterReload('Server restarted.', 'success');",
+        "          }",
+        "        })",
+        "        .catch(function() {",
+        "          if (attempts >= maxAttempts) {",
+        "            clearInterval(restartPollInterval);",
+        "            restartPollInterval = null;",
+        "            showToast('Server did not restart within 30 seconds. Please check the server manually.', 'error');",
+        "          }",
+        "        });",
+        "    }, 1000);",
+        "  }",
+        // Escape HTML entities in text for safe display.
+        "  function escapeHtmlText(text) {",
+        "    var div = document.createElement('div');",
+        "    div.textContent = text;",
+        "    return div.innerHTML;",
+        "  }",
+        // Open the changelog modal and fetch content dynamically. Also checks whether an upgrade button should be shown.
+        "  window.openChangelogModal = function() {",
+        "    var modal = document.getElementById('changelog-modal');",
+        "    if (!modal) return;",
+        "    var title = modal.querySelector('.changelog-title');",
+        "    var loading = modal.querySelector('.changelog-loading');",
+        "    var content = modal.querySelector('.changelog-content');",
+        "    var error = modal.querySelector('.changelog-error');",
+        "    var upgradeBtn = document.getElementById('changelog-upgrade-btn');",
+        "    modal.style.display = 'flex';",
+        "    loading.style.display = 'block';",
+        "    content.style.display = 'none';",
+        "    error.style.display = 'none';",
+        "    if (upgradeBtn) upgradeBtn.style.display = 'none';",
+        "    fetch('/version/changelog')",
+        "      .then(function(res) { return res.json(); })",
+        "      .then(function(data) {",
+        "        loading.style.display = 'none';",
+        "        title.textContent = \"What's new in v\" + data.displayVersion;",
+        "        if (data.items && data.items.length > 0) {",
+        "          var html = '<ul class=\"changelog-list\">';",
+        "          for (var i = 0; i < data.items.length; i++) {",
+        "            html += '<li>' + escapeHtmlText(data.items[i]) + '</li>';",
+        "          }",
+        "          html += '</ul>';",
+        "          content.innerHTML = html;",
+        "          content.style.display = 'block';",
+        "        } else {",
+        "          error.style.display = 'block';",
+        "        }",
+        "        if (data.updateAvailable && upgradeBtn) { upgradeBtn.style.display = ''; }",
+        "      })",
+        "      .catch(function() {",
+        "        loading.style.display = 'none';",
+        "        error.style.display = 'block';",
+        "      });",
+        "  };",
+        // Close the changelog modal.
+        "  window.closeChangelogModal = function() {",
+        "    var modal = document.getElementById('changelog-modal');",
+        "    if (modal) { modal.style.display = 'none'; }",
+        "  };",
+        // Start the upgrade process from the changelog modal. Fetches upgrade info, confirms with the user if there are active streams, then executes the upgrade.
+        "  window.startUpgrade = function() {",
+        "    fetch('/upgrade/info')",
+        "      .then(function(res) { return res.json(); })",
+        "      .then(function(info) {",
+        "        if (!info.upgradeable) {",
+        "          closeChangelogModal();",
+        "          var msg = info.method === 'docker'",
+        "            ? 'Docker containers cannot be upgraded in-place. Pull the latest image and recreate the container.'",
+        "            : 'Manual upgrade required: ' + info.upgradeCommand;",
+        "          showToast(msg, 'info', 8000);",
+        "          return;",
+        "        }",
+        "        var streamCount = Object.keys(streamData).length;",
+        "        if (streamCount > 0) {",
+        "          if (!confirm('There are ' + streamCount + ' active stream(s). Upgrading will interrupt them. Continue?')) return;",
+        "        }",
+        "        closeChangelogModal();",
+        "        showToast('Upgrading PrismCast...', 'info', 0);",
+        "        return fetch('/upgrade', { method: 'POST' })",
+        "          .then(function(res) { return res.json(); })",
+        "          .then(function(result) {",
+        "            if (result.success && result.willRestart) {",
+        "              waitForServerRestart();",
+        "            } else if (result.success) {",
+        "              showToast('Upgrade complete. Please restart PrismCast manually.', 'success', 8000);",
+        "            } else {",
+        "              showToast('Upgrade failed: ' + result.message, 'error');",
+        "            }",
+        "          });",
+        "      })",
+        "      .catch(function(err) {",
+        "        showToast('Upgrade failed: ' + err.message, 'error');",
+        "      });",
+        "  };",
+        // Check for updates manually. Updates the version link in-place when a new version is found.
+        "  window.checkForUpdates = function() {",
+        "    var btn = document.querySelector('.version-check');",
+        "    if (!btn || btn.classList.contains('checking')) return;",
+        "    btn.classList.add('checking');",
+        "    fetch('/version/check', { method: 'POST' })",
+        "      .then(function(res) { return res.json(); })",
+        "      .then(function(data) {",
+        "        btn.classList.remove('checking');",
+        "        if (data.updateAvailable && data.latestVersion) {",
+        "          var link = document.querySelector('.version-container .version');",
+        "          if (link && !link.classList.contains('version-update')) {",
+        "            link.textContent = 'v' + data.currentVersion + ' \\u2192 v' + data.latestVersion;",
+        "            link.classList.add('version-update');",
+        "          }",
+        "        } else {",
+        "          btn.classList.add('up-to-date');",
+        "          setTimeout(function() { btn.classList.remove('up-to-date'); }, 2000);",
+        "        }",
+        "      })",
+        "      .catch(function() {",
+        "        btn.classList.remove('checking');",
+        "        btn.classList.add('check-error');",
+        "        setTimeout(function() { btn.classList.remove('check-error'); }, 2000);",
+        "      });",
+        "  };",
+        // Clear all field error indicators.
+        "  function clearFieldErrors() {",
+        "    var errorInputs = document.querySelectorAll('.form-input.error, .form-select.error');",
+        "    for (var i = 0; i < errorInputs.length; i++) {",
+        "      errorInputs[i].classList.remove('error');",
+        "    }",
+        "    var errorMsgs = document.querySelectorAll('.form-error.dynamic');",
+        "    for (var j = 0; j < errorMsgs.length; j++) {",
+        "      errorMsgs[j].remove();",
+        "    }",
+        "  }",
+        // Display field-level errors from server response.
+        "  function displayFieldErrors(errors) {",
+        "    for (var path in errors) {",
+        "      var inputId = path.replace(/\\./g, '-');",
+        "      var input = document.getElementById(inputId);",
+        "      if (input) {",
+        "        input.classList.add('error');",
+        "        var errorDiv = document.createElement('div');",
+        "        errorDiv.className = 'form-error dynamic';",
+        "        errorDiv.textContent = errors[path];",
+        "        input.closest('.form-group').appendChild(errorDiv);",
+        "      }",
+        "    }",
+        "  }",
+        // Set a form input's value, handling checkbox and standard input types uniformly.
+        "  function setInputValue(input, value) {",
+        "    if (input.type === 'checkbox') {",
+        "      input.checked = value === 'true';",
+        "    } else {",
+        "      input.value = value;",
+        "    }",
+        "    if (input.hasAttribute('data-checkbox-list')) {",
+        "      var values = JSON.parse(value || '[]');",
+        "      var grid = input.closest('.form-group').querySelector('.checkbox-list-grid');",
+        "      if (grid) {",
+        "        var cbs = grid.querySelectorAll('input[type=\"checkbox\"]');",
+        "        for (var k = 0; k < cbs.length; k++) {",
+        "          cbs[k].checked = values.indexOf(cbs[k].value) !== -1;",
+        "        }",
+        "      }",
+        "    }",
+        "  }",
+        // Get a form input's current value as a string, handling checkbox and standard input types uniformly.
+        "  function getInputValue(input) {",
+        "    return input.type === 'checkbox' ? String(input.checked) : input.value;",
+        "  }",
+        // Toggle dependent fields when a boolean checkbox changes. Fields with data-depends-on are visually greyed out and removed from the tab order when the
+        // referenced checkbox is unchecked. This function is defined at the top level so that both event handlers and reset functions can call it.
+        "  function updateDependentFields(checkboxId) {",
+        "    var checkbox = document.getElementById(checkboxId);",
+        "    if (!checkbox) return;",
+        "    var dependents = document.querySelectorAll('[data-depends-on=\"' + checkboxId + '\"]');",
+        "    for (var i = 0; i < dependents.length; i++) {",
+        "      if (checkbox.checked) {",
+        "        dependents[i].classList.remove('depends-disabled');",
+        "      } else {",
+        "        dependents[i].classList.add('depends-disabled');",
+        "      }",
+        "      var depInputs = dependents[i].querySelectorAll('input:not([type=\"hidden\"]), select');",
+        "      for (var j = 0; j < depInputs.length; j++) {",
+        "        depInputs[j].tabIndex = checkbox.checked ? 0 : -1;",
+        "      }",
+        "    }",
+        "  }",
+        // Update modified indicators for a single input.
+        "  function updateModifiedIndicator(input) {",
+        "    var defaultVal = input.getAttribute('data-default');",
+        "    var currentVal = getInputValue(input);",
+        "    var formGroup = input.closest('.form-group');",
+        "    if (!formGroup) return;",
+        "    var isModified = currentVal !== defaultVal;",
+        "    var dot = formGroup.querySelector('.modified-dot');",
+        "    var resetBtn = formGroup.querySelector('.btn-reset');",
+        "    if (isModified) {",
+        "      formGroup.classList.add('modified');",
+        "      if (!dot) {",
+        "        var label = formGroup.querySelector('.form-label');",
+        "        if (label) {",
+        "          var newDot = document.createElement('span');",
+        "          newDot.className = 'modified-dot';",
+        "          newDot.title = 'Modified from default';",
+        "          label.insertBefore(newDot, label.firstChild);",
+        "        }",
+        "      }",
+        "      if (!resetBtn) {",
+        "        var row = formGroup.querySelector('.form-row');",
+        "        if (row) {",
+        "          var path = input.getAttribute('name');",
+        "          var btn = document.createElement('button');",
+        "          btn.type = 'button';",
+        "          btn.className = 'btn-reset';",
+        "          btn.title = 'Reset to default';",
+        "          btn.setAttribute('aria-label', 'Reset to default');",
+        "          btn.innerHTML = '&#8635;';",
+        "          btn.onclick = function() { resetSetting(path); };",
+        "          row.appendChild(btn);",
+        "        }",
+        "      }",
+        "    } else {",
+        "      formGroup.classList.remove('modified');",
+        "      if (dot) dot.remove();",
+        "      if (resetBtn) resetBtn.remove();",
+        "    }",
+        "  }",
+        // Reset a single setting to its default value (client-side only). Dispatches both input and change events to match browser behavior: input for validation and
+        // modified indicator updates, change for cascade handlers (e.g., preset dropdown updating bitrate and frame rate fields).
+        "  window.resetSetting = function(path) {",
+        "    var inputId = path.replace(/\\./g, '-');",
+        "    var input = document.getElementById(inputId);",
+        "    if (!input) return;",
+        "    var defaultVal = input.getAttribute('data-default');",
+        "    if (defaultVal !== null) {",
+        "      setInputValue(input, defaultVal);",
+        "      input.dispatchEvent(new Event('input', { bubbles: true }));",
+        "      input.dispatchEvent(new Event('change', { bubbles: true }));",
+        "    }",
+        "  };",
+        // Reset all settings in a tab to defaults (client-side only). Works for both settings and advanced tabs.
+        "  window.resetTabToDefaults = function(tabId) {",
+        "    if (!confirm('Reset all settings in this tab to defaults?')) return;",
+        "    var panel = document.getElementById('subtab-' + tabId);",
+        "    if (!panel) return;",
+        "    var inputs = panel.querySelectorAll('input[data-default], select[data-default]');",
+        "    for (var i = 0; i < inputs.length; i++) {",
+        "      var input = inputs[i];",
+        "      if (!input.disabled) {",
+        "        setInputValue(input, input.getAttribute('data-default'));",
+        "        updateModifiedIndicator(input);",
+        "      }",
+        "    }",
+        "    var cbInputs = panel.querySelectorAll('input[type=\"checkbox\"][data-default]');",
+        "    for (var j = 0; j < cbInputs.length; j++) {",
+        "      if (!cbInputs[j].disabled) {",
+        "        updateDependentFields(cbInputs[j].id);",
+        "      }",
+        "    }",
+        "    showToast('Settings reset to defaults. Click ' + (isServiceMode ? 'Save & Restart' : 'Save Settings') + ' to apply changes.', 'info');",
+        "  };",
+        // Toggle collapsible section in Advanced tab.
+        "  window.toggleSection = function(sectionId) {",
+        "    var section = document.querySelector('.advanced-section[data-section=\"' + sectionId + '\"]');",
+        "    if (!section) return;",
+        "    var header = section.querySelector('.section-header');",
+        "    var content = section.querySelector('.section-content');",
+        "    if (!header || !content) return;",
+        "    var isExpanded = content.classList.contains('expanded');",
+        "    if (isExpanded) {",
+        "      content.classList.remove('expanded');",
+        "      header.classList.remove('expanded');",
+        "    } else {",
+        "      content.classList.add('expanded');",
+        "      header.classList.add('expanded');",
+        "    }",
+        "    try {",
+        "      var expanded = JSON.parse(localStorage.getItem('prismcast-advanced-sections') || '{}');",
+        "      expanded[sectionId] = !isExpanded;",
+        "      localStorage.setItem('prismcast-advanced-sections', JSON.stringify(expanded));",
+        "    } catch(e) {}",
+        "  };",
+        // Initialize section expansion state from localStorage.
+        "  function initSections() {",
+        "    try {",
+        "      var expanded = JSON.parse(localStorage.getItem('prismcast-advanced-sections') || '{}');",
+        "      for (var sectionId in expanded) {",
+        "        if (expanded[sectionId]) {",
+        "          var section = document.querySelector('.advanced-section[data-section=\"' + sectionId + '\"]');",
+        "          if (section) {",
+        "            var header = section.querySelector('.section-header');",
+        "            var content = section.querySelector('.section-content');",
+        "            if (header && content) {",
+        "              header.classList.add('expanded');",
+        "              content.classList.add('expanded');",
+        "            }",
+        "          }",
+        "        }",
+        "      }",
+        "    } catch(e) {}",
+        "  }",
+        "  initSections();",
+        // Reset all settings to defaults (client-side only).
+        "  window.resetAllToDefaults = function() {",
+        "    if (!confirm('Reset ALL settings to defaults? Click ' + (isServiceMode ? 'Save & Restart' : 'Save Settings') + ' after to apply.')) return;",
+        "    var form = document.getElementById('settings-form');",
+        "    if (!form) return;",
+        "    var inputs = form.querySelectorAll('input[data-default], select[data-default]');",
+        "    for (var i = 0; i < inputs.length; i++) {",
+        "      var input = inputs[i];",
+        "      if (!input.disabled) {",
+        "        setInputValue(input, input.getAttribute('data-default'));",
+        "        updateModifiedIndicator(input);",
+        "      }",
+        "    }",
+        "    var cbInputs = form.querySelectorAll('input[type=\"checkbox\"][data-default]');",
+        "    for (var j = 0; j < cbInputs.length; j++) {",
+        "      if (!cbInputs[j].disabled) {",
+        "        updateDependentFields(cbInputs[j].id);",
+        "      }",
+        "    }",
+        "    showToast('All settings reset to defaults. Click ' + (isServiceMode ? 'Save & Restart' : 'Save Settings') + ' to apply changes.', 'info');",
+        "  };",
+        // Submit settings form via AJAX.
+        "  window.submitSettingsForm = function(event) {",
+        "    event.preventDefault();",
+        "    clearFieldErrors();",
+        "    var form = document.getElementById('settings-form');",
+        "    var saveBtn = document.getElementById('save-btn');",
+        "    if (!form) return false;",
+        "    var formData = new FormData(form);",
+        "    var config = {};",
+        "    for (var pair of formData.entries()) {",
+        "      var path = pair[0];",
+        "      var value = pair[1];",
+        "      var parts = path.split('.');",
+        "      var obj = config;",
+        "      for (var i = 0; i < parts.length - 1; i++) {",
+        "        if (!obj[parts[i]]) obj[parts[i]] = {};",
+        "        obj = obj[parts[i]];",
+        "      }",
+        "      obj[parts[parts.length - 1]] = value;",
+        "    }",
+        "    if (saveBtn) saveBtn.classList.add('loading');",
+        "    fetch('/config', {",
+        "      method: 'POST',",
+        "      headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' },",
+        "      body: JSON.stringify(config)",
+        "    })",
+        "    .then(function(response) { return response.json().then(function(data) { return { ok: response.ok, data: data }; }); })",
+        "    .then(function(result) {",
+        "      if (saveBtn) saveBtn.classList.remove('loading');",
+        "      if (result.ok && result.data.success) {",
+        "        if (result.data.willRestart) {",
+        "          if (result.data.deferred) {",
+        "            showPendingRestartDialog(result.data.activeStreams);",
+        "          } else {",
+        "            waitForServerRestart();",
+        "          }",
+        "        } else {",
+        "          showToast(result.data.message || 'Configuration saved.', 'info');",
+        "        }",
+        "      } else if (result.data.errors) {",
+        "        displayFieldErrors(result.data.errors);",
+        "        showToast('Please correct the errors below.', 'error');",
+        "      } else {",
+        "        showToast(result.data.message || 'Failed to save configuration.', 'error');",
+        "      }",
+        "    })",
+        "    .catch(function(err) {",
+        "      if (saveBtn) saveBtn.classList.remove('loading');",
+        "      showToast('Failed to save configuration: ' + err.message, 'error');",
+        "    });",
+        "    return false;",
+        "  };",
+        // Export configuration as JSON download.
+        "  window.exportConfig = function() {",
+        "    fetch('/config/export')",
+        "      .then(function(response) { return response.blob(); })",
+        "      .then(function(blob) {",
+        "        var url = window.URL.createObjectURL(blob);",
+        "        var a = document.createElement('a');",
+        "        a.href = url;",
+        "        a.download = 'prismcast-config.json';",
+        "        document.body.appendChild(a);",
+        "        a.click();",
+        "        document.body.removeChild(a);",
+        "        window.URL.revokeObjectURL(url);",
+        "      })",
+        "      .catch(function(err) { showToast('Failed to export configuration: ' + err.message, 'error'); });",
+        "  };",
+        // Import configuration from file.
+        "  window.importConfig = function(fileInput) {",
+        "    var file = fileInput.files[0];",
+        "    if (!file) return;",
+        "    var reader = new FileReader();",
+        "    reader.onload = function(e) {",
+        "      try {",
+        "        var config = JSON.parse(e.target.result);",
+        "        if (confirm('Import this configuration? The server may restart to apply changes.')) {",
+        "          fetch('/config/import', {",
+        "            method: 'POST',",
+        "            headers: { 'Content-Type': 'application/json' },",
+        "            body: JSON.stringify(config)",
+        "          })",
+        "          .then(function(response) { return response.json().then(function(data) { return { ok: response.ok, data: data }; }); })",
+        "          .then(function(result) {",
+        "            if (result.ok && result.data.success) {",
+        "              showToast(result.data.message || 'Configuration imported.', 'success');",
+        "              if (result.data.willRestart) {",
+        "                if (result.data.deferred) {",
+        "                  showPendingRestartDialog(result.data.activeStreams);",
+        "                } else {",
+        "                  waitForServerRestart();",
+        "                }",
+        "              }",
+        "            } else {",
+        "              throw new Error(result.data.message || result.data.error || 'Import failed');",
+        "            }",
+        "          })",
+        "          .catch(function(err) { showToast('Failed to import configuration: ' + err.message, 'error'); });",
+        "        }",
+        "      } catch (err) {",
+        "        showToast('Invalid JSON file: ' + err.message, 'error');",
+        "      }",
+        "      fileInput.value = '';",
+        "    };",
+        "    reader.readAsText(file);",
+        "  };",
+        // Export channels as JSON download.
+        "  window.exportChannels = function() {",
+        "    fetch('/config/channels/export')",
+        "      .then(function(response) { return response.blob(); })",
+        "      .then(function(blob) {",
+        "        var url = window.URL.createObjectURL(blob);",
+        "        var a = document.createElement('a');",
+        "        a.href = url;",
+        "        a.download = 'prismcast-channels.json';",
+        "        document.body.appendChild(a);",
+        "        a.click();",
+        "        document.body.removeChild(a);",
+        "        window.URL.revokeObjectURL(url);",
+        "      })",
+        "      .catch(function(err) { showToast('Failed to export channels: ' + err.message, 'error'); });",
+        "  };",
+        // Import channels from file.
+        "  window.importChannels = function(fileInput) {",
+        "    var file = fileInput.files[0];",
+        "    if (!file) return;",
+        "    var reader = new FileReader();",
+        "    reader.onload = function(e) {",
+        "      try {",
+        "        var channels = JSON.parse(e.target.result);",
+        "        if (confirm('Import these channels? This will replace all existing user channels.')) {",
+        "          fetch('/config/channels/import', {",
+        "            method: 'POST',",
+        "            headers: { 'Content-Type': 'application/json' },",
+        "            body: JSON.stringify(channels)",
+        "          })",
+        "          .then(function(response) {",
+        "            if (response.ok) {",
+        "              showToastAfterReload('Channels imported successfully.' + PLAYLIST_HINT, 'success');",
+        "            } else {",
+        "              return response.text().then(function(text) { throw new Error(text); });",
+        "            }",
+        "          })",
+        "          .catch(function(err) { showToast('Failed to import channels: ' + err.message, 'error'); });",
+        "        }",
+        "      } catch (err) {",
+        "        showToast('Invalid JSON file: ' + err.message, 'error');",
+        "      }",
+        "      fileInput.value = '';",
+        "    };",
+        "    reader.readAsText(file);",
+        "  };",
+        // Import channels from M3U playlist file.
+        "  window.importM3U = function(fileInput) {",
+        "    var file = fileInput.files[0];",
+        "    if (!file) return;",
+        "    var replaceCheckbox = document.getElementById('m3u-replace-duplicates');",
+        "    var conflictMode = (replaceCheckbox && replaceCheckbox.checked) ? 'replace' : 'skip';",
+        "    var reader = new FileReader();",
+        "    reader.onload = function(e) {",
+        "      fetch('/config/channels/import-m3u', {",
+        "        method: 'POST',",
+        "        headers: { 'Content-Type': 'application/json' },",
+        "        body: JSON.stringify({ content: e.target.result, conflictMode: conflictMode })",
+        "      })",
+        "      .then(function(response) { return response.json(); })",
+        "      .then(function(data) {",
+        "        if (data.success) {",
+        "          var msg = 'M3U Import Complete\\n\\n';",
+        "          msg += '\\u2713 ' + data.imported + ' channel(s) imported\\n';",
+        "          if (data.replaced > 0) msg += '\\u21BB ' + data.replaced + ' channel(s) replaced\\n';",
+        "          if (data.skipped > 0) msg += '\\u25CB ' + data.skipped + ' duplicate(s) skipped\\n';",
+        "          if (data.errors && data.errors.length > 0) {",
+        "            msg += '\\n! ' + data.errors.length + ' error(s):\\n';",
+        "            for (var i = 0; i < Math.min(data.errors.length, 5); i++) {",
+        "              msg += '  - ' + data.errors[i] + '\\n';",
+        "            }",
+        "            if (data.errors.length > 5) msg += '  ... and ' + (data.errors.length - 5) + ' more\\n';",
+        "          }",
+        "          if (data.imported > 0 || data.replaced > 0) { showToastAfterReload(msg + PLAYLIST_HINT, 'success'); }",
+        "          else { showToast(msg, 'success'); }",
+        "        } else {",
+        "          showToast('M3U import failed: ' + (data.error || 'Unknown error'), 'error');",
+        "        }",
+        "      })",
+        "      .catch(function(err) { showToast('Failed to import M3U: ' + err.message, 'error'); });",
+        "      fileInput.value = '';",
+        "    };",
+        "    reader.readAsText(file);",
+        "  };",
+        // Client-side validation for numeric inputs.
+        "  function validateInput(input) {",
+        "    var min = input.min !== '' ? Number(input.min) : null;",
+        "    var max = input.max !== '' ? Number(input.max) : null;",
+        "    var value = Number(input.value);",
+        "    var isValid = true;",
+        "    if (input.type === 'number') {",
+        "      if (isNaN(value)) { isValid = false; }",
+        "      else if (min !== null && value < min) { isValid = false; }",
+        "      else if (max !== null && value > max) { isValid = false; }",
+        "    }",
+        "    if (isValid) {",
+        "      input.classList.remove('error');",
+        "    } else {",
+        "      input.classList.add('error');",
+        "    }",
+        "    return isValid;",
+        "  }",
+        // Subtab switching function.
+        "  function switchSubtab(subtab, updateUrl) {",
+        "    var btns = document.querySelectorAll('.subtab-btn');",
+        "    var panels = document.querySelectorAll('.subtab-panel');",
+        "    var settingsButtons = document.getElementById('settings-buttons');",
+        "    for (var i = 0; i < btns.length; i++) {",
+        "      btns[i].classList.remove('active');",
+        "      btns[i].setAttribute('aria-selected', 'false');",
+        "      if (btns[i].getAttribute('data-subtab') === subtab) {",
+        "        btns[i].classList.add('active');",
+        "        btns[i].setAttribute('aria-selected', 'true');",
+        "      }",
+        "    }",
+        "    for (var j = 0; j < panels.length; j++) {",
+        "      panels[j].classList.remove('active');",
+        "      if (panels[j].id === 'subtab-' + subtab) {",
+        "        panels[j].classList.add('active');",
+        "      }",
+        "    }",
+        // Show/hide settings buttons based on subtab (hidden on backup subtab).
+        "    if (settingsButtons) {",
+        "      settingsButtons.style.display = (subtab === 'backup') ? 'none' : 'flex';",
+        "    }",
+        // Update localStorage and URL hash.
+        "    try { localStorage.setItem('prismcast-config-subtab', subtab); } catch(e) {}",
+        "    if (updateUrl !== false) {",
+        "      var newHash = '#config/' + subtab;",
+        "      if (window.location.hash !== newHash) {",
+        "        window.location.hash = newHash;",
+        "      }",
+        "    }",
+        "  }",
+        // Expose for main tab script to use.
+        "  window.switchConfigSubtab = switchSubtab;",
+        // Attach click handlers to subtab buttons.
+        "  var subtabBtns = document.querySelectorAll('.subtab-btn');",
+        "  for (var i = 0; i < subtabBtns.length; i++) {",
+        "    subtabBtns[i].addEventListener('click', function() {",
+        "      switchSubtab(this.getAttribute('data-subtab'));",
+        "    });",
+        "  }",
+        // Channel edit form show/hide functions.
+        "  window.showEditForm = function(key) {",
+        "    var displayRow = document.getElementById('display-row-' + key);",
+        "    var editRow = document.getElementById('edit-row-' + key);",
+        "    if (displayRow) displayRow.style.display = 'none';",
+        "    if (editRow) {",
+        "      editRow.style.display = '';",
+        "      updateSelectorSuggestions('edit-url-' + key, 'edit-' + key + '-selectorList');",
+        "      var urlInput = document.getElementById('edit-url-' + key);",
+        "      if (urlInput && !urlInput.dataset.selectorBound) {",
+        "        urlInput.addEventListener('input', function() { updateSelectorSuggestions('edit-url-' + key, 'edit-' + key + '-selectorList'); });",
+        "        urlInput.dataset.selectorBound = 'true';",
+        "      }",
+        "    }",
+        "  };",
+        "  window.hideEditForm = function(key) {",
+        "    var displayRow = document.getElementById('display-row-' + key);",
+        "    var editRow = document.getElementById('edit-row-' + key);",
+        "    if (displayRow) displayRow.style.display = '';",
+        "    if (editRow) editRow.style.display = 'none';",
+        "  };",
+        // Hide add form and show the Add Channel button.
+        "  window.hideAddForm = function() {",
+        "    var addForm = document.getElementById('add-channel-form');",
+        "    var addBtn = document.getElementById('add-channel-btn');",
+        "    if (addForm) addForm.style.display = 'none';",
+        "    if (addBtn) addBtn.style.display = 'inline-block';",
+        "    if (addForm) addForm.querySelector('form').reset();",
+        "  };",
+        // Insert or replace channel rows in the table. Always removes existing rows with the same key first (handles both edits and overrides of builtin channels).
+        // Uses the current table sort field and direction for correct insertion order.
+        "  window.insertChannelRow = function(html, key) {",
+        "    var tbody = document.querySelector('.channel-table tbody');",
+        "    var table = document.querySelector('.channel-table');",
+        "    if (!tbody || !html || !table) return;",
+        // Remove any existing rows with this key (edit or override of builtin).
+        "    var oldDisplay = document.getElementById('display-row-' + key);",
+        "    var oldEdit = document.getElementById('edit-row-' + key);",
+        "    if (oldEdit) oldEdit.remove();",
+        "    if (oldDisplay) oldDisplay.remove();",
+        // Create temporary container to parse HTML.
+        "    var temp = document.createElement('tbody');",
+        "    temp.innerHTML = html.displayRow + (html.editRow || '');",
+        "    var newDisplayRow = temp.firstElementChild;",
+        "    var newEditRow = temp.children[1] || null;",
+        // Find insertion point using current sort field and direction.
+        "    var sortField = table.getAttribute('data-sort-field') || 'name';",
+        "    var sortDir = table.getAttribute('data-sort-dir') || 'asc';",
+        "    var newVal = getSortValue(newDisplayRow, sortField);",
+        "    var rows = tbody.querySelectorAll('tr[id^=\"display-row-\"]');",
+        "    var inserted = false;",
+        "    for (var i = 0; i < rows.length; i++) {",
+        "      var rowVal = getSortValue(rows[i], sortField);",
+        "      var cmp = (sortDir === 'asc') ? (newVal < rowVal) : (newVal > rowVal);",
+        "      if (cmp) {",
+        "        tbody.insertBefore(newDisplayRow, rows[i]);",
+        "        if (newEditRow) tbody.insertBefore(newEditRow, rows[i]);",
+        "        inserted = true;",
+        "        break;",
+        "      }",
+        "    }",
+        "    if (!inserted) {",
+        "      tbody.appendChild(newDisplayRow);",
+        "      if (newEditRow) tbody.appendChild(newEditRow);",
+        "    }",
+        "    updateDisabledCount();",
+        "  };",
+        // Remove channel rows from the table.
+        "  window.removeChannelRow = function(key) {",
+        "    var displayRow = document.getElementById('display-row-' + key);",
+        "    var editRow = document.getElementById('edit-row-' + key);",
+        "    if (displayRow) displayRow.remove();",
+        "    if (editRow) editRow.remove();",
+        "    updateDisabledCount();",
+        "  };",
+        // Advanced fields toggle for channel forms.
+        "  window.toggleAdvanced = function(prefix) {",
+        "    var fields = document.getElementById(prefix + '-advanced');",
+        "    var toggle = document.getElementById(prefix + '-toggle');",
+        "    if (fields && toggle) {",
+        "      if (fields.classList.contains('show')) {",
+        "        fields.classList.remove('show');",
+        "        toggle.textContent = '\\u25B6 Show Advanced Options';",
+        "      } else {",
+        "        fields.classList.add('show');",
+        "        toggle.textContent = '\\u25BC Hide Advanced Options';",
+        "      }",
+        "    }",
+        "  };",
+        // Profile reference toggle.
+        "  window.toggleProfileReference = function() {",
+        "    var ref = document.getElementById('profile-reference');",
+        "    if (ref) {",
+        "      ref.style.display = ref.style.display === 'none' ? 'block' : 'none';",
+        "    }",
+        "  };",
+        // Submit channel form via AJAX (add or edit).
+        "  window.submitChannelForm = function(event, action) {",
+        "    event.preventDefault();",
+        "    var form = event.target;",
+        "    var formData = new FormData(form);",
+        "    var data = {};",
+        "    for (var pair of formData.entries()) { data[pair[0]] = pair[1]; }",
+        "    fetch('/config/channels', {",
+        "      method: 'POST',",
+        "      headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' },",
+        "      body: JSON.stringify(data)",
+        "    })",
+        "    .then(function(response) { return response.json().then(function(d) { return { ok: response.ok, data: d }; }); })",
+        "    .then(function(result) {",
+        "      if (result.ok && result.data.success) {",
+        "        showToast(result.data.message, 'success');",
+        "        if (result.data.html) {",
+        "          insertChannelRow(result.data.html, result.data.key);",
+        "          refilterChannelRows();",
+        "        }",
+        "        if (action === 'add') {",
+        "          hideAddForm();",
+        "        } else {",
+        "          hideEditForm(result.data.key);",
+        "        }",
+        "      } else if (result.data.errors) {",
+        "        var errorMsgs = [];",
+        "        for (var field in result.data.errors) { errorMsgs.push(field + ': ' + result.data.errors[field]); }",
+        "        showToast('Validation errors: ' + errorMsgs.join(', '), 'error');",
+        "      } else {",
+        "        showToast(result.data.message || 'Failed to save channel.', 'error');",
+        "      }",
+        "    })",
+        "    .catch(function(err) { showToast('Failed to save channel: ' + err.message, 'error'); });",
+        "    return false;",
+        "  };",
+        // Delete channel via AJAX.
+        "  window.deleteChannel = function(key) {",
+        "    if (!confirm('Delete channel ' + key + '?')) return;",
+        "    fetch('/config/channels', {",
+        "      method: 'POST',",
+        "      headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' },",
+        "      body: JSON.stringify({ action: 'delete', key: key })",
+        "    })",
+        "    .then(function(response) { return response.json().then(function(d) { return { ok: response.ok, data: d }; }); })",
+        "    .then(function(result) {",
+        "      if (result.ok && result.data.success) {",
+        "        showToast(result.data.message, 'success');",
+        "        if (result.data.html) {",
+        "          insertChannelRow(result.data.html, result.data.key || key);",
+        "          refilterChannelRows();",
+        "        } else {",
+        "          removeChannelRow(result.data.key || key);",
+        "        }",
+        "      } else {",
+        "        showToast(result.data.message || 'Failed to delete channel.', 'error');",
+        "      }",
+        "    })",
+        "    .catch(function(err) { showToast('Failed to delete channel: ' + err.message, 'error'); });",
+        "  };",
+        // Toggle a single predefined channel's enabled/disabled state.
+        "  window.togglePredefinedChannel = function(key, enable) {",
+        "    fetch('/config/channels/toggle-predefined', {",
+        "      method: 'POST',",
+        "      headers: { 'Content-Type': 'application/json' },",
+        "      body: JSON.stringify({ key: key, enabled: enable })",
+        "    })",
+        "    .then(function(response) { return response.json(); })",
+        "    .then(function(result) {",
+        "      if (result.success) {",
+        "        showToast('Channel ' + key + ' ' + (enable ? 'enabled' : 'disabled') + '.' + PLAYLIST_HINT, 'success');",
+        "        updateChannelRowDisabledState(key, !enable);",
+        "      } else {",
+        "        showToast(result.error || 'Failed to toggle channel.', 'error');",
+        "      }",
+        "    })",
+        "    .catch(function(err) { showToast('Failed to toggle channel: ' + err.message, 'error'); });",
+        "  };",
+        // Update a channel row's provider selection in-place. Syncs the HTML selected attribute so filterChannelRows() restore logic works correctly. We iterate
+        // _allOptions (if present) rather than querySelectorAll because filtered-out options are removed from the DOM but still tracked in the array.
+        "  function updateChannelProviderUI(channelKey, variant) {",
+        "    var row = document.getElementById('display-row-' + channelKey);",
+        "    if (!row) return;",
+        "    var sel = row.querySelector('.provider-select');",
+        "    if (!sel) return;",
+        "    sel.value = variant;",
+        "    var allOpts = sel._allOptions || Array.prototype.slice.call(sel.querySelectorAll('option'));",
+        "    for (var oi = 0; oi < allOpts.length; oi++) {",
+        "      if (allOpts[oi].value === variant) { allOpts[oi].setAttribute('selected', ''); }",
+        "      else { allOpts[oi].removeAttribute('selected'); }",
+        "    }",
+        "  }",
+        // Update provider selection for a multi-provider channel.
+        "  window.updateProviderSelection = function(selectElement) {",
+        "    var channelKey = selectElement.getAttribute('data-channel');",
+        "    var providerKey = selectElement.value;",
+        "    fetch('/config/provider', {",
+        "      method: 'POST',",
+        "      headers: { 'Content-Type': 'application/json' },",
+        "      body: JSON.stringify({ channel: channelKey, provider: providerKey })",
+        "    })",
+        "    .then(function(response) { return response.json(); })",
+        "    .then(function(result) {",
+        "      if (result.success) {",
+        "        showToast('Provider updated. New streams will use the selected provider.', 'success');",
+        "        if (result.html) { insertChannelRow(result.html, channelKey); refilterChannelRows(); }",
+        "      } else {",
+        "        showToast(result.error || 'Failed to update provider.', 'error');",
+        "      }",
+        "    })",
+        "    .catch(function(err) { showToast('Failed to update provider: ' + err.message, 'error'); });",
+        "  };",
+        // Bulk toggle predefined channels by scope (all, pacific, east).
+        "  window.bulkTogglePredefined = function(enable, scope) {",
+        "    fetch('/config/channels/bulk-toggle-predefined', {",
+        "      method: 'POST',",
+        "      headers: { 'Content-Type': 'application/json' },",
+        "      body: JSON.stringify({ enabled: enable, scope: scope })",
+        "    })",
+        "    .then(function(response) { return response.json(); })",
+        "    .then(function(result) {",
+        "      if (result.success) {",
+        "        var labels = { all: 'All predefined', pacific: 'Pacific predefined', east: 'East predefined' };",
+        "        showToast((labels[scope] || 'Predefined') + ' channels ' + (enable ? 'enabled' : 'disabled') + '.' + PLAYLIST_HINT, 'success');",
+        "        if (result.keys) {",
+        "          for (var i = 0; i < result.keys.length; i++) { setRowDisabledState(result.keys[i], !enable); }",
+        "        }",
+        "        updateDisabledCount();",
+        "      } else {",
+        "        showToast(result.error || 'Failed to toggle channels.', 'error');",
+        "      }",
+        "    })",
+        "    .catch(function(err) { showToast('Failed to toggle channels: ' + err.message, 'error'); });",
+        "  };",
+        // SVG icon strings for dynamic DOM manipulation when toggling button states.
+        "  var ICON_LOGIN_SVG = '<svg width=\"14\" height=\"14\" viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" " +
+            "stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M6.5 2H3.5a1 1 0 00-1 1v10a1 1 0 001 1h3\"/><path d=\"M10.5 11l3-3-3-3\"/>" +
+            "<path d=\"M13.5 8H6.5\"/></svg>';",
+        "  var ICON_ENABLE_SVG = '<svg width=\"14\" height=\"14\" viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" " +
+            "stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"8\" cy=\"8\" r=\"6\"/><path d=\"M5.5 8l2 2 3.5-4\"/></svg>';",
+        "  var ICON_DISABLE_SVG = '<svg width=\"14\" height=\"14\" viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" " +
+            "stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"8\" cy=\"8\" r=\"6\"/><path d=\"M5.5 5.5l5 5\"/></svg>';",
+        // Revert a channel override back to predefined defaults.
+        "  window.revertChannel = function(key) {",
+        "    if (!confirm('Revert channel ' + key + ' to predefined defaults?')) return;",
+        "    fetch('/config/channels', {",
+        "      method: 'POST',",
+        "      headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' },",
+        "      body: JSON.stringify({ action: 'revert', key: key })",
+        "    })",
+        "    .then(function(response) { return response.json().then(function(d) { return { ok: response.ok, data: d }; }); })",
+        "    .then(function(result) {",
+        "      if (result.ok && result.data.success) {",
+        "        showToast(result.data.message, 'success');",
+        "        if (result.data.html) {",
+        "          insertChannelRow(result.data.html, result.data.key || key);",
+        "          refilterChannelRows();",
+        "        }",
+        "      } else {",
+        "        showToast(result.data.message || 'Failed to revert channel.', 'error');",
+        "      }",
+        "    })",
+        "    .catch(function(err) { showToast('Failed to revert channel: ' + err.message, 'error'); });",
+        "  };",
+        // Set a channel row's disabled state without triggering count updates. Uses icon buttons. Used by bulkTogglePredefined for efficient bulk updates.
+        "  function setRowDisabledState(key, disabled) {",
+        "    var row = document.getElementById('display-row-' + key);",
+        "    if (!row) return;",
+        "    var btnGroup = row.querySelector('.btn-group');",
+        "    if (!btnGroup) return;",
+        "    if (disabled) {",
+        "      row.classList.add('channel-disabled');",
+        "      row.classList.remove('user-channel');",
+        // Replace login icon with placeholder.
+        "      var loginBtn = btnGroup.querySelector('.btn-icon-login');",
+        "      if (loginBtn) {",
+        "        var placeholder = document.createElement('span');",
+        "        placeholder.className = 'btn-icon-placeholder';",
+        "        loginBtn.replaceWith(placeholder);",
+        "      }",
+        // Swap disable icon to enable icon.
+        "      var disableBtn = btnGroup.querySelector('.btn-icon-disable');",
+        "      if (disableBtn) {",
+        "        disableBtn.className = 'btn-icon btn-icon-enable';",
+        "        disableBtn.title = 'Enable';",
+        "        disableBtn.setAttribute('aria-label', 'Enable');",
+        "        disableBtn.innerHTML = ICON_ENABLE_SVG;",
+        "        disableBtn.setAttribute('onclick', \"togglePredefinedChannel('\" + key + \"', true)\");",
+        "      }",
+        "    } else {",
+        "      row.classList.remove('channel-disabled');",
+        // Swap enable icon to disable icon.
+        "      var enableBtn = btnGroup.querySelector('.btn-icon-enable');",
+        "      if (enableBtn) {",
+        // Replace placeholder with login icon button.
+        "        var placeholder = btnGroup.querySelector('.btn-icon-placeholder');",
+        "        if (placeholder) {",
+        "          var newLoginBtn = document.createElement('button');",
+        "          newLoginBtn.type = 'button';",
+        "          newLoginBtn.className = 'btn-icon btn-icon-login';",
+        "          newLoginBtn.title = 'Login';",
+        "          newLoginBtn.setAttribute('aria-label', 'Login');",
+        "          newLoginBtn.innerHTML = ICON_LOGIN_SVG;",
+        "          newLoginBtn.setAttribute('onclick', \"startChannelLogin('\" + key + \"')\");",
+        "          placeholder.replaceWith(newLoginBtn);",
+        "        }",
+        "        enableBtn.className = 'btn-icon btn-icon-disable';",
+        "        enableBtn.title = 'Disable';",
+        "        enableBtn.setAttribute('aria-label', 'Disable');",
+        "        enableBtn.innerHTML = ICON_DISABLE_SVG;",
+        "        enableBtn.setAttribute('onclick', \"togglePredefinedChannel('\" + key + \"', false)\");",
+        "      }",
+        "    }",
+        "  }",
+        // Update a single channel row's disabled state and refresh counts. Used by individual togglePredefinedChannel.
+        "  function updateChannelRowDisabledState(key, disabled) {",
+        "    setRowDisabledState(key, disabled);",
+        "    updateDisabledCount();",
+        "  };",
+        // Update the disabled channel count shown in the toolbar toggle label. Uses a union selector to avoid double-counting rows that are both disabled and
+        // provider-unavailable.
+        "  function updateDisabledCount() {",
+        "    var countEl = document.getElementById('disabled-count');",
+        "    if (!countEl) return;",
+        "    var hiddenRows = document.querySelectorAll('tr.channel-disabled:not(.user-channel), tr.channel-unavailable');",
+        "    countEl.textContent = String(hiddenRows.length);",
+        "  };",
+        // Save the provider filter to the server and update the UI on success.
+        "  function saveProviderFilter(enabledTags) {",
+        "    fetch('/config/provider-filter', {",
+        "      method: 'POST',",
+        "      headers: { 'Content-Type': 'application/json' },",
+        "      body: JSON.stringify({ enabledProviders: enabledTags })",
+        "    })",
+        "    .then(function(r) { return r.json(); })",
+        "    .then(function(result) {",
+        "      if (result.success) {",
+        "        updateProviderChips(enabledTags);",
+        "        filterChannelRows(enabledTags);",
+        "        updateBulkAssignOptions(enabledTags);",
+        "        updateProviderFilterButton(enabledTags);",
+        "        updateDisabledCount();",
+        "        showToast('Provider filter updated.' + PLAYLIST_HINT, 'success');",
+        "      }",
+        "    })",
+        "    .catch(function(err) { showToast('Failed to update filter: ' + err.message, 'error'); });",
+        "  };",
+        // Provider filter: toggle a provider tag on/off.
+        "  window.toggleProviderTag = function(checkbox) {",
+        "    var menu = checkbox.closest('.provider-dropdown-menu');",
+        "    if (!menu) return;",
+        "    var checkboxes = menu.querySelectorAll('input[type=\"checkbox\"]:not(:disabled)');",
+        "    var enabledTags = [];",
+        "    for (var i = 0; i < checkboxes.length; i++) {",
+        "      if (checkboxes[i].checked) enabledTags.push(checkboxes[i].getAttribute('data-tag'));",
+        "    }",
+        // If all checkboxes are checked, clear the filter (empty array = no filter).
+        "    var allCheckboxes = menu.querySelectorAll('input[type=\"checkbox\"]');",
+        "    var allChecked = true;",
+        "    for (var j = 0; j < allCheckboxes.length; j++) {",
+        "      if (!allCheckboxes[j].checked && !allCheckboxes[j].disabled) { allChecked = false; break; }",
+        "    }",
+        "    if (allChecked) enabledTags = [];",
+        "    saveProviderFilter(enabledTags);",
+        "  };",
+        // Remove a provider chip (uncheck the tag and update). Orphaned tags (no checkbox in the dropdown) are removed by rebuilding the list from the remaining chips.
+        "  window.removeProviderChip = function(tag) {",
+        "    var menu = document.querySelector('.provider-dropdown-menu');",
+        "    if (!menu) return;",
+        "    var cb = menu.querySelector('input[data-tag=\"' + tag + '\"]');",
+        "    if (cb) { cb.checked = false; toggleProviderTag(cb); return; }",
+        // No checkbox exists for this tag — it is an orphaned entry with no corresponding provider. Build the enabled list from the remaining chips and POST directly.
+        "    var chips = document.querySelectorAll('#provider-chips .provider-chip[data-tag]');",
+        "    var enabledTags = [];",
+        "    for (var i = 0; i < chips.length; i++) {",
+        "      var ct = chips[i].getAttribute('data-tag');",
+        "      if (ct && ct !== tag) enabledTags.push(ct);",
+        "    }",
+        "    saveProviderFilter(enabledTags);",
+        "  };",
+        // Update the provider filter button text.
+        "  function updateProviderFilterButton(enabledTags) {",
+        "    var btn = document.getElementById('provider-filter-btn');",
+        "    if (!btn) return;",
+        "    btn.innerHTML = (enabledTags.length > 0) ? 'Filtered &#9662;' : 'All Providers &#9662;';",
+        "  };",
+        // Rebuild the provider chips from the enabled tags.
+        "  function updateProviderChips(enabledTags) {",
+        "    var container = document.getElementById('provider-chips');",
+        "    if (!container) return;",
+        "    container.innerHTML = '';",
+        "    if (enabledTags.length === 0) return;",
+        "    var menu = document.querySelector('.provider-dropdown-menu');",
+        "    for (var i = 0; i < enabledTags.length; i++) {",
+        "      var tag = enabledTags[i];",
+        "      if (tag === 'direct') continue;",
+        "      var label = tag;",
+        "      if (menu) {",
+        "        var cb = menu.querySelector('input[data-tag=\"' + tag + '\"]');",
+        "        if (cb && cb.parentElement) label = cb.parentElement.textContent.trim();",
+        "      }",
+        "      var chip = document.createElement('span');",
+        "      chip.className = 'provider-chip';",
+        "      chip.setAttribute('data-tag', tag);",
+        "      chip.innerHTML = label + '<button type=\"button\" class=\"chip-close\" aria-label=\"Remove ' + label +",
+        "        '\" onclick=\"removeProviderChip(\\'' + tag + '\\')\">\\u00d7</button>';",
+        "      container.appendChild(chip);",
+        "    }",
+        "  };",
+        // Filter channel rows based on enabled provider tags. Toggles the channel-unavailable class on each row and updates Source column content. Filtered-out options
+        // are removed from the DOM entirely rather than hidden — Safari ignores both the hidden attribute and display:none on option elements because they are rendered by
+        // the OS native widget. All options (visible and removed) are stored in a _allOptions array on each select for reinsertion when the filter changes. Selection
+        // restore priority: (1) the saved choice (HTML selected attribute, kept in sync by updateProviderSelection), (2) the previous visual selection, (3) first option.
+        "  function filterChannelRows(enabledTags) {",
+        "    var rows = document.querySelectorAll('tr[data-provider-tags]');",
+        "    for (var i = 0; i < rows.length; i++) {",
+        "      var tags = rows[i].getAttribute('data-provider-tags').split(',');",
+        "      var available = true;",
+        "      if (enabledTags.length > 0) {",
+        "        available = false;",
+        "        for (var j = 0; j < tags.length; j++) {",
+        "          if (tags[j] === 'direct' || enabledTags.indexOf(tags[j]) !== -1) { available = true; break; }",
+        "        }",
+        "      }",
+        "      if (available) { rows[i].classList.remove('channel-unavailable'); }",
+        "      else { rows[i].classList.add('channel-unavailable'); }",
+        // Update Source column elements: toggle between the no-provider label and the provider content (select or static name).
+        "      var label = rows[i].querySelector('.no-provider-label');",
+        "      var sel = rows[i].querySelector('.provider-select');",
+        "      var name = rows[i].querySelector('.provider-name');",
+        "      if (label) label.style.display = available ? 'none' : '';",
+        "      if (name) name.style.display = available ? '' : 'none';",
+        "      if (sel) {",
+        "        sel.style.display = available ? '' : 'none';",
+        // On first call, snapshot all options (including server-hidden ones) into a persistent array.
+        "        if (!sel._allOptions) { sel._allOptions = Array.prototype.slice.call(sel.querySelectorAll('option')); }",
+        "        var prevValue = sel.value;",
+        "        sel.innerHTML = '';",
+        "        var serverDefault = null;",
+        "        var prevExists = false;",
+        "        for (var k = 0; k < sel._allOptions.length; k++) {",
+        "          var opt = sel._allOptions[k];",
+        "          var oTag = opt.getAttribute('data-provider-tag');",
+        "          var show = (enabledTags.length === 0) || oTag === 'direct' || enabledTags.indexOf(oTag) !== -1;",
+        "          if (show) {",
+        "            sel.appendChild(opt);",
+        "            if (opt.hasAttribute('selected')) serverDefault = opt;",
+        "            if (opt.value === prevValue) prevExists = true;",
+        "          }",
+        "        }",
+        "        if (serverDefault) { sel.value = serverDefault.value; }",
+        "        else if (prevExists) { sel.value = prevValue; }",
+        "        else if (sel.options.length > 0) { sel.selectedIndex = 0; }",
+        "      }",
+        "    }",
+        "  };",
+        // Re-run the provider filter on all channel rows using the current checkbox state. Called after insertChannelRow replaces a row (which loses the filter state).
+        "  function refilterChannelRows() {",
+        "    var menu = document.querySelector('.provider-dropdown-menu');",
+        "    if (!menu) return;",
+        "    var cbs = menu.querySelectorAll('input[type=\"checkbox\"]:not(:disabled)');",
+        "    var enabledTags = [];",
+        "    var allChecked = true;",
+        "    for (var i = 0; i < cbs.length; i++) {",
+        "      if (cbs[i].checked) { enabledTags.push(cbs[i].getAttribute('data-tag')); }",
+        "      else { allChecked = false; }",
+        "    }",
+        "    if (allChecked) { enabledTags = []; }",
+        "    if (enabledTags.length > 0) { filterChannelRows(enabledTags); }",
+        "  }",
+        // Update bulk assign dropdown to only show enabled providers. Uses DOM removal like filterChannelRows because Safari ignores hidden/display:none on option
+        // elements. The snapshot filters by truthy .value to exclude the "Choose provider..." placeholder (value="") so it is never removed from the DOM.
+        "  function updateBulkAssignOptions(enabledTags) {",
+        "    var select = document.getElementById('bulk-assign');",
+        "    if (!select) return;",
+        "    if (!select._allOptions) {",
+        "      select._allOptions = [];",
+        "      var all = select.querySelectorAll('option');",
+        "      for (var a = 0; a < all.length; a++) { if (all[a].value) select._allOptions.push(all[a]); }",
+        "    }",
+        "    for (var i = 0; i < select._allOptions.length; i++) {",
+        "      var opt = select._allOptions[i];",
+        "      if (opt.parentNode === select) { select.removeChild(opt); }",
+        "    }",
+        "    for (var j = 0; j < select._allOptions.length; j++) {",
+        "      var opt2 = select._allOptions[j];",
+        "      if (enabledTags.length === 0 || opt2.value === 'direct' || enabledTags.indexOf(opt2.value) !== -1) {",
+        "        select.appendChild(opt2);",
+        "      }",
+        "    }",
+        "    select.value = '';",
+        "  };",
+        // Bulk assign all channels to a specific provider. Updates all dropdowns and profile cells in-place.
+        "  window.bulkAssignProvider = function(selectEl) {",
+        "    var providerTag = selectEl.value;",
+        "    if (!providerTag) return;",
+        "    selectEl.value = '';",
+        "    fetch('/config/provider-bulk-assign', {",
+        "      method: 'POST',",
+        "      headers: { 'Content-Type': 'application/json' },",
+        "      body: JSON.stringify({ provider: providerTag })",
+        "    })",
+        "    .then(function(r) { return r.json(); })",
+        "    .then(function(result) {",
+        "      if (result.success) {",
+        "        var msg = result.affected + ' of ' + result.total + ' channel(s) updated.';",
+        "        var undoAction = null;",
+        "        if (result.affected > 0 && result.previousSelections) {",
+        "          var prevSelections = result.previousSelections;",
+        "          undoAction = { label: 'Undo', onclick: function() { restoreBulkProviders(prevSelections); } };",
+        "        }",
+        "        showToast(msg, 'success', undoAction ? 10000 : undefined, undoAction);",
+        "        if (result.selections) {",
+        "          for (var key in result.selections) {",
+        "            var sel = result.selections[key];",
+        "            updateChannelProviderUI(key, sel.variant);",
+        "          }",
+        "        }",
+        "      } else {",
+        "        showToast(result.error || 'Failed to assign.', 'error');",
+        "      }",
+        "    })",
+        "    .catch(function(err) { showToast('Failed to assign: ' + err.message, 'error'); });",
+        "  };",
+        // Restore previous provider selections (undo bulk assign). Sends the previousSelections map to the server and updates the UI with the restored selections.
+        "  function restoreBulkProviders(prevSelections) {",
+        "    fetch('/config/provider-bulk-restore', {",
+        "      method: 'POST',",
+        "      headers: { 'Content-Type': 'application/json' },",
+        "      body: JSON.stringify({ selections: prevSelections })",
+        "    })",
+        "    .then(function(r) { return r.json(); })",
+        "    .then(function(result) {",
+        "      if (result.success) {",
+        "        showToast('Bulk assign reverted.', 'success');",
+        "        if (result.selections) {",
+        "          for (var key in result.selections) {",
+        "            var sel = result.selections[key];",
+        "            updateChannelProviderUI(key, sel.variant);",
+        "          }",
+        "        }",
+        "      } else {",
+        "        showToast(result.error || 'Failed to revert.', 'error');",
+        "      }",
+        "    })",
+        "    .catch(function(err) { showToast('Failed to revert: ' + err.message, 'error'); });",
+        "  }",
+        // Close all open dropdown menus and remove the scroll and resize listeners.
+        "  function closeDropdowns() {",
+        "    var menus = document.querySelectorAll('.dropdown-menu.show');",
+        "    for (var i = 0; i < menus.length; i++) menus[i].classList.remove('show');",
+        "    window.removeEventListener('scroll', closeDropdowns, true);",
+        "    window.removeEventListener('resize', closeDropdowns);",
+        "  };",
+        "  window.closeDropdowns = closeDropdowns;",
+        // Toggle a dropdown menu open or closed. On first call for a given button, the menu is detached from its .dropdown parent and portaled to <body> with
+        // position: fixed. This allows the menu to escape overflow: auto containers like the channel table wrapper. On every open, the menu is positioned relative
+        // to the button's bounding rect, with edge-of-viewport clamping and above-button flip when it would extend below the viewport.
+        "  window.toggleDropdown = function(btn) {",
+        "    var menu = btn._portalMenu;",
+        "    var isOpen = menu && menu.classList.contains('show');",
+        "    closeDropdowns();",
+        "    if (isOpen) return;",
+        "    if (!menu) {",
+        "      menu = btn.nextElementSibling;",
+        "      if (!menu) return;",
+        "      btn._portalMenu = menu;",
+        "      document.body.appendChild(menu);",
+        "      menu.style.position = 'fixed';",
+        "      menu.style.marginTop = '0';",
+        "    }",
+        "    menu.classList.add('show');",
+        "    var rect = btn.getBoundingClientRect();",
+        "    var top = rect.bottom + 2;",
+        "    var left = rect.left;",
+        "    if (left + menu.offsetWidth > window.innerWidth - 4) left = rect.right - menu.offsetWidth;",
+        "    if (left < 4) left = 4;",
+        "    if (top + menu.offsetHeight > window.innerHeight - 4) top = rect.top - menu.offsetHeight - 2;",
+        "    menu.style.top = top + 'px';",
+        "    menu.style.left = left + 'px';",
+        "    window.addEventListener('scroll', closeDropdowns, true);",
+        "    window.addEventListener('resize', closeDropdowns);",
+        "  };",
+        // Close dropdowns when clicking outside. After portaling, menus live on <body> outside .dropdown containers, so we also check .dropdown-menu to prevent
+        // clicks on menu items (like column picker checkboxes) from triggering close.
+        "  document.addEventListener('click', function(e) {",
+        "    if (!e.target.closest('.dropdown') && !e.target.closest('.dropdown-menu')) closeDropdowns();",
+        "  });",
+        // Copy a stream URL to the clipboard and show a toast notification. The type parameter selects HLS or MPEG-TS format. Uses the modern Clipboard API when
+        // available (secure contexts), falling back to execCommand for plain HTTP access via IP address.
+        "  window.copyStreamUrl = function(type, key) {",
+        "    closeDropdowns();",
+        "    var url = (type === 'hls') ? (location.origin + '/hls/' + key + '/stream.m3u8') : (location.origin + '/stream/' + key);",
+        "    if (navigator.clipboard && navigator.clipboard.writeText) {",
+        "      navigator.clipboard.writeText(url).then(function() { showToast('Stream URL copied to clipboard.', 'success'); })",
+        "        .catch(function() { showToast('Failed to copy URL.', 'error'); });",
+        "    } else {",
+        "      var ta = document.createElement('textarea');",
+        "      ta.value = url;",
+        "      ta.style.position = 'fixed';",
+        "      ta.style.opacity = '0';",
+        "      document.body.appendChild(ta);",
+        "      ta.select();",
+        "      try { document.execCommand('copy'); showToast('Stream URL copied to clipboard.', 'success'); }",
+        "      catch(e) { showToast('Failed to copy URL.', 'error'); }",
+        "      document.body.removeChild(ta);",
+        "    }",
+        "  };",
+        // Toggle visibility of disabled predefined channels and persist preference.
+        "  window.toggleDisabledVisibility = function() {",
+        "    var table = document.querySelector('.channel-table');",
+        "    var checkbox = document.getElementById('show-disabled-toggle');",
+        "    if (!table || !checkbox) return;",
+        "    if (checkbox.checked) {",
+        "      table.classList.remove('hide-disabled');",
+        "      localStorage.setItem('prismcast-show-disabled-channels', 'true');",
+        "    } else {",
+        "      table.classList.add('hide-disabled');",
+        "      localStorage.removeItem('prismcast-show-disabled-channels');",
+        "    }",
+        "  };",
+        // Toggle visibility of an optional column and persist via background POST.
+        "  window.toggleColumn = function(checkbox) {",
+        "    var table = document.querySelector('.channel-table');",
+        "    if (!table || !checkbox) return;",
+        "    var colClass = checkbox.getAttribute('data-col-class');",
+        "    var hideClass = 'hide-' + colClass;",
+        "    if (checkbox.checked) { table.classList.remove(hideClass); }",
+        "    else { table.classList.add(hideClass); }",
+        // Collect all currently checked columns from the picker menu.
+        "    var menu = document.querySelector('.column-picker-menu');",
+        "    var cols = [];",
+        "    if (menu) {",
+        "      var cbs = menu.querySelectorAll('input[type=\"checkbox\"]');",
+        "      for (var i = 0; i < cbs.length; i++) {",
+        "        if (cbs[i].checked) cols.push(cbs[i].getAttribute('data-col-field'));",
+        "      }",
+        "    }",
+        "    fetch('/config/channels/display-prefs', {",
+        "      method: 'POST', headers: { 'Content-Type': 'application/json' },",
+        "      body: JSON.stringify({ visibleColumns: cols })",
+        "    }).catch(function() {});",
+        "  };",
+        // Read the server-stamped sort value from the data-sort-value attribute.
+        "  function getSortValue(row, field) {",
+        "    var colIndex = { key: 0, name: 1, provider: 2, channelNumber: 3, stationId: 4, profile: 5, channelSelector: 6 };",
+        "    var idx = colIndex[field];",
+        "    if (idx === undefined) return '';",
+        "    var cell = row.children[idx];",
+        "    if (!cell) return '';",
+        "    return cell.getAttribute('data-sort-value') || '';",
+        "  }",
+        // Sort the channel table by the specified field. Toggles direction if the same field is clicked again.
+        "  window.sortChannelTable = function(field) {",
+        "    var table = document.querySelector('.channel-table');",
+        "    if (!table) return;",
+        "    var currentField = table.getAttribute('data-sort-field');",
+        "    var currentDir = table.getAttribute('data-sort-dir') || 'asc';",
+        "    var dir = (field === currentField) ? (currentDir === 'asc' ? 'desc' : 'asc') : 'asc';",
+        "    table.setAttribute('data-sort-field', field);",
+        "    table.setAttribute('data-sort-dir', dir);",
+        // Collect display rows and their paired edit rows.
+        "    var tbody = table.querySelector('tbody');",
+        "    var displayRows = tbody.querySelectorAll('tr[id^=\"display-row-\"]');",
+        "    var pairs = [];",
+        "    for (var i = 0; i < displayRows.length; i++) {",
+        "      var dr = displayRows[i];",
+        "      var key = dr.id.replace('display-row-', '');",
+        "      var er = document.getElementById('edit-row-' + key);",
+        "      var name = dr.children[1] ? dr.children[1].textContent.trim().toLowerCase() : '';",
+        "      pairs.push({ displayRow: dr, editRow: er, val: getSortValue(dr, field), name: name });",
+        "    }",
+        // Sort pairs. The channel name is used as a secondary sort key to stabilize rows with identical primary values. The secondary sort is always ascending
+        // regardless of the primary direction so that rows within each group maintain a consistent alphabetical order.
+        "    pairs.sort(function(a, b) {",
+        "      var cmp = (dir === 'asc') ? a.val.localeCompare(b.val) : b.val.localeCompare(a.val);",
+        "      if (cmp !== 0) return cmp;",
+        "      return a.name.localeCompare(b.name);",
+        "    });",
+        // Re-append in sorted order.
+        "    for (var j = 0; j < pairs.length; j++) {",
+        "      tbody.appendChild(pairs[j].displayRow);",
+        "      if (pairs[j].editRow) tbody.appendChild(pairs[j].editRow);",
+        "    }",
+        // Update header indicators.
+        "    var headers = table.querySelectorAll('th.sortable');",
+        "    for (var h = 0; h < headers.length; h++) {",
+        "      var th = headers[h];",
+        "      var hField = th.getAttribute('data-sort-field');",
+        "      var label = th.textContent.replace(/[\\u25B2\\u25BC]/g, '').trim();",
+        "      if (hField === field) { th.innerHTML = label + (dir === 'asc' ? ' &#9650;' : ' &#9660;'); }",
+        "      else { th.textContent = label; }",
+        "    }",
+        // Persist sort preference.
+        "    fetch('/config/channels/display-prefs', {",
+        "      method: 'POST', headers: { 'Content-Type': 'application/json' },",
+        "      body: JSON.stringify({ sortField: field, sortDirection: dir })",
+        "    }).catch(function() {});",
+        "  };",
+        // Populate channel selector datalist based on the URL field value. First populates from server-rendered data (predefined channels and cached provider
+        // discovery), then asynchronously fetches from the provider discovery endpoint to pick up any channels not yet in the static data.
+        "  function updateSelectorSuggestions(urlInputId, datalistId) {",
+        "    var urlInput = document.getElementById(urlInputId);",
+        "    var datalist = document.getElementById(datalistId);",
+        "    if (!urlInput || !datalist) return;",
+        "    datalist.innerHTML = '';",
+        // Find or create the URL hint element. Placed after the URL input's parent form-row so it sits below the field.
+        "    var hintId = urlInputId + '-url-hint';",
+        "    var hintEl = document.getElementById(hintId);",
+        "    if (!hintEl) {",
+        "      hintEl = document.createElement('div');",
+        "      hintEl.id = hintId;",
+        "      hintEl.className = 'hint';",
+        "      hintEl.style.marginBottom = '0';",
+        "      var formRow = urlInput.closest('.form-row');",
+        "      if (formRow) { formRow.parentNode.insertBefore(hintEl, formRow.nextSibling); }",
+        "    }",
+        "    hintEl.innerHTML = '';",
+        "    hintEl.style.display = 'none';",
+        "    var hostname;",
+        "    var raw = urlInput.value;",
+        "    if (raw && !raw.startsWith('http://') && !raw.startsWith('https://')) { raw = 'https://' + raw; }",
+        "    try { hostname = new URL(raw).hostname; } catch (e) { return; }",
+        "    var alt = hostname.startsWith('www.') ? hostname.substring(4) : 'www.' + hostname;",
+        // Resolve the provider hostname. Try exact match first, then www-variant, then base domain match (e.g., sling.com matches watch.sling.com).
+        "    var exactMatch = (typeof channelSelectorsByDomain !== 'undefined') && channelSelectorsByDomain[hostname];",
+        "    var resolvedHostname = null;",
+        "    if ((typeof providerByDomain !== 'undefined') && providerByDomain[hostname]) { resolvedHostname = hostname; }",
+        "    else if ((typeof providerByDomain !== 'undefined') && providerByDomain[alt]) { resolvedHostname = alt; }",
+        "    else if (typeof providerByDomain !== 'undefined') {",
+        "      var suffix = '.' + hostname;",
+        "      var domainKeys = Object.keys(providerByDomain);",
+        "      for (var d = 0; d < domainKeys.length; d++) {",
+        "        if (domainKeys[d].endsWith(suffix)) { resolvedHostname = domainKeys[d]; break; }",
+        "      }",
+        "    }",
+        "    var slug = resolvedHostname ? providerByDomain[resolvedHostname] : null;",
+        "    var entries = exactMatch || ((typeof channelSelectorsByDomain !== 'undefined')",
+        "      ? (channelSelectorsByDomain[alt] || (resolvedHostname ? channelSelectorsByDomain[resolvedHostname] : null)) : null);",
+        "    if (entries) {",
+        "      for (var i = 0; i < entries.length; i++) {",
+        "        var opt = document.createElement('option');",
+        "        opt.value = entries[i].value;",
+        "        opt.label = entries[i].label;",
+        "        datalist.appendChild(opt);",
+        "      }",
+        "    }",
+        // Show a URL hint when the hostname didn't match exactly and we found a provider via fallback.
+        "    if (!exactMatch && slug && (typeof providerGuideUrl !== 'undefined') && providerGuideUrl[slug]) {",
+        "      var suggestedUrl = providerGuideUrl[slug];",
+        "      var link = document.createElement('a');",
+        "      link.href = '#';",
+        "      link.textContent = suggestedUrl;",
+        "      link.addEventListener('click', function(e) {",
+        "        e.preventDefault();",
+        "        urlInput.value = suggestedUrl;",
+        "        hintEl.innerHTML = '';",
+        "        hintEl.style.display = 'none';",
+        "        updateSelectorSuggestions(urlInputId, datalistId);",
+        "      });",
+        "      hintEl.appendChild(document.createTextNode('Did you mean '));",
+        "      hintEl.appendChild(link);",
+        "      hintEl.appendChild(document.createTextNode('?'));",
+        "      hintEl.style.display = '';",
+        "    }",
+        "    if (!slug) return;",
+        "    var snapshotUrl = urlInput.value;",
+        "    fetch('/providers/' + slug + '/channels')",
+        "      .then(function(r) { return r.ok ? r.json() : null; })",
+        "      .then(function(channels) {",
+        "        if (!channels || urlInput.value !== snapshotUrl) return;",
+        "        var existing = {};",
+        "        var opts = datalist.querySelectorAll('option');",
+        "        for (var j = 0; j < opts.length; j++) { existing[opts[j].value] = true; }",
+        "        for (var k = 0; k < channels.length; k++) {",
+        "          if (!existing[channels[k].channelSelector]) {",
+        "            var o = document.createElement('option');",
+        "            o.value = channels[k].channelSelector;",
+        "            o.label = channels[k].name;",
+        "            datalist.appendChild(o);",
+        "          }",
+        "        }",
+        "      })",
+        "      .catch(function() {});",
+        "  };",
+        // Initialize disabled channel toggle, provider filter, URL input listeners, and pending toast on page load.
+        "  (function() {",
+        // Show any toast queued by showToastAfterReload() before the last page reload.
+        "    var pending = sessionStorage.getItem('pendingToast');",
+        "    if (pending) {",
+        "      sessionStorage.removeItem('pendingToast');",
+        "      try { var pt = JSON.parse(pending); showToast(pt.message, pt.type); } catch (e) {}",
+        "    }",
+        "    if (localStorage.getItem('prismcast-show-disabled-channels') === 'true') {",
+        "      var table = document.querySelector('.channel-table');",
+        "      var checkbox = document.getElementById('show-disabled-toggle');",
+        "      if (table) table.classList.remove('hide-disabled');",
+        "      if (checkbox) checkbox.checked = true;",
+        "    }",
+        // Run filterChannelRows on page load when a provider filter is active. The server renders filtered options with the hidden attribute, but Safari ignores it on
+        // option elements. This initial pass removes those options from the DOM to enforce the filter.
+        "    var menu = document.querySelector('.provider-dropdown-menu');",
+        "    if (menu) {",
+        "      var cbs = menu.querySelectorAll('input[type=\"checkbox\"]:not(:disabled)');",
+        "      var tags = [];",
+        "      var allChecked = true;",
+        "      for (var ci = 0; ci < cbs.length; ci++) {",
+        "        if (cbs[ci].checked) { tags.push(cbs[ci].getAttribute('data-tag')); }",
+        "        else { allChecked = false; }",
+        "      }",
+        "      if (!allChecked) { filterChannelRows(tags); updateBulkAssignOptions(tags); }",
+        "    }",
+        "    var addUrlInput = document.getElementById('add-url');",
+        "    if (addUrlInput) {",
+        "      addUrlInput.addEventListener('input', function() { updateSelectorSuggestions('add-url', 'add-selectorList'); });",
+        "      updateSelectorSuggestions('add-url', 'add-selectorList');",
+        "    }",
+        "  })();",
+        // Login modal state tracking.
+        "  var loginStatusInterval = null;",
+        // Start login mode for a channel. Opens browser window and shows modal.
+        "  window.startChannelLogin = function(channel) {",
+        "    fetch('/auth/login', {",
+        "      method: 'POST',",
+        "      headers: { 'Content-Type': 'application/json' },",
+        "      body: JSON.stringify({ channel: channel })",
+        "    })",
+        "    .then(function(response) { return response.json(); })",
+        "    .then(function(result) {",
+        "      if (result.success) {",
+        "        showToast('Browser window opened. Complete authentication.', 'info');",
+        "        showLoginModal();",
+        "        startLoginStatusPolling();",
+        "      } else {",
+        "        showToast(result.error || 'Failed to start login.', 'error');",
+        "      }",
+        "    })",
+        "    .catch(function(err) { showToast('Failed to start login: ' + err.message, 'error'); });",
+        "  };",
+        // End login mode. Closes browser tab and hides modal.
+        "  window.endLogin = function() {",
+        "    stopLoginStatusPolling();",
+        "    fetch('/auth/done', { method: 'POST' })",
+        "    .then(function() {",
+        "      hideLoginModal();",
+        "      showToast('Authentication complete.', 'success');",
+        "    })",
+        "    .catch(function(err) { showToast('Error ending login: ' + err.message, 'error'); hideLoginModal(); });",
+        "  };",
+        // Show the login modal.
+        "  function showLoginModal() {",
+        "    var modal = document.getElementById('login-modal');",
+        "    if (modal) modal.style.display = 'flex';",
+        "  }",
+        // Hide the login modal.
+        "  function hideLoginModal() {",
+        "    var modal = document.getElementById('login-modal');",
+        "    if (modal) modal.style.display = 'none';",
+        "  }",
+        // Start polling login status to detect when tab is closed externally.
+        "  function startLoginStatusPolling() {",
+        "    stopLoginStatusPolling();",
+        "    loginStatusInterval = setInterval(function() {",
+        "      fetch('/auth/status')",
+        "      .then(function(response) { return response.json(); })",
+        "      .then(function(status) {",
+        "        if (!status.active) {",
+        "          stopLoginStatusPolling();",
+        "          hideLoginModal();",
+        "          showToast('Login session ended.', 'info');",
+        "        }",
+        "      })",
+        "      .catch(function() { });",
+        "    }, 1000);",
+        "  }",
+        // Stop polling login status.
+        "  function stopLoginStatusPolling() {",
+        "    if (loginStatusInterval) {",
+        "      clearInterval(loginStatusInterval);",
+        "      loginStatusInterval = null;",
+        "    }",
+        "  }",
+        // Attach validation and modified indicator handlers to form inputs.
+        "  var form = document.getElementById('settings-form');",
+        "  if (form) {",
+        "    var inputs = form.querySelectorAll('input, select');",
+        "    for (var k = 0; k < inputs.length; k++) {",
+        "      var eventType = inputs[k].type === 'checkbox' ? 'change' : 'input';",
+        "      inputs[k].addEventListener(eventType, function() {",
+        "        validateInput(this);",
+        "        updateModifiedIndicator(this);",
+        "      });",
+        "    }",
+        // Wire up all checkboxes that have dependent fields. The updateDependentFields function is defined at the top level alongside the other helpers.
+        "    var checkboxes = form.querySelectorAll('input[type=\"checkbox\"]');",
+        "    for (var c = 0; c < checkboxes.length; c++) {",
+        "      (function(cb) {",
+        "        cb.addEventListener('change', function() { updateDependentFields(cb.id); });",
+        "      })(checkboxes[c]);",
+        "    }",
+        // Attach preset change handler to auto-fill bitrate and frame rate.
+        "    var presetSelect = document.getElementById('streaming-qualityPreset');",
+        "    if (presetSelect) {",
+        "      presetSelect.addEventListener('change', function() { onPresetChange(this.value); });",
+        "    }",
+        "  }",
+        // Checkbox list: collect checked values into the hidden input and update the modified indicator. Called by onchange on individual checkboxes within a
+        // checkbox-list-grid. The hidden input holds the JSON-encoded array and participates in the standard form submission.
+        "  window.updateCheckboxList = function(checkbox) {",
+        "    var group = checkbox.closest('.form-group');",
+        "    if (!group) return;",
+        "    var hidden = group.querySelector('[data-checkbox-list]');",
+        "    if (!hidden) return;",
+        "    var grid = group.querySelector('.checkbox-list-grid');",
+        "    if (!grid) return;",
+        "    var cbs = grid.querySelectorAll('input[type=\"checkbox\"]');",
+        "    var values = [];",
+        "    for (var i = 0; i < cbs.length; i++) {",
+        "      if (cbs[i].checked) values.push(cbs[i].value);",
+        "    }",
+        "    hidden.value = JSON.stringify(values);",
+        "    updateModifiedIndicator(hidden);",
+        "  };",
+        // Initialize subtab on load: hash > localStorage > default.
+        "  var initialSubtab = window.initialHashSubtab;",
+        "  if (!initialSubtab) {",
+        "    try { initialSubtab = localStorage.getItem('prismcast-config-subtab'); } catch(e) {}",
+        "  }",
+        "  if (initialSubtab && document.querySelector('.subtab-btn[data-subtab=\"' + initialSubtab + '\"]')) {",
+        "    switchSubtab(initialSubtab, false);",
+        "  }",
+        "})();",
+        "</script>"
+    ].join("\n");
+}
+//# sourceMappingURL=config.js.map