ui_frontend.py

# ui_frontend.py
# CrossWatch - UI Frontend Registration
# Copyright (c) 2025-2026 CrossWatch / Cenodude (https://github.com/cenodude/CrossWatch)
from __future__ import annotations

from pathlib import Path
import time

from fastapi import FastAPI, Request
from fastapi.responses import FileResponse, HTMLResponse, Response
from starlette.staticfiles import StaticFiles
from api.versionAPI import CURRENT_VERSION

__all__ = ["register_assets_and_favicons", "register_ui_root", "get_index_html"]

_ASSET_VERSION_CACHE: dict[str, float | str] = {"ts": 0.0, "val": CURRENT_VERSION}

DEFAULT_MANIFEST: str = r"""{
  "name": "CrossWatch",
  "short_name": "CrossWatch",
  "description": "Sync watchlists, history and ratings across Plex, Trakt, SIMKL, Jellyfin and more.",
  "id": "/",
  "start_url": "/?ui=compact",
  "scope": "/",
  "display": "standalone",
  "display_override": ["standalone", "minimal-ui", "browser"],
  "orientation": "any",
  "background_color": "#0b0b0f",
  "theme_color": "#0b0b0f",
  "icons": [
    { "src": "/assets/pwa/icon-192.png?v=__CW_VERSION__", "sizes": "192x192", "type": "image/png", "purpose": "any" },
    { "src": "/assets/pwa/icon-512.png?v=__CW_VERSION__", "sizes": "512x512", "type": "image/png", "purpose": "any" },
    { "src": "/assets/pwa/icon-192-maskable.png?v=__CW_VERSION__", "sizes": "192x192", "type": "image/png", "purpose": "maskable" },
    { "src": "/assets/pwa/icon-512-maskable.png?v=__CW_VERSION__", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }
  ]
}"""

DEFAULT_SW: str = r"""/* sw.js - service worker */
self.addEventListener("install", (event) => {
  self.skipWaiting();
});
self.addEventListener("activate", (event) => {
  event.waitUntil(self.clients.claim());
});
self.addEventListener("fetch", (event) => {
});
"""

def register_assets_and_favicons(app: FastAPI, root: Path) -> None:
    assets_dir = root / "assets"
    assets_dir.mkdir(parents=True, exist_ok=True)
    app.mount("/assets", StaticFiles(directory=str(assets_dir)), name="assets")

    def asset_response(name: str, fallback: str, media_type: str, **headers: str) -> Response:
        try:
            content = (assets_dir / name).read_text(encoding="utf-8")
        except Exception:
            content = fallback
        return Response(content=content, media_type=media_type, headers=headers)

    @app.get("/favicon.ico", include_in_schema=False, tags=["ui"])
    def favicon_ico() -> FileResponse:
        return FileResponse(assets_dir / "pwa" / "favicon.ico", media_type="image/x-icon", headers={"Cache-Control": "public, max-age=86400"})

    @app.get("/favicon.svg", include_in_schema=False, tags=["ui"])
    def favicon_svg_compat() -> FileResponse:
        return FileResponse(assets_dir / "pwa" / "favicon-64.png", media_type="image/png", headers={"Cache-Control": "public, max-age=86400"})

    @app.get("/manifest.webmanifest", include_in_schema=False, tags=["ui"])
    def manifest_webmanifest() -> Response:
        try:
            content = (assets_dir / "manifest.webmanifest").read_text(encoding="utf-8")
        except Exception:
            content = DEFAULT_MANIFEST
        content = content.replace("__CW_VERSION__", _asset_version_token())
        return Response(content=content, media_type="application/manifest+json", headers={"Cache-Control": "public, max-age=3600"})

    @app.get("/sw.js", include_in_schema=False, tags=["ui"])
    def service_worker() -> Response:
        return asset_response("sw.js", DEFAULT_SW, "text/javascript", **{"Cache-Control": "no-store", "Service-Worker-Allowed": "/"})

def register_ui_root(app: FastAPI) -> None:
    @app.get("/", include_in_schema=False, tags=["ui"])
    def ui_root(request: Request) -> HTMLResponse:
        return HTMLResponse(get_index_html(), headers={"Cache-Control": "no-store"})


_HELPER_SCRIPTS = (
    "help-links.js", "provider-meta.js", "icon-select.js", "profile-select.js", "page-loader.js", "dom.js", "events.js", "api.js", "core.js", "details-log.js",
    "media-meta.js", "trailer.js", "playing-card.js", "watchlist-preview.js", "providers-ui.js", "settings-ui.js", "settings-save.js", "maintenance.js", "backups.js",
    "restart_apply.js",
)
_APP_SCRIPTS = (
    "syncbar.js", "run-summary-stream.js", "main.js", "connections.overlay.js", "connections.pairs.overlay.js", "scheduler.js",
    "schedulerbanner.js", "playingcard.js", "insights.js", "activity.js", "dashboard-widgets.js", "auth-dots.js", "main-status.js",
    "scrobbler.js",
)
def _asset_block() -> str:
    helper_tags = "\n".join(f'<script src="/assets/helpers/{name}?v=__CW_VERSION__"></script>' for name in _HELPER_SCRIPTS)
    app_tags = "\n".join(f'<script src="/assets/js/{name}?v=__CW_VERSION__" defer></script>' for name in _APP_SCRIPTS)
    return "\n".join((
        helper_tags,
        '<script src="/assets/helpers/media_user_picker.js?v=__CW_VERSION__" defer></script>',
        '<script src="/assets/helpers/whitelist_table.js?v=__CW_VERSION__" defer></script>',
        '<script src="/assets/crosswatch.js?v=__CW_VERSION__"></script>',
        app_tags,
        '<script src="/assets/auth/auth.shared.js?v=__CW_VERSION__"></script>',
        '<script src="/assets/auth/auth_loader.js?v=__CW_VERSION__" defer></script>',
        '<script src="/assets/auth/auth.tmdb.js?v=__CW_VERSION__" defer></script>',
        '<script type="module" src="/assets/js/modals.js?v=__CW_VERSION__"></script>',
        '<script src="/assets/js/theme-flat-runtime.js?v=__CW_VERSION__" defer></script>',
    ))


def _asset_version_token() -> str:
    now = time.time()
    cached_at = float(_ASSET_VERSION_CACHE.get("ts") or 0.0)
    cached_val = str(_ASSET_VERSION_CACHE.get("val") or CURRENT_VERSION)
    if now - cached_at < 2.0:
        return cached_val

    root = Path(__file__).resolve().parent
    latest_mtime = 0
    try:
        candidates = [root / "assets", root / "ui_frontend.py"]
        for candidate in candidates:
            if candidate.is_file():
                latest_mtime = max(latest_mtime, int(candidate.stat().st_mtime))
                continue
            if not candidate.exists():
                continue
            for path in candidate.rglob("*"):
                if path.is_file():
                    latest_mtime = max(latest_mtime, int(path.stat().st_mtime))
    except Exception:
        latest_mtime = 0

    token = f"{CURRENT_VERSION}.{latest_mtime}" if latest_mtime > 0 else CURRENT_VERSION
    _ASSET_VERSION_CACHE["ts"] = now
    _ASSET_VERSION_CACHE["val"] = token
    return token


def _get_index_html_static() -> str:
    return r"""<!doctype html><html lang="en"><head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
<title>CrossWatch</title>
<script>
(() => {
  const APP_NAME = "CrossWatch";
  const TITLES = {
    main: "Main",
    watchlist: "Watchlist",
    playback_progress: "Playback Progress",
    snapshots: "Captures",
    playlists: "Playlists",
    editor: "Editor",
    settings: "Settings",
  };

  const normalize = (value) => String(value || "").trim().toLowerCase();

  const setTitle = (page) => {
    const label = TITLES[normalize(page)];
    document.title = label ? `${label} | ${APP_NAME}` : APP_NAME;
  };

  const currentPage = () => {
    const dataTab = normalize(document.body?.dataset?.tab || document.documentElement?.dataset?.tab);
    if (dataTab) return dataTab;

    const activeTab = document.querySelector('.tabs .tab.active[id^="tab-"]')?.id || "";
    return normalize(activeTab.replace(/^tab-/, "")) || "main";
  };

  window.cwSetDocumentTitle = setTitle;
  document.addEventListener("DOMContentLoaded", () => setTitle(currentPage()), { once: true });
  document.addEventListener("tab-changed", (event) => setTitle(event?.detail?.id || event?.detail?.tab));
  document.addEventListener("cw-settings-pane-changed", () => {
    if (currentPage() === "settings") setTitle("settings");
  });
})();
</script>
<link rel="icon" type="image/png" sizes="64x64" href="/assets/pwa/favicon-64.png?v=__CW_VERSION__"><link rel="alternate icon" href="/favicon.ico?v=__CW_VERSION__">
<meta name="theme-color" content="#0b0b0f">
<link rel="manifest" href="/manifest.webmanifest">
<link rel="apple-touch-icon" sizes="180x180" href="/assets/pwa/apple-touch-icon.png?v=__CW_VERSION__">
<meta name="application-name" content="CrossWatch">
<meta name="apple-mobile-web-app-title" content="CrossWatch">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<script>
(() => {
  try {
    const raw = localStorage.getItem("cw.ui.theme") || "flat-dark";
    const theme = raw === "flat-light" ? "flat-light" : raw === "original" ? "original" : "flat-dark";
    if (theme === "original") {
      delete document.documentElement.dataset.cwTheme;
    } else {
      document.documentElement.dataset.cwTheme = theme;
    }
    document.documentElement.classList.toggle("cw-theme-light", theme === "flat-light");
    document.documentElement.classList.toggle("cw-theme-dark", theme === "flat-dark");
    document.documentElement.classList.toggle("cw-theme-original", theme === "original");
  } catch {
    document.documentElement.dataset.cwTheme = "flat-dark";
  }
})();
</script>

<link rel="stylesheet" href="/assets/themes/tokens.css?v=__CW_VERSION__">
<link rel="stylesheet" href="/assets/css/base.css?v=__CW_VERSION__">
<link rel="stylesheet" href="/assets/css/providers.css?v=__CW_VERSION__">
<link rel="stylesheet" href="/assets/crosswatch.css?v=__CW_VERSION__">
<link rel="stylesheet" href="/assets/css/auth-providers.css?v=__CW_VERSION__">
<link rel="stylesheet" href="/assets/css/layout.css?v=__CW_VERSION__">
<link rel="stylesheet" href="/assets/css/components.css?v=__CW_VERSION__">
<link rel="stylesheet" href="/assets/css/pages.css?v=__CW_VERSION__">
<link rel="stylesheet" href="/assets/ui-shell.css?v=__CW_VERSION__">
<script>
(() => {
  try {
    const q = new URLSearchParams(window.location.search || "");
    const ui = String(q.get("ui") || "").toLowerCase();
    const explicit = ui === "compact" || ui === "full" || q.get("compact") === "1" || q.get("full") === "1";
    const hasCompactViewport = !!window.matchMedia?.("(max-width: 680px)")?.matches;
    const uaLooksMobile = /Android|iPhone|iPad|iPod/i.test(navigator.userAgent || "");
    const likelyHandheld = (() => {
      try {
        if (typeof navigator.userAgentData?.mobile === "boolean") return navigator.userAgentData.mobile;
      } catch {}
      if (uaLooksMobile) return true;
      try {
        const coarse = !!window.matchMedia?.("(pointer: coarse)")?.matches;
        const fine = !!window.matchMedia?.("(pointer: fine)")?.matches;
        const points = Number(navigator.maxTouchPoints || 0);
        return points > 1 && coarse && !fine && hasCompactViewport;
      } catch {}
      return false;
    })();
    const wantCompact = ui === "compact" || q.get("compact") === "1" || (!explicit && hasCompactViewport && likelyHandheld);
    if (wantCompact) document.documentElement.classList.add("cw-compact");
  } catch {}
})();
</script>

<link rel="preload" href="/assets/fonts/material-symbols-rounded-full-v355.woff2" as="font" type="font/woff2" crossorigin>
<link rel="stylesheet" href="/assets/fonts/material-symbols-rounded.css?v=__CW_VERSION__">
<link rel="stylesheet" href="/assets/js/modals/core/styles.css?v=__CW_VERSION__">
<link id="cw-theme-flat-css" rel="stylesheet" href="/assets/themes/flat.css?v=__CW_VERSION__" media="not all" disabled>
<link id="cw-theme-original-css" rel="stylesheet" href="/assets/themes/original-coverage.css?v=__CW_VERSION__" media="not all" disabled>
<script>
(() => {
  const original = document.documentElement.classList.contains("cw-theme-original");
  const flatLink = document.getElementById("cw-theme-flat-css");
  const originalLink = document.getElementById("cw-theme-original-css");
  flatLink.disabled = original;
  flatLink.media = original ? "not all" : "all";
  originalLink.disabled = !original;
  originalLink.media = original ? "all" : "not all";
})();
</script>
</head><body>

<header>
  <div class="brand" role="button" tabindex="0" title="Go to Main" onclick="showTab('main')" onkeypress="if(event.key==='Enter'||event.key===' ')showTab('main')">
    <img class="logo" src="/assets/pwa/favicon-64.png?v=__CW_VERSION__" alt="CrossWatch">
    <span class="brand-text">
      <span class="name">CrossWatch</span>
      <span class="version">__CW_CURRENT_VERSION__</span>
    </span>
  </div>

  <nav class="tabs" aria-label="Primary navigation">
    <button id="tab-main" class="tab active" type="button" onclick="showTab('main')">Main</button>
    <button id="tab-watchlist" class="tab" type="button" onclick="showTab('watchlist')">Watchlist</button>
    <button id="tab-playback_progress" class="tab" type="button" onclick="showTab('playback_progress')">Playback</button>
    <button id="tab-snapshots" class="tab" type="button" onclick="showTab('snapshots')">Captures</button>
    <button id="tab-playlists" class="tab" type="button" onclick="showTab('playlists')">Playlists</button>
    <button id="tab-editor" class="tab" type="button" onclick="showTab('editor')">Editor</button>
    <div class="cw-tabmenu" id="tab-settings-menu">
      <button id="tab-settings" class="tab" type="button"
              aria-haspopup="menu" aria-expanded="false"
              onclick="window.cwToggleSettingsMenu(event)">
        <span>Settings</span>
        <span class="tab-caret" aria-hidden="true"></span>
      </button>
      <div class="cw-menu hidden" id="cw-settings-menu" role="menu" aria-labelledby="tab-settings">
        <button class="cw-menu-item active" data-settings-pane="overview" type="button" role="menuitem" aria-current="page" onclick="window.cwSettingsMenuSelect('overview')"><span class="material-symbols-rounded cw-menu-icon" aria-hidden="true">grid_view</span><span>Settings overview</span></button>
        <div class="cw-menu-sep" role="separator" aria-hidden="true"></div>
        <button class="cw-menu-item" data-settings-pane="providers" type="button" role="menuitem" onclick="window.cwSettingsMenuSelect('providers')"><span class="material-symbols-rounded cw-menu-icon" aria-hidden="true">device_hub</span><span>Connections</span></button>
        <button class="cw-menu-item" data-settings-pane="sync" type="button" role="menuitem" onclick="window.cwSettingsMenuSelect('pairs')"><span class="material-symbols-rounded cw-menu-icon" aria-hidden="true">sync_alt</span><span>Sync pairs</span></button>
        <button class="cw-menu-item" data-settings-pane="scrobbler" type="button" role="menuitem" onclick="window.cwSettingsMenuSelect('scrobbler')"><span class="material-symbols-rounded cw-menu-icon" aria-hidden="true">sensors</span><span>Scrobbler</span></button>
        <button class="cw-menu-item" data-settings-pane="scheduling" type="button" role="menuitem" onclick="window.cwSettingsMenuSelect('scheduling')"><span class="material-symbols-rounded cw-menu-icon" aria-hidden="true">schedule</span><span>Scheduling</span></button>
        <button class="cw-menu-item" data-settings-pane="app" type="button" role="menuitem" onclick="window.cwSettingsMenuSelect('app')"><span class="material-symbols-rounded cw-menu-icon" aria-hidden="true">security</span><span>UI and Security</span></button>
        <button class="cw-menu-item" data-settings-pane="maintenance" type="button" role="menuitem" onclick="window.cwSettingsMenuSelect('maintenance')"><span class="material-symbols-rounded cw-menu-icon" aria-hidden="true">build</span><span>Maintenance</span></button>
        <div class="cw-menu-sep" role="separator" aria-hidden="true"></div>
        <button class="cw-menu-item danger" type="button" role="menuitem" onclick="window.cwSettingsMenuLogout()"><span class="material-symbols-rounded cw-menu-icon" aria-hidden="true">logout</span><span>Log out</span></button>
      </div>
    </div>
    <div class="cw-tabmenu" id="tab-about-menu">
      <button id="tab-about" class="tab" type="button"
              aria-haspopup="menu" aria-expanded="false"
              onclick="window.cwToggleAboutMenu(event)">
        <span>About</span>
        <span class="tab-caret" aria-hidden="true"></span>
      </button>
      <div class="cw-menu hidden" id="cw-about-menu" role="menu" aria-labelledby="tab-about">
        <button class="cw-menu-item" type="button" role="menuitem" onclick="window.cwAboutMenuSelect('about')"><span class="material-symbols-rounded cw-menu-icon" aria-hidden="true">info</span><span>About</span></button>
        <button class="cw-menu-item" type="button" role="menuitem" onclick="window.cwAboutMenuSelect('help')"><span class="material-symbols-rounded cw-menu-icon" aria-hidden="true">help</span><span>Help</span></button>
      </div>
    </div>
  </nav>

  <div class="cw-ui-toggle" aria-label="UI mode">
    <button class="cw-ui-btn btn-full" type="button" onclick="cwSetUiMode('full')">Full UI</button>
    <button class="cw-ui-btn btn-compact" type="button" onclick="cwSetUiMode('compact')">Compact</button>
  </div>
</header>

<main id="layout">
  <section id="ops-card" class="card cw-main-card cw-main-card--sync">
    <div class="title">Sync Hub</div>
    <div class="ops-header cw-main-card-head">
      <div class="cw-main-card-head-copy">
        <h2>Sync Hub</h2>
      </div>
      <div class="cw-main-card-head-side">
        <div id="conn-badges" class="vip-badges"></div>
        <div class="cw-main-card-head-actions">
          <div id="update-banner" class="hidden"><span id="update-text">A new version is available.</span>
            <a id="update-link" href="https://github.com/cenodude/crosswatch/releases" target="_blank" rel="noopener">Get update</a>
          </div>
          <button id="btn-status-refresh" class="iconbtn" title="Re-check status" aria-label="Refresh status">
            <svg viewBox="0 0 24 24" width="18" height="18" aria-hidden="true">
              <path d="M21 12a9 9 0 1 1-2.64-6.36" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
              <path d="M21 5v5h-5" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
          </button>
        </div>
      </div>
    </div>

    <div class="sync-status" style="display:none"><div id="sync-icon"></div><div id="sync-status-text"></div><span id="sched-inline" style="display:none"></span></div>
    <div id="ux-progress"></div><div id="ux-lanes"></div><div id="ux-spotlight"></div>

    <div class="action-row">
      <div class="action-buttons">
        <div class="cw-split-run" id="cw-sync-split">
        <button id="run" class="btn acc cw-split-main" onclick="runSync()"><span class="material-symbols-rounded cw-action-icon cw-sync-action-icon" aria-hidden="true">sync</span><span class="label">Synchronize</span></button>
        <button id="run-menu" class="btn acc cw-split-edge" type="button" title="Sync options" aria-label="Sync options" aria-haspopup="menu" aria-expanded="false" onclick="window.cwToggleSyncMenu(event)"><span class="material-symbols-rounded" aria-hidden="true">expand_more</span></button>
        <div class="cw-menu cw-sync-menu hidden" id="cw-sync-menu" role="menu" aria-labelledby="run-menu"></div>
      </div>
        <button id="btn-details" class="btn cw-hub-action" onclick="toggleDetails()" title="Show the sync results and stats" aria-label="Show the latest sync results and stats"><span class="material-symbols-rounded cw-action-icon" aria-hidden="true">description</span><span>View details</span></button>
        <button class="btn cw-hub-action" onclick="openAnalyzer()" title="Finds missing, unresolved or inconsistent sync items" aria-label="Finds missing, unresolved or inconsistent sync items between providers"><span class="material-symbols-rounded cw-action-icon" aria-hidden="true">monitoring</span><span>Analyzer</span></button>
        <button class="btn cw-hub-action" onclick="openEvents()" title="View sync events" aria-label="View sync events"><span class="material-symbols-rounded cw-action-icon" aria-hidden="true">history</span><span>Events</span></button>
        <button class="btn cw-hub-action" onclick="openExporter()" title="Export your watchlist, history and ratings to a file" aria-label="Export your watchlist, history and ratings to a file"><span class="material-symbols-rounded cw-action-icon" aria-hidden="true">ios_share</span><span>Exporter</span></button>
      </div>
      <div class="cw-status-dock"></div>
    </div>

    <div id="details" class="details hidden">
      <div class="details-grid">
        <div class="det-left">
          <div class="det-head">
            <div class="det-tabs" role="tablist" aria-label="Output tabs">
              <button id="det-tab-sync" class="det-tab active" type="button"
                role="tab" aria-selected="true" aria-controls="det-panel-sync" data-tab="sync">Sync</button>
              <button id="det-tab-watcher" class="det-tab" type="button"
                role="tab" aria-selected="false" aria-controls="det-panel-watcher" data-tab="watcher">Watcher</button>
              <button id="det-tab-debug" class="det-tab" type="button"
                role="tab" aria-selected="false" aria-controls="det-panel-debug" data-tab="debug">Debug</button>
            </div>
            <div class="det-tools">
              <button id="det-copy" class="ghost det-tool-icon" type="button" title="Copy current output" aria-label="Copy current output"><span class="material-symbols-rounded" aria-hidden="true">content_copy</span></button>
              <button id="det-clear" class="ghost det-tool-icon" type="button" title="Clear current output" aria-label="Clear current output"><span class="material-symbols-rounded" aria-hidden="true">delete</span></button>
              <button id="det-follow" class="ghost det-follow" type="button" title="Toggle auto-follow" aria-pressed="true"><span class="material-symbols-rounded det-follow-icon" aria-hidden="true">podcasts</span><span>Follow</span><span class="material-symbols-rounded det-follow-caret" aria-hidden="true">expand_more</span></button>
            </div>
          </div>
          <div class="det-panels">
            <div id="det-panel-sync" class="det-panel" role="tabpanel" aria-labelledby="det-tab-sync">
              <div id="det-log" class="log"></div>
            </div>
            <div id="det-panel-watcher" class="det-panel hidden" role="tabpanel" aria-labelledby="det-tab-watcher">
              <div id="det-watch-log" class="log wlog"></div>
            </div>
            <div id="det-panel-debug" class="det-panel hidden" role="tabpanel" aria-labelledby="det-tab-debug">
              <div id="det-debug-log" class="log wlog"></div>
            </div>
          </div>
          <div class="det-console-footer" aria-live="polite">
            <span id="det-live-state" class="det-live-state"><span class="det-live-dot" aria-hidden="true"></span><span class="det-live-label">Live</span></span>
            <span id="det-follow-state" class="det-follow-state">Auto-scroll on</span>
            <span class="det-footer-spacer"></span>
            <span id="det-line-count" class="det-line-count">0 lines</span>
            <span class="material-symbols-rounded det-list-icon" aria-hidden="true">format_list_bulleted</span>
          </div>

        </div>
        <div class="det-right">
          <div class="meta-card">
            <div class="meta-grid">
              <div class="meta-label">Module</div><div class="meta-value"><span id="det-cmd" class="pillvalue truncate">-</span></div>
              <div class="meta-label">Version</div><div class="meta-value"><span id="det-ver" class="pillvalue">-</span></div>
              <div class="meta-label">Started</div><div class="meta-value"><span id="det-start" class="pillvalue mono">-</span></div>
              <div class="meta-label">Finished</div><div class="meta-value"><span id="det-finish" class="pillvalue mono">-</span></div>
            </div>
            <div class="meta-actions"><button class="btn" onclick="copySummary(this)">Copy summary</button></div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <section id="stats-card" class="card cw-main-card cw-main-card--stats">
    <div class="title">Statistics</div>
    <div class="cw-main-card-head cw-main-card-head--compact">
      <div class="cw-main-card-head-copy">
        <div class="cw-main-card-kicker">Statistics</div>
      </div>
    </div>

    <div class="stats-modern v2">
      <div class="now"><div class="label">Now</div><div id="stat-now" class="value" data-v="0">0</div><div class="chips"><span id="trend-week" class="chip trend flat">no change</span></div></div>
      <div class="facts">
        <div class="fact"><span class="k">Last Week</span><span id="stat-week" class="v" data-v="0">0</span></div>
        <div class="fact"><span class="k">Last Month</span><span id="stat-month" class="v" data-v="0">0</span></div>
        <div class="mini-legend"><span class="dot add"></span><span class="l">Added</span><span id="stat-added" class="n">0</span><span class="dot del"></span><span class="l">Removed</span><span id="stat-removed" class="n">0</span></div>
        <div class="stat-meter" aria-hidden="true"><span id="stat-fill"></span></div>
      </div>
    </div>

    <div class="stat-tiles" id="stat-providers"></div>

    <div class="stat-block" id="recent-activity-block">
      <div class="stat-block-header"><span class="pill plain">Recent Scrobble</span><button id="activity-view-all" class="ghost refresh-insights" type="button">View all</button></div>
      <div id="recent-activity" class="history-list"></div>
    </div>

    <div class="stat-block">
      <div class="stat-block-header"><span class="pill plain">Recent syncs</span><button class="ghost refresh-insights material-symbols-rounded" onclick="refreshInsights()" title="Refresh" aria-label="Refresh recent syncs">refresh</button></div>
      <div id="sync-history" class="history-list"></div>
    </div>
  </section>

  <section id="dashboard-widgets-card" class="cw-dashboard-widgets hidden" aria-label="Media widgets">
    <article id="placeholder-card" class="card cw-main-card cw-main-card--wall cw-dash-widget cw-dash-widget--watchlist cw-dash-widget--wide hidden">
      <div class="title">Watchlist</div>
      <div class="cw-main-card-head cw-main-card-head--compact">
        <div class="cw-main-card-head-copy">
          <div class="cw-dash-title-row">
            <span class="material-symbols-rounded" aria-hidden="true">movie</span>
            <h3>Watchlist</h3>
          </div>
        </div>
        <span id="watchlist-count-chip" class="cw-widget-count-chip hidden" aria-live="polite"></span>
        <button class="cw-watchlist-see-all" type="button" onclick="showTab('watchlist')" aria-label="Open Watchlist page">View all</button>
      </div>
      <div id="wall-msg" class="wall-msg">Loading...</div>
      <div class="wall-wrap">
        <div id="edgeL" class="edge left"></div><div id="edgeR" class="edge right"></div>
        <div id="poster-row" class="row-scroll" aria-label="Watchlist"></div>
        <button class="nav prev" type="button" onclick="scrollWall(-1)" aria-label="Scroll left"><</button>
        <button class="nav next" type="button" onclick="scrollWall(1)" aria-label="Scroll right">></button>
      </div>
    </article>

    <article id="recent-history-widget" class="cw-dash-widget cw-dash-widget--history">
      <div class="cw-dash-widget-head">
        <div class="cw-dash-title-row">
          <span class="material-symbols-rounded" aria-hidden="true">play_arrow</span>
          <h3>Recent History</h3>
        </div>
        <div class="cw-dash-head-actions">
          <span id="recent-history-count-chip" class="cw-widget-count-chip hidden" aria-live="polite"></span>
          <button id="recent-history-refresh" class="cw-dash-ghost" type="button" title="Refresh recent history" aria-label="Refresh recent history"><span class="material-symbols-rounded" aria-hidden="true">refresh</span></button>
        </div>
      </div>
      <div id="recent-history-list" class="cw-history-widget-list cw-widget-scrollbar" aria-live="polite"></div>
    </article>

    <article id="latest-ratings-widget" class="cw-dash-widget cw-dash-widget--ratings">
      <div class="cw-dash-widget-head">
        <div class="cw-dash-title-row">
          <span class="material-symbols-rounded" aria-hidden="true">star</span>
          <h3>Latest Ratings</h3>
        </div>
        <div class="cw-dash-head-actions">
          <span id="latest-ratings-count-chip" class="cw-widget-count-chip hidden" aria-live="polite"></span>
          <button id="latest-ratings-refresh" class="cw-dash-ghost" type="button" title="Refresh latest ratings" aria-label="Refresh latest ratings"><span class="material-symbols-rounded" aria-hidden="true">refresh</span></button>
        </div>
      </div>
      <div id="latest-ratings-grid" class="cw-ratings-widget-grid" aria-live="polite"></div>
    </article>

    <article id="recent-scrobble-widget" class="cw-dash-widget cw-dash-widget--scrobble">
      <div class="cw-dash-widget-head">
        <div class="cw-dash-title-row">
          <span class="material-symbols-rounded" aria-hidden="true">sensors</span>
          <h3>Recent Scrobble</h3>
        </div>
        <div class="cw-dash-head-actions">
          <span id="recent-scrobble-count-chip" class="cw-widget-count-chip hidden" aria-live="polite"></span>
          <button id="recent-scrobble-refresh" class="cw-dash-ghost" type="button" title="Refresh recent scrobble" aria-label="Refresh recent scrobble"><span class="material-symbols-rounded" aria-hidden="true">refresh</span></button>
        </div>
      </div>
      <div id="recent-scrobble-list" class="cw-history-widget-list cw-widget-scrollbar" aria-live="polite"></div>
    </article>

    <article id="recent-progress-widget" class="cw-dash-widget cw-dash-widget--progress">
      <div class="cw-dash-widget-head">
        <div class="cw-dash-title-row">
          <span class="material-symbols-rounded" aria-hidden="true">timelapse</span>
          <h3>Recent Progress</h3>
        </div>
        <div class="cw-dash-head-actions">
          <span id="recent-progress-count-chip" class="cw-widget-count-chip hidden" aria-live="polite"></span>
          <button id="recent-progress-refresh" class="cw-dash-ghost" type="button" title="Refresh recent progress" aria-label="Refresh recent progress"><span class="material-symbols-rounded" aria-hidden="true">refresh</span></button>
        </div>
      </div>
      <div id="recent-progress-list" class="cw-history-widget-list cw-widget-scrollbar" aria-live="polite"></div>
    </article>

    <article id="recent-playlists-widget" class="cw-dash-widget cw-dash-widget--playlists">
      <div class="cw-dash-widget-head">
        <div class="cw-dash-title-row">
          <span class="material-symbols-rounded" aria-hidden="true">queue_music</span>
          <h3>Recent Playlists</h3>
        </div>
        <div class="cw-dash-head-actions">
          <span id="recent-playlists-count-chip" class="cw-widget-count-chip hidden" aria-live="polite"></span>
          <button id="recent-playlists-refresh" class="cw-dash-ghost" type="button" title="Refresh recent playlists" aria-label="Refresh recent playlists"><span class="material-symbols-rounded" aria-hidden="true">refresh</span></button>
        </div>
      </div>
      <div id="recent-playlists-list" class="cw-history-widget-list cw-widget-scrollbar" aria-live="polite"></div>
    </article>
  </section>

  <section id="page-watchlist" class="card hidden tab-page"></section>

  <section id="page-playback_progress" class="card hidden tab-page">
    <div id="playback-progress-root">
      <div class="cw-page-loading">Loading Playback Progress...</div>
    </div>
  </section>

  <section id="page-snapshots" class="card hidden tab-page"></section>

  <section id="page-playlists" class="card hidden tab-page"></section>

  <section id="page-editor" class="card hidden tab-page"></section>

  <section id="page-settings" class="card hidden">
    <div id="cw-settings-shell">
      <aside id="cw-settings-nav" aria-label="Settings navigation">
        <div class="cw-settings-nav-card">
          <div class="cw-settings-nav-title">Settings</div>
          <div class="cw-settings-nav-gear" aria-hidden="true"><span class="material-symbols-rounded">settings</span></div>
        </div>

        <div class="cw-settings-nav-list" role="tablist" aria-label="Settings sections">
          <button type="button" class="cw-settings-nav-btn active" data-pane="overview" onclick="cwSettingsSelect?.('overview')">
            <span class="material-symbols-rounded">grid_view</span>
            <span><strong>Setup</strong><small>Progress, status and next steps</small></span>
            <span class="cw-settings-nav-chev" aria-hidden="true">chevron_right</span>
          </button>
          <button type="button" class="cw-settings-nav-btn" data-pane="providers" onclick="cwSettingsSelect?.('providers')">
            <span class="material-symbols-rounded">device_hub</span>
            <span><strong>Connections</strong><small>Providers and metadata</small></span>
            <span class="cw-settings-nav-chev" aria-hidden="true">chevron_right</span>
          </button>
          <button type="button" class="cw-settings-nav-btn" data-pane="sync" onclick="cwSettingsSelect?.('sync')">
            <span class="material-symbols-rounded">sync_alt</span>
            <span><strong>Synchronization</strong><small>Sync pairs and routes</small></span>
            <span class="cw-settings-nav-chev" aria-hidden="true">chevron_right</span>
          </button>
          <button type="button" class="cw-settings-nav-btn" data-pane="scrobbler" onclick="cwSettingsSelect?.('scrobbler')">
            <span class="material-symbols-rounded">sensors</span>
            <span><strong>Scrobbler</strong><small>Webhook and watcher routes</small></span>
            <span class="cw-settings-nav-chev" aria-hidden="true">chevron_right</span>
          </button>
          <button type="button" class="cw-settings-nav-btn" data-pane="scheduling" onclick="cwSettingsSelect?.('scheduling')">
            <span class="material-symbols-rounded">schedule</span>
            <span><strong>Scheduling</strong><small>Jobs and automation</small></span>
            <span class="cw-settings-nav-chev" aria-hidden="true">chevron_right</span>
          </button>
          <button type="button" class="cw-settings-nav-btn" data-pane="app" onclick="cwSettingsSelect?.('app')">
            <span class="material-symbols-rounded">security</span>
            <span><strong>UI and Security</strong><small>Interface, auth and tracker</small></span>
            <span class="cw-settings-nav-chev" aria-hidden="true">chevron_right</span>
          </button>
          <button type="button" class="cw-settings-nav-btn" data-pane="maintenance" onclick="cwSettingsSelect?.('maintenance')">
            <span class="material-symbols-rounded">build</span>
            <span><strong>Maintenance</strong><small>Tools and diagnostics</small></span>
            <span class="cw-settings-nav-chev" aria-hidden="true">chevron_right</span>
          </button>
        </div>

        <div class="cw-settings-nav-footer">
          <button type="button" class="cw-settings-help-card" onclick="openHelp?.()">
            <span><strong>Need help?</strong><small>View documentation</small></span>
            <span class="material-symbols-rounded" aria-hidden="true">open_in_new</span>
          </button>
        </div>

      </aside>

      <div id="cw-settings-left">
        <section id="cw-settings-overview" class="cw-settings-pane active" data-pane="overview">
          <div id="cw-settings-overview-grid">
            <div class="cw-settings-overview-main">
              <div class="cw-settings-overview-title">
                <h3>Setup</h3>
                <p>Track your setup progress and configure core areas.</p>
              </div>

              <section class="cw-settings-overview-card cw-settings-progress-card">
                <div class="cw-settings-progress-summary">
                  <div class="cw-settings-progress-ring" id="cw-settings-progress-ring">
                    <span id="cw-settings-progress-count">0/4</span>
                  </div>
                  <div class="cw-settings-progress-copy">
                    <strong id="cw-settings-hero-title">Setup progress</strong>
                    <span id="cw-settings-hero-copy">Checking your CrossWatch setup.</span>
                    <span class="cw-settings-hero-progress-value" id="cw-settings-progress-text">0 of 4 steps ready</span>
                    <span class="cw-settings-progress-track" aria-hidden="true"><span id="cw-settings-progress-bar"></span></span>
                  </div>
                </div>
                <div class="cw-settings-progress-steps" aria-label="Setup progress areas">
                  <span class="cw-settings-progress-node" data-step-node="auth"><span class="material-symbols-rounded">check</span><small>Connections</small></span>
                  <span class="cw-settings-progress-node" data-step-node="meta"><span class="material-symbols-rounded">check</span><small>Metadata</small></span>
                  <span class="cw-settings-progress-node" data-step-node="sync"><span class="material-symbols-rounded">check</span><small>Synchronization</small></span>
                  <span class="cw-settings-progress-node" data-step-node="scheduling"><span class="material-symbols-rounded">check</span><small>Automation</small></span>
                </div>
              </section>

              <section class="cw-settings-setup-card-list" aria-label="Setup areas">
                <div class="cw-settings-setup-table">
                  <article class="cw-settings-setup-step cw-settings-setup-row" data-step="auth" role="button" tabindex="0" onclick="cwSettingsOverviewGo?.('auth')" onkeydown="cwSettingsStepKey?.(event,'auth')">
                    <span class="cw-settings-setup-area">
                      <span class="cw-settings-management-icon material-symbols-rounded" aria-hidden="true">device_hub</span>
                      <span>
                        <strong>Connections</strong>
                        <span class="cw-settings-step-copy" id="cw-settings-step-auth-copy">Connect your media services and metadata providers.</span>
                      </span>
                    </span>
                    <span class="cw-settings-step-state" id="cw-settings-step-auth-state">Needs setup</span>
                    <span class="cw-settings-step-detail" id="cw-settings-step-auth-detail">No providers</span>
                    <button type="button" class="cw-settings-step-link" id="cw-settings-step-auth-link" onclick="event.stopPropagation(); cwSettingsOverviewGo?.('auth')">Manage</button>
                  </article>
                  <article class="cw-settings-setup-step cw-settings-setup-row" data-step="meta" role="button" tabindex="0" onclick="cwSettingsOverviewGo?.('meta')" onkeydown="cwSettingsStepKey?.(event,'meta')">
                    <span class="cw-settings-setup-area">
                      <span class="cw-settings-management-icon material-symbols-rounded" aria-hidden="true">database</span>
                      <span>
                        <strong>Metadata</strong>
                        <span class="cw-settings-step-copy" id="cw-settings-step-meta-copy">Configure metadata sources and refresh settings.</span>
                      </span>
                    </span>
                    <span class="cw-settings-step-state" id="cw-settings-step-meta-state">Missing</span>
                    <span class="cw-settings-step-detail" id="cw-settings-step-meta-detail">Configure metadata sources</span>
                    <button type="button" class="cw-settings-step-link" id="cw-settings-step-meta-link" onclick="event.stopPropagation(); cwSettingsOverviewGo?.('meta')">Manage</button>
                  </article>
                  <article class="cw-settings-setup-step cw-settings-setup-row" data-step="sync" role="button" tabindex="0" onclick="cwSettingsOverviewGo?.('sync')" onkeydown="cwSettingsStepKey?.(event,'sync')">
                    <span class="cw-settings-setup-area">
                      <span class="cw-settings-management-icon material-symbols-rounded" aria-hidden="true">sync_alt</span>
                      <span>
                        <strong>Synchronization</strong>
                        <span class="cw-settings-step-copy" id="cw-settings-step-sync-copy">Manage sync pairs, routes and history.</span>
                      </span>
                    </span>
                    <span class="cw-settings-step-state" id="cw-settings-step-sync-state">Optional</span>
                    <span class="cw-settings-step-detail" id="cw-settings-step-sync-detail">No pairs configured</span>
                    <button type="button" class="cw-settings-step-link" id="cw-settings-step-sync-link" onclick="event.stopPropagation(); cwSettingsOverviewGo?.('sync')">Manage</button>
                  </article>
                  <article class="cw-settings-setup-step cw-settings-setup-row" data-step="scheduling" role="button" tabindex="0" onclick="cwSettingsOverviewGo?.('scheduling')" onkeydown="cwSettingsStepKey?.(event,'scheduling')">
                    <span class="cw-settings-setup-area">
                      <span class="cw-settings-management-icon material-symbols-rounded" aria-hidden="true">schedule</span>
                      <span>
                        <strong>Automation</strong>
                        <span class="cw-settings-step-copy" id="cw-settings-step-scheduling-copy">Schedule jobs and manage automation tasks.</span>
                      </span>
                    </span>
                    <span class="cw-settings-step-state" id="cw-settings-step-scheduling-state">Optional</span>
                    <span class="cw-settings-step-detail" id="cw-settings-step-scheduling-detail">No automation enabled</span>
                    <button type="button" class="cw-settings-step-link" id="cw-settings-step-scheduling-link" onclick="event.stopPropagation(); cwSettingsOverviewGo?.('scheduling')">Manage</button>
                  </article>
                </div>
              </section>

              <div class="hidden" aria-hidden="true">
                <span id="cw-settings-primary-cta"></span>
                <span id="cw-settings-scrobbler-cta"></span>
                <span id="cw-settings-stat-auth"></span>
                <span id="cw-settings-stat-auth-copy"></span>
                <span id="cw-settings-stat-pairs"></span>
                <span id="cw-settings-stat-pairs-copy"></span>
                <span id="cw-settings-stat-automation"></span>
                <span id="cw-settings-stat-automation-copy"></span>
              </div>

            </div>
            <aside id="cw-settings-insight" aria-label="Settings Insight"></aside>
          </div>
        </section>

        <section class="cw-settings-pane" data-pane="providers">
          <div class="cw-settings-pane-head cw-settings-hero cw-settings-hero-connections">
            <div>
              <div class="cw-settings-pane-kicker">Connections</div>
              <h3>Providers and metadata</h3>
              <p>Connect media servers and/or Trackers first (Providers) then configure Metadata (TMDb)</p>
            </div>
            <div class="cw-settings-pane-head-actions">
              <div class="cw-settings-jumpbar cw-connections-actions" aria-label="Connection actions">
                <button type="button" class="cw-settings-jump" onclick="window.openAddMetadata?.()"><span class="material-symbols-rounded" aria-hidden="true">add</span>Add metadata</button>
                <button type="button" class="cw-settings-jump" onclick="window.openAddConnection?.()"><span class="material-symbols-rounded" aria-hidden="true">add</span>Add provider</button>
              </div>
            </div>
            <span class="material-symbols-rounded cw-settings-hero-shape" aria-hidden="true">hub</span>
          </div>
          <div class="cw-settings-pane-stack cw-settings-providers-stack">
            <div class="section open cw-settings-section cw-settings-provider-section" id="sec-auth" data-accordion="off">
              <div class="body"><div id="auth-providers"></div></div>
            </div>
            <div id="metadata-providers" class="hidden" aria-hidden="true">
              <div id="meta-provider-panel" class="cw-meta-provider-stack"></div>
              <div id="meta-provider-raw" class="hidden"></div>
            </div>
          </div>
        </section>

        <section class="cw-settings-pane" data-pane="sync">
          <div class="cw-settings-pane-head cw-settings-hero cw-settings-hero-sync">
            <div>
              <div class="cw-settings-pane-kicker">Synchronization</div>
              <h3>Sync pairs</h3>
              <p>Choose providers and manage how data syncs between them.</p>
            </div>
            <span class="material-symbols-rounded cw-settings-hero-shape" aria-hidden="true">sync_alt</span>
          </div>
          <div class="cw-settings-pane-stack cw-settings-sync-stack">
            <div class="section open cw-settings-section" id="sec-sync" data-accordion="off">
              <div class="body">
                <div id="providers_list" class="grid2"></div>
                <div class="sep"></div><h4 class="cw-sync-subhead">Pairs</h4><div id="pairs_list"></div>
                <div class="footer"><div class="pair-selectors" style="margin-top:1em;">
                  <label for="source-provider" style="margin-right:1em;">Source:</label><select id="source-provider" name="source_provider" style="margin-left:.5em;"></select>
                  <label for="target-provider">Target:</label><select id="target-provider" name="target_provider" style="margin-left:.5em;"></select>
                </div></div>
              </div>
            </div>
          </div>
        </section>

        <section class="cw-settings-pane" data-pane="scheduling">
          <div class="cw-settings-pane-head cw-settings-hero cw-settings-hero-scheduling">
            <div>
              <div class="cw-settings-pane-kicker">Scheduling</div>
              <h3>Run automation</h3>
              <p>Use standard for simple scheduling tasks or advanced for pair-based scheduling</p>
            </div>
            <div class="cw-settings-pane-head-actions">
              <div class="cw-settings-jumpbar" id="sched-pane-tabs" aria-label="Scheduling sections">
                <button type="button" class="cw-settings-jump active" data-sub="basic">Standard</button>
                <button type="button" class="cw-settings-jump" data-sub="advanced">Advanced</button>
              </div>
            </div>
            <span class="material-symbols-rounded cw-settings-hero-shape" aria-hidden="true">event_repeat</span>
          </div>
          <div class="section open cw-settings-section cw-scheduling-section" id="sec-scheduling" data-accordion="off">
            <div class="body">
              <div id="sched-provider-panel" class="cw-panel hidden"></div>
              <div id="sched-provider-raw" class="hidden">
                <div class="grid2">
                  <div><label for="schEnabled">Enable</label><select id="schEnabled" name="schEnabled"><option value="false">Disabled</option><option value="true">Enabled</option></select></div>
                  <div><label for="schMode">Frequency</label><select id="schMode" name="schMode"><option value="hourly">Every hour</option><option value="every_n_hours">Every N hours</option><option value="daily_time">Daily at...</option><option value="custom_interval">Custom</option></select></div>
                  <div><label for="schN">Every N hours</label><input id="schN" name="schN" type="number" min="2" value="12"></div>
                  <div><label for="schTime">Time</label><input id="schTime" name="schTime" type="time" value="03:30"></div>
                  <div><label for="schCustomValue">Custom interval</label><input id="schCustomValue" name="schCustomValue" type="number" min="15" step="15" value="60"></div>
                  <div><label for="schCustomUnit">Custom unit</label><select id="schCustomUnit" name="schCustomUnit"><option value="minutes">Minutes</option><option value="hours">Hours</option></select></div>
                </div>
                <div id="sched_advanced_mount"></div>
              </div>
            </div>
          </div>
        </section>

        <section class="cw-settings-pane" data-pane="scrobbler">
          <div id="sec-scrobbler" class="cw-settings-pane-stack cw-settings-scrobbler-stack" data-accordion="off">
            <div id="scrobble-mount" class="cw-settings-pane-stack cw-settings-scrobbler-stack-inner">
              <div class="sc2-page">
                <div class="cw-settings-pane-head cw-settings-hero cw-settings-hero-scrobbler sc2-pane-head">
                  <div>
                    <div class="cw-settings-pane-kicker">Scrobbler</div>
                    <h3>Webhooks and Watcher</h3>
                    <p>Receive real time scrobbles via Watcher routes or webhooks. <b>Watcher is recommended</b> Only use both for specific use cases!</p>
                  </div>
                  <span class="material-symbols-rounded cw-settings-hero-shape" aria-hidden="true">sensors</span>
                </div>
                <div class="sc2-empty">Loading Scrobbler...</div>
              </div>
            </div>
          </div>
        </section>

        <section class="cw-settings-pane cw-app-settings-pane" data-pane="app">
          <div class="cw-settings-pane-head cw-app-hero">
            <div class="cw-app-hero-copy">
              <div class="cw-app-hero-panel active" data-app-hero="ui">
                <div class="cw-settings-pane-kicker">UI and Security</div>
                <h3>Interface, authentication and Local Tracker</h3>
                <p>Shape the experience, lock things down, and manage tracker behavior.</p>
              </div>
              <div class="cw-app-hero-panel" data-app-hero="security">
                <div class="cw-settings-pane-kicker">Security</div>
                <h3>Authentication and access controls</h3>
                <p>Manage sign-in, sessions, remembered browsers and trusted proxy access.</p>
              </div>
              <div class="cw-app-hero-panel" data-app-hero="tracker">
                <div class="cw-settings-pane-kicker">Local Tracker</div>
                <h3>Retention, capture and restore snapshots</h3>
                <p>Control local provider snapshots and choose restore defaults per feature.</p>
              </div>
            </div>
            <div class="cw-settings-jumpbar" aria-label="UI settings sections">
              <button type="button" class="cw-settings-jump active" data-target="ui" onclick="cwUiSettingsJump?.('ui')">User Interface</button>
              <button type="button" class="cw-settings-jump" data-target="security" onclick="cwUiSettingsJump?.('security')">Security</button>
              <button type="button" class="cw-settings-jump" data-target="tracker" onclick="cwUiSettingsJump?.('tracker')">Local Tracker</button>
            </div>
            <span class="material-symbols-rounded cw-app-hero-shape active" data-app-hero-shape="ui" aria-hidden="true">desktop_windows</span>
            <span class="material-symbols-rounded cw-app-hero-shape" data-app-hero-shape="security" aria-hidden="true">shield</span>
            <span class="material-symbols-rounded cw-app-hero-shape" data-app-hero-shape="tracker" aria-hidden="true">database</span>
          </div>
          <div class="section open cw-settings-section cw-app-section" id="sec-ui" data-accordion="off">
            <div class="head" style="display:flex;align-items:center">
              <span class="chev"></span>
              <strong>Settings (UI / Security / Local Tracker)</strong>
            </div>
            <div class="body">

              <div class="cw-settings-panels" id="ui_settings_panels">

                <!-- Panel: User Interface -->
                <div class="cw-settings-panel cw-settings-shell cw-app-panel active" data-tab="ui">
                  <div class="cw-settings-layout cw-app-ui-layout">
                    <div class="cw-settings-block cw-app-card cw-app-card-widgets">
                      <div class="cw-app-card-head">
                        <span class="material-symbols-rounded cw-app-card-icon" aria-hidden="true">dashboard_customize</span>
                        <div>
                          <div class="cw-settings-block-title">Dashboard widgets</div>
                          <div class="sub">Control which widgets appear on the dashboard.</div>
                        </div>
                      </div>
                      <div class="cw-settings-2col">
                        <div>
                          <div class="cw-field-label-row">
                            <label for="ui_show_watchlist_preview">Watchlist widget</label>
                            <button type="button" class="cw-field-help material-symbols-rounded" title="Watchlist widget: Shows or hides the dashboard Watchlist card on the Main screen." aria-label="Watchlist widget setting help">help</button>
                          </div>
                          <select id="ui_show_watchlist_preview" name="ui_show_watchlist_preview">
                            <option value="true">Show</option>
                            <option value="false">Hide</option>
                          </select>
                        </div>

                        <div>
                          <div class="cw-field-label-row">
                            <label for="ui_show_recent_history_widget">Recent history widget</label>
                            <button type="button" class="cw-field-help material-symbols-rounded" title="Recent history widget: Shows or hides the Main screen media history widget below Watchlist." aria-label="Recent history widget setting help">help</button>
                          </div>
                          <select id="ui_show_recent_history_widget" name="ui_show_recent_history_widget">
                            <option value="true">Show</option>
                            <option value="false">Hide</option>
                          </select>
                        </div>

                        <div>
                          <div class="cw-field-label-row">
                            <label for="ui_show_latest_ratings_widget">Latest ratings widget</label>
                            <button type="button" class="cw-field-help material-symbols-rounded" title="Latest ratings widget: Shows or hides the Main screen latest ratings poster widget below Watchlist." aria-label="Latest ratings widget setting help">help</button>
                          </div>
                          <select id="ui_show_latest_ratings_widget" name="ui_show_latest_ratings_widget">
                            <option value="true">Show</option>
                            <option value="false">Hide</option>
                          </select>
                        </div>

                        <div>
                          <div class="cw-field-label-row">
                            <label for="ui_show_recent_scrobble_widget">Recent Scrobble widget</label>
                            <button type="button" class="cw-field-help material-symbols-rounded" title="Recent Scrobble widget: Shows or hides the Main screen recent scrobble widget below Watchlist." aria-label="Recent Scrobble widget setting help">help</button>
                          </div>
                          <select id="ui_show_recent_scrobble_widget" name="ui_show_recent_scrobble_widget">
                            <option value="true">Show</option>
                            <option value="false">Hide</option>
                          </select>
                        </div>

                        <div>
                          <div class="cw-field-label-row">
                            <label for="ui_show_recent_progress_widget">Recent Progress widget</label>
                            <button type="button" class="cw-field-help material-symbols-rounded" title="Recent Progress widget: Shows or hides the Main screen recent progress sync activity widget." aria-label="Recent Progress widget setting help">help</button>
                          </div>
                          <select id="ui_show_recent_progress_widget" name="ui_show_recent_progress_widget">
                            <option value="true">Show</option>
                            <option value="false">Hide</option>
                          </select>
                        </div>

                        <div>
                          <div class="cw-field-label-row">
                            <label for="ui_show_recent_playlists_widget">Recent Playlists widget</label>
                            <button type="button" class="cw-field-help material-symbols-rounded" title="Recent Playlists widget: Shows or hides the Main screen recent playlist sync activity widget." aria-label="Recent Playlists widget setting help">help</button>
                          </div>
                          <select id="ui_show_recent_playlists_widget" name="ui_show_recent_playlists_widget">
                            <option value="true">Show</option>
                            <option value="false">Hide</option>
                          </select>
                        </div>
                      </div>
                    </div>

                    <div class="cw-settings-block cw-app-card cw-app-card-visibility">
                      <div class="cw-app-card-head">
                        <span class="material-symbols-rounded cw-app-card-icon" aria-hidden="true">visibility</span>
                        <div>
                          <div class="cw-settings-block-title">Visibility</div>
                          <div class="sub">Manage what information is displayed in the UI.</div>
                        </div>
                      </div>
                      <div class="cw-settings-2col">
                        <div>
                          <div class="cw-field-label-row">
                            <label for="ui_show_playingcard">Playing card</label>
                            <button type="button" class="cw-field-help material-symbols-rounded" title="Playing card: Shows or hides the currently playing card on the Main screen." aria-label="Playing card setting help">help</button>
                          </div>
                          <select id="ui_show_playingcard" name="ui_show_playingcard">
                            <option value="true">Show</option>
                            <option value="false">Hide</option>
                          </select>
                        </div>

                        <div>
                          <div class="cw-field-label-row">
                            <label for="ui_show_recent_activity">Recent Scrobble list</label>
                            <button type="button" class="cw-field-help material-symbols-rounded" title="Recent Scrobble list: Shows or hides the Main screen text list of locally recorded scrobbled movies and episodes." aria-label="Recent Scrobble list setting help">help</button>
                          </div>
                          <select id="ui_show_recent_activity" name="ui_show_recent_activity">
                            <option value="true">Show</option>
                            <option value="false">Hide</option>
                          </select>
                        </div>

                        <div>
                          <div class="cw-field-label-row">
                            <label for="ui_recent_activity_display">Recent Scrobble display</label>
                            <button type="button" class="cw-field-help material-symbols-rounded" title="Recent Scrobble display: Choose a fixed number of rows, or show items from the last 24, 48, or 72 hours with a maximum of 5 rows." aria-label="Recent Scrobble display setting help">help</button>
                          </div>
                          <select id="ui_recent_activity_display" name="ui_recent_activity_display">
                            <option value="count:3">Last 3 items</option>
                            <option value="count:4">Last 4 items</option>
                            <option value="count:5">Last 5 items</option>
                            <option value="hours:24">Last 24 hours, max 5</option>
                            <option value="hours:48">Last 48 hours, max 5</option>
                            <option value="hours:72">Last 72 hours, max 5</option>
                          </select>
                        </div>

                        <div>
                          <div class="cw-field-label-row">
                            <label for="ui_recent_syncs_display">Recent syncs display</label>
                            <button type="button" class="cw-field-help material-symbols-rounded" title="Recent syncs display: Choose a fixed number of rows, or show runs from the last 24, 48, or 72 hours with a maximum of 5 rows." aria-label="Recent syncs display setting help">help</button>
                          </div>
                          <select id="ui_recent_syncs_display" name="ui_recent_syncs_display">
                            <option value="count:3">Last 3 items</option>
                            <option value="count:4">Last 4 items</option>
                            <option value="count:5">Last 5 items</option>
                            <option value="hours:24">Last 24 hours, max 5</option>
                            <option value="hours:48">Last 48 hours, max 5</option>
                            <option value="hours:72">Last 72 hours, max 5</option>
                          </select>
                        </div>

                        <div>
                          <div class="cw-field-label-row">
                            <label for="ui_show_quick_add_desktop">Desktop quick add</label>
                            <button type="button" class="cw-field-help material-symbols-rounded" title="Desktop quick add: Shows or hides the quick-add control on larger screens." aria-label="Desktop quick add setting help">help</button>
                          </div>
                          <select id="ui_show_quick_add_desktop" name="ui_show_quick_add_desktop">
                            <option value="true">Show</option>
                            <option value="false">Hide</option>
                          </select>
                        </div>

                        <div>
                          <div class="cw-field-label-row">
                            <label for="ui_show_quick_add_mobile">Mobile quick add</label>
                            <button type="button" class="cw-field-help material-symbols-rounded" title="Mobile quick add: Shows or hides the compact quick-add control on mobile layouts." aria-label="Mobile quick add setting help">help</button>
                          </div>
                          <select id="ui_show_quick_add_mobile" name="ui_show_quick_add_mobile">
                            <option value="true">Show</option>
                            <option value="false">Hide</option>
                          </select>
                        </div>
                      </div>
                    </div>

                    <div class="cw-settings-block cw-app-card cw-app-card-theme">
                      <div class="cw-app-card-head">
                        <span class="material-symbols-rounded cw-app-card-icon" aria-hidden="true">palette</span>
                        <div>
                          <div class="cw-settings-block-title">Theme</div>
                          <div class="sub">Customize the look, feel and browser protocol for CrossWatch.</div>
                        </div>
                      </div>
                      <div class="cw-settings-2col">
                        <div>
                          <div class="cw-field-label-row">
                            <label for="ui_theme">Theme</label>
                            <button type="button" class="cw-field-help material-symbols-rounded" title="Theme: Choose Flat dark, Flat light Experimental, or Original to use the classic CrossWatch styling." aria-label="Theme setting help">help</button>
                          </div>
                          <select id="ui_theme" name="ui_theme">
                            <option value="flat-dark">Flat dark</option>
                            <option value="flat-light">Flat light (Experimental)</option>
                            <option value="original">Original</option>
                          </select>
                        </div>
                        <div>
                          <div class="cw-field-label-row">
                            <label for="ui_protocol">UI protocol</label>
                            <button type="button" class="cw-field-help material-symbols-rounded" title="UI protocol: HTTP is simplest. HTTPS serves CrossWatch with a self-signed certificate for encrypted browser traffic." aria-label="UI protocol setting help">help</button>
                          </div>
                          <div class="cw-settings-inline-action">
                            <select id="ui_protocol" name="ui_protocol">
                              <option value="http">HTTP</option>
                              <option value="https">HTTPS (self-signed)</option>
                            </select>
                            <button type="button" class="btn primary" id="ui_tls_advanced" onclick="openTlsCertModal?.()">Advanced</button>
                          </div>
                          <div class="sub" style="margin-top:0.35rem">
                            HTTPS uses a self-signed certificate, so your browser will warn unless you trust it.
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>

                <!-- Panel: Security -->
                <div class="cw-settings-panel cw-settings-shell cw-app-panel" data-tab="security">
                  <div class="cw-settings-layout cw-app-security-layout">
                    <form class="cw-settings-block cw-app-card cw-password-form-scope" id="app_auth_fields" autocomplete="off" onsubmit="return false">
                      <div class="cw-app-card-head">
                        <span class="material-symbols-rounded cw-app-card-icon" aria-hidden="true">lock</span>
                        <div>
                          <div class="cw-settings-block-title">Authentication</div>
                          <div class="sub">Choose how CrossWatch is accessed and how long sessions stay valid.</div>
                        </div>
                      </div>
                      <div class="cw-settings-2col">
                        <div class="cw-auth-username-field">
                          <div class="cw-field-label-row">
                            <label for="app_auth_username">Username</label>
                            <button type="button" class="cw-field-help material-symbols-rounded" title="Username: The local CrossWatch username used on the login screen." aria-label="Username setting help">help</button>
                          </div>
                          <input id="app_auth_username" name="app_auth_username" type="text" autocomplete="username" placeholder="admin">
                        </div>
                        <div class="cw-auth-password-field">
                          <div class="cw-field-label-row">
                            <label for="app_auth_password">New password</label>
                            <button type="button" class="cw-field-help material-symbols-rounded" title="New password: Enter a new local CrossWatch password. Leave it blank to keep the current password." aria-label="New password setting help">help</button>
                          </div>
                          <input id="app_auth_password" name="app_auth_password" type="password" autocomplete="new-password" placeholder="(leave blank to keep)">
                          <div class="sub" style="margin-top:0.35rem">Leave blank to keep the current password.</div>
                        </div>
                        <div class="cw-auth-confirm-field">
                          <div class="cw-field-label-row">
                            <label for="app_auth_password2">Confirm password</label>
                            <button type="button" class="cw-field-help material-symbols-rounded" title="Confirm password: Repeat the new password exactly so CrossWatch can verify it before saving." aria-label="Confirm password setting help">help</button>
                          </div>
                          <input id="app_auth_password2" name="app_auth_password2" type="password" autocomplete="new-password" placeholder="(repeat)">
                          <div class="sub" style="margin-top:0.35rem">Repeat the new password exactly before saving.</div>
                        </div>
                        <div class="cw-auth-session-row">
                          <div id="app_auth_session_fields">
                            <div class="cw-field-label-row">
                              <label for="app_auth_remember_enabled">Session caching</label>
                              <button type="button" class="cw-field-help material-symbols-rounded" title="Session caching: Keeps you signed in across browser restarts. Browser session only signs out when the browser session ends." aria-label="Session caching setting help">help</button>
                            </div>
                            <select id="app_auth_remember_enabled" name="app_auth_remember_enabled">
                              <option value="true">Enabled</option>
                              <option value="false">Browser session only</option>
                            </select>
                            <div class="sub" style="margin-top:0.35rem">Browser session only means sign-in is required again after closing the browser.</div>
                          </div>
                          <div id="app_auth_remember_days_wrap">
                            <div class="cw-field-label-row">
                              <label for="app_auth_remember_days">Session timeout</label>
                              <button type="button" class="cw-field-help material-symbols-rounded" title="Session timeout: Number of days a remembered login remains valid when session caching is enabled." aria-label="Session timeout setting help">help</button>
                            </div>
                            <input id="app_auth_remember_days" name="app_auth_remember_days" type="text" inputmode="numeric" pattern="[0-9]{1,3}" maxlength="3" autocomplete="off" placeholder="30">
                            <div id="app_auth_remember_days_error" class="cw-field-inline-error hidden" role="alert"></div>
                            <div class="sub" style="margin-top:0.35rem">Used only when session caching is enabled. Maximum 365 days.</div>
                          </div>
                        </div>
                        <div>
                          <div class="cw-field-label-row">
                            <strong>Linked Plex account</strong>
                            <button type="button" class="cw-field-help material-symbols-rounded" title="Linked Plex account: Adds optional Sign in with Plex on the login screen while keeping the local password as fallback." aria-label="Linked Plex account help">help</button>
                          </div>
                          <div class="sub" id="app_auth_plex_state">Not linked</div>
                          <div class="cw-settings-inline-action" style="margin-top:0.75rem">
                            <button class="btn primary" type="button" id="btn-app-auth-plex-link" onclick="cwAppAuthPlexLink?.()">Link Plex account</button>
                            <button class="btn" type="button" id="btn-app-auth-plex-unlink" onclick="cwAppAuthPlexUnlink?.()">Unlink</button>
                          </div>
                        </div>
                      </div>
                    </form>

                    <div class="cw-settings-block cw-app-card">
                      <div class="cw-app-card-head">
                        <span class="material-symbols-rounded cw-app-card-icon" aria-hidden="true">admin_panel_settings</span>
                        <div>
                          <div class="cw-settings-block-title">Access and Permissions</div>
                          <div class="sub">Review active sessions and reverse proxy trust settings.</div>
                        </div>
                      </div>
                      <div class="cw-settings-2col">
                        <div class="cw-settings-statusrow">
                          <div class="cw-settings-status">
                            <div class="cw-field-label-row">
                              <strong>Current session</strong>
                              <button type="button" class="cw-field-help material-symbols-rounded" title="Current session: Shows the browser session you are using now and lets you log it out." aria-label="Current session help">help</button>
                            </div>
                            <div class="sub" id="app_auth_state">&mdash;</div>
                          </div>
                          <button class="btn" id="btn-auth-logout" onclick="cwAppLogout?.()">Log out</button>
                        </div>
                        <div class="cw-settings-statusrow">
                          <div class="cw-settings-status">
                            <div class="cw-field-label-row">
                              <strong>Other browser sessions</strong>
                              <button type="button" class="cw-field-help material-symbols-rounded" title="Other browser sessions: Shows remembered logins from other browsers or devices and lets you revoke them." aria-label="Other browser sessions help">help</button>
                            </div>
                            <div class="sub" id="app_auth_other_sessions_state">Logged in from: 0 browser sessions</div>
                            <div class="sub" id="app_auth_other_sessions_detail"></div>
                          </div>
                          <button class="btn" id="btn-auth-logout-others" onclick="cwAppLogoutOthers?.()">Log out other sessions</button>
                        </div>
                        <div class="cw-auth-proxy-field">
                          <div class="cw-field-label-row">
                            <label for="trusted_proxies">Trusted reverse proxies (optional)</label>
                            <button type="button" class="cw-field-help material-symbols-rounded" title="Trusted reverse proxies: Enter proxy IPs or CIDR ranges so CrossWatch can read the real client IP for login rate limiting." aria-label="Trusted reverse proxies setting help">help</button>
                          </div>
                          <input id="trusted_proxies" name="trusted_proxies" type="text" placeholder="127.0.0.1;192.168.2.1;192.168.2.0/16">
                          <div class="sub" style="margin-top:0.35rem">
                            Only needed when behind a reverse proxy and you want accurate IP-based login rate limiting.
                            Enter proxy IPs or CIDR ranges separated by <code>;</code>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>

                <!-- Panel: Local Tracker -->
                <div class="cw-settings-panel cw-settings-shell cw-app-panel" data-tab="tracker">
                  <div class="cw-settings-layout cw-app-tracker-layout">
                    <div class="cw-settings-block cw-app-card">
                      <div class="cw-app-card-head">
                        <span class="material-symbols-rounded cw-app-card-icon" aria-hidden="true">schedule</span>
                        <div>
                          <div class="cw-settings-block-title">Retention and Capture</div>
                          <div class="sub">Control how snapshots are retained and created under <code class="cw-code-badge">/config/.cw_provider</code>.</div>
                        </div>
                      </div>
                      <div class="cw-settings-2col">
                        <div>
                          <div class="cw-field-label-row">
                            <label for="cw_enabled">Enabled</label>
                            <button type="button" class="cw-field-help material-symbols-rounded" title="Enabled: Turns the local tracker snapshot system on or off." aria-label="Local Tracker enabled setting help">help</button>
                          </div>
                          <select id="cw_enabled" name="cw_enabled">
                            <option value="true">Enabled</option>
                            <option value="false">Disabled</option>
                          </select>
                        </div>

                        <div>
                          <div class="cw-field-label-row">
                            <label for="cw_retention_days">Retention (days)</label>
                            <button type="button" class="cw-field-help material-symbols-rounded" title="Retention days: How long snapshot files are kept before cleanup. Set 0 to keep snapshots forever." aria-label="Retention days setting help">help</button>
                          </div>
                          <input id="cw_retention_days" name="cw_retention_days" type="number" min="0" step="1" placeholder="30">
                          <div class="sub" style="margin-top:0.35rem">0 = keep snapshots forever.</div>
                        </div>

                        <div>
                          <div class="cw-field-label-row">
                            <label for="cw_auto_snapshot">Auto snapshot</label>
                            <button type="button" class="cw-field-help material-symbols-rounded" title="Auto snapshot: Saves a tracker snapshot before CrossWatch writes provider changes, giving you a local restore point." aria-label="Auto snapshot setting help">help</button>
                          </div>
                          <select id="cw_auto_snapshot" name="cw_auto_snapshot">
                            <option value="true">On (before writes)</option>
                            <option value="false">Off</option>
                          </select>
                        </div>

                        <div>
                          <div class="cw-field-label-row">
                            <label for="cw_max_snapshots">Max snapshots per feature</label>
                            <button type="button" class="cw-field-help material-symbols-rounded" title="Max snapshots per feature: Limits how many Watchlist, Ratings, and History snapshots are kept. Set 0 for unlimited." aria-label="Max snapshots per feature setting help">help</button>
                          </div>
                          <input id="cw_max_snapshots" name="cw_max_snapshots" type="number" min="0" step="1" placeholder="64">
                          <div class="sub" style="margin-top:0.35rem">0 = unlimited.</div>
                        </div>
                      </div>
                    </div>

                    <div class="cw-settings-block cw-app-card">
                      <div class="cw-app-card-head">
                        <span class="material-symbols-rounded cw-app-card-icon" aria-hidden="true">restore_page</span>
                        <div>
                          <div class="cw-settings-block-title">Restore Snapshots</div>
                          <div class="sub">Choose which snapshots to restore for each feature.</div>
                        </div>
                      </div>
                      <div class="cw-settings-2col" id="cw_restore_fields">
                        <div>
                          <div class="cw-field-label-row">
                            <label for="cw_restore_watchlist">Watchlist snapshot</label>
                            <button type="button" class="cw-field-help material-symbols-rounded" title="Watchlist snapshot: Select which local watchlist snapshot should be used for restore or tracker-backed reads." aria-label="Watchlist snapshot setting help">help</button>
                          </div>
                          <select id="cw_restore_watchlist" name="cw_restore_watchlist"></select>
                        </div>

                        <div>
                          <div class="cw-field-label-row">
                            <label for="cw_restore_history">History snapshot</label>
                            <button type="button" class="cw-field-help material-symbols-rounded" title="History snapshot: Select which local history snapshot should be used for restore or tracker-backed reads." aria-label="History snapshot setting help">help</button>
                          </div>
                          <select id="cw_restore_history" name="cw_restore_history"></select>
                        </div>

                        <div>
                          <div class="cw-field-label-row">
                            <label for="cw_restore_ratings">Ratings snapshot</label>
                            <button type="button" class="cw-field-help material-symbols-rounded" title="Ratings snapshot: Select which local ratings snapshot should be used for restore or tracker-backed reads." aria-label="Ratings snapshot setting help">help</button>
                          </div>
                          <select id="cw_restore_ratings" name="cw_restore_ratings"></select>
                        </div>
                      </div>
                      <div class="sub" style="margin-top:0.75rem">
                        Select <code>latest</code> to use the most recent snapshot, or choose a specific file name for each feature.
                      </div>
                    </div>
                  </div>
                </div>

              </div>
            </div>
          </div>
        </section>

        <section class="cw-settings-pane" data-pane="maintenance">
          <div class="cw-settings-pane-head cw-maint-hero">
            <div>
              <div class="cw-settings-pane-kicker">Maintenance</div>
              <h3>Maintenance zone, Debug and Restart</h3>
              <p>Use these actions to reset CrossWatch states. They are safe but cannot be undone.</p>
            </div>
            <span class="material-symbols-rounded cw-maint-hero-gear" aria-hidden="true">settings</span>
          </div>
          <div class="section open cw-settings-section cw-maint-section" id="sec-troubleshoot" data-accordion="off">
            <div class="head"><span class="chev"></span><strong>Maintenance</strong></div>
            <div class="body">
              <div class="cw-maint-layout">
                <div class="cw-maint-debug-card">
                  <div class="cw-maint-card-head">
                    <span class="material-symbols-rounded cw-maint-card-icon" aria-hidden="true">bug_report</span>
                    <div class="cw-maint-card-copy">
                      <strong>Debug logging</strong>
                      <small>Control how much detail CrossWatch writes to the live logs and diagnostics.</small>
                    </div>
                  </div>
                  <div class="cw-maint-debug-field">
                    <label for="debug">Level</label>
                    <select id="debug" name="debug">
                      <option value="off">off</option>
                      <option value="on">on</option>
                      <option value="mods">on - including MOD debug - best option for debug</option>
                      <option value="full">on - full (requires restart) - use with caution</option>
                    </select>
                  </div>
                </div>

                <div class="cw-maint-actions" aria-label="Maintenance actions">
                  <button class="btn cw-maint-action backup" type="button" onclick="openBackupRestore()">
                    <span class="material-symbols-rounded cw-maint-action-icon" aria-hidden="true">backup</span>
                    <span class="cw-maint-action-copy">
                      <strong>Backup & Restore</strong>
                      <small>Create archives, validate backups, restore state, or manage schedules.</small>
                    </span>
                    <span class="cw-maint-action-cta" aria-hidden="true"><span>Open</span><span class="material-symbols-rounded">arrow_forward</span></span>
                  </button>
                  <button class="btn cw-maint-action tools" type="button" onclick="openMaintenanceModal()">
                    <span class="material-symbols-rounded cw-maint-action-icon" aria-hidden="true">tune</span>
                    <span class="cw-maint-action-copy">
                      <strong>Maintenance Tools</strong>
                      <small>Clean local state, reset counters, and run recovery actions.</small>
                    </span>
                    <span class="cw-maint-action-cta" aria-hidden="true"><span>Open</span><span class="material-symbols-rounded">arrow_forward</span></span>
                  </button>
                  <button class="btn cw-maint-action provider-cleanup" type="button" onclick="openProviderCleanupModal()">
                    <span class="material-symbols-rounded cw-maint-action-icon" aria-hidden="true">cleaning_services</span>
                    <span class="cw-maint-action-copy">
                      <strong>Provider Cleanup</strong>
                      <small>Clear provider watchlist, ratings, history, or progress data by profile.</small>
                    </span>
                    <span class="cw-maint-action-cta" aria-hidden="true"><span>Open</span><span class="material-symbols-rounded">arrow_forward</span></span>
                  </button>
                  <button class="btn cw-maint-action restart" type="button" onclick="restartCrossWatch()">
                    <span class="material-symbols-rounded cw-maint-action-icon" aria-hidden="true">restart_alt</span>
                    <span class="cw-maint-action-copy">
                      <strong>Restart CrossWatch</strong>
                      <small>Restart CW container.</small>
                    </span>
                    <span class="cw-maint-action-cta" aria-hidden="true"><span>Restart</span><span class="material-symbols-rounded">arrow_forward</span></span>
                  </button>
                </div>

                <div id="tb_msg" class="msg ok hidden">Done </div>
              </div>
            </div>
          </div>
        </section>
      </div>
    </div>
  </section>


</main>

<div id="cw-help-overlay" class="hidden" aria-hidden="true">
  <div id="cw-help-card">
    <button id="cw-help-close" class="btn" type="button" onclick="window.cwCloseHelp()">Close</button>
    <iframe id="cw-help-frame" title="CrossWatch Help" loading="lazy" referrerpolicy="no-referrer"></iframe>
  </div>
</div>


<script>(()=>{const $=id=>document.getElementById(id),closeMenu=id=>{const m=$(id==="settings"?"cw-settings-menu":"cw-about-menu"),b=$(id==="settings"?"tab-settings":"tab-about");m?.classList.add("hidden");b?.setAttribute("aria-expanded","false")},closeAll=()=>{closeMenu("settings");closeMenu("about")},toggleMenu=(id,e)=>{e?.preventDefault?.();e?.stopPropagation?.();const menuId=id==="settings"?"cw-settings-menu":"cw-about-menu",btnId=id==="settings"?"tab-settings":"tab-about",m=$(menuId),b=$(btnId);if(!m||!b)return;const open=m.classList.contains("hidden");closeAll();m.classList.toggle("hidden",!open);b.setAttribute("aria-expanded",String(open))},setHelp=open=>{const o=$("cw-help-overlay");if(!o)return;if(open){const f=$("cw-help-frame");if(f&&!f.src)f.src="https://wiki.crosswatch.app";o.classList.remove("hidden");o.setAttribute("aria-hidden","false")}else{o.classList.add("hidden");o.setAttribute("aria-hidden","true")}},openSettings=pane=>{window.showTab?.("settings");setTimeout(()=>window.cwSettingsSelect?.(pane),0)},logout=()=>{closeMenu("settings");if(typeof window.cwAppLogout==="function")return window.cwAppLogout();window.location.href="/logout"};window.CW_CURRENT_VERSION="__CW_CURRENT_VERSION__";window.APP_VERSION="__CW_VERSION__";window["__CW_"+"VERSION__"]=window.APP_VERSION;window.cwOpenHelp=()=>setHelp(true);window.cwCloseHelp=()=>setHelp(false);window.openHelp=()=>window.location?.protocol==="https:"?window.cwOpenHelp?.():window.open("https://wiki.crosswatch.app","_blank","noopener,noreferrer");window.cwCloseAboutMenu=()=>closeMenu("about");window.cwCloseSettingsMenu=()=>closeMenu("settings");window.cwToggleAboutMenu=e=>toggleMenu("about",e);window.cwToggleSettingsMenu=e=>toggleMenu("settings",e);window.cwAboutMenuSelect=w=>(closeMenu("about"),w==="about"?window.openAbout?.():w==="help"?window.openHelp?.():undefined);window.cwSettingsMenuLogout=logout;window.cwSettingsMenuSelect=w=>{closeMenu("settings");if(w==="overview")return openSettings("overview");if(w==="providers")return openSettings("providers");if(w==="scheduling")return openSettings("scheduling");if(w==="pairs"||w==="sync")return openSettings("sync");if(w==="scrobbler")return openSettings("scrobbler");if(w==="app")return openSettings("app");if(w==="maintenance")return openSettings("maintenance")};document.addEventListener("click",e=>{const o=$("cw-help-overlay"),c=$("cw-help-card"),aboutHost=$("tab-about-menu"),settingsHost=$("tab-settings-menu");if(o&&!o.classList.contains("hidden")&&c&&!c.contains(e.target))window.cwCloseHelp?.();if(aboutHost&&!aboutHost.contains(e.target))closeMenu("about");if(settingsHost&&!settingsHost.contains(e.target))closeMenu("settings")},true);document.addEventListener("keydown",e=>{if(e.key!=="Escape")return;window.cwCloseHelp?.();closeAll()},true)})();</script>

__CW_ASSET_BLOCK__

<script>document.addEventListener('DOMContentLoaded',()=>{try{if(typeof openSummaryStream==='function')openSummaryStream()}catch(e){}});</script>

<div id="save-frost" class="hidden" aria-hidden="true"></div>
<div id="save-fab" class="hidden" role="toolbar" aria-label="Sticky save"><button id="save-fab-btn" class="btn" onclick="saveSettings(this)"><span class="btn-label">SAVE</span></button></div>

<script>(()=>{const list=p=>[...p.querySelectorAll(':scope>.section')].filter(s=>s.dataset.accordion!=='off'),set=(s,on)=>{s.classList.toggle('open',!!on);s.querySelector('.head')?.setAttribute('aria-expanded',String(!!on));const c=s.querySelector('.chev');if(c)c.textContent=''},siblings=s=>s?.parentElement?list(s.parentElement):[];window.toggleSection=id=>{const s=document.getElementById(id);if(!s||s.dataset.accordion==='off')return;const on=!s.classList.contains('open');siblings(s).forEach(x=>set(x,x===s&&on))};window.openSection=id=>{const s=document.getElementById(id);if(!s||s.dataset.accordion==='off')return;siblings(s).forEach(x=>set(x,x===s))};document.addEventListener('click',e=>{const h=e.target?.closest?.('[data-toggle-section]');if(!h)return;e.preventDefault();window.toggleSection?.(h.dataset.toggleSection)},true);document.addEventListener('DOMContentLoaded',()=>[...new Set([...document.querySelectorAll('.section')].map(s=>s.parentElement).filter(Boolean))].forEach(p=>{const open=list(p).find(s=>s.classList.contains('open'));list(p).forEach(s=>set(s,s===open))}),{once:true})})();</script>


<script>(()=>{const panes='#page-settings .cw-settings-pane',nav='#cw-settings-nav .cw-settings-nav-btn',norm=v=>String(v||'overview').trim().toLowerCase(),apply=p=>{const name=norm(p);let found=false;document.querySelectorAll(panes).forEach(n=>{const on=norm(n.dataset.pane)===name;n.classList.toggle('active',on);found=found||on});if(!found&&name!=='overview')return apply('overview');document.querySelectorAll(nav).forEach(b=>{const on=norm(b.dataset.pane)===name;b.classList.toggle('active',on);b.setAttribute('aria-current',on?'page':'false')});window.__cwSettingsPane=name;document.dispatchEvent(new CustomEvent('cw-settings-pane-changed',{detail:{pane:name}}))};window.cwSettingsSelect=p=>{apply(p);const main=document.getElementById('cw-settings-left');if(main&&window.innerWidth<1200)main.scrollIntoView({behavior:'smooth',block:'start'})};document.addEventListener('DOMContentLoaded',()=>apply(window.__cwSettingsPane||'overview'),{once:true});document.addEventListener('tab-changed',e=>((e?.detail?.id||e?.detail?.tab)==='settings')&&setTimeout(()=>apply(window.__cwSettingsPane||'overview'),0))})();</script>
<script>(()=>{const sync=e=>{const pane=String(e?.detail?.pane||window.__cwSettingsPane||'overview').toLowerCase();document.querySelectorAll('#cw-settings-menu .cw-menu-item[data-settings-pane]').forEach(item=>{const active=item.dataset.settingsPane===pane;item.classList.toggle('active',active);if(active)item.setAttribute('aria-current','page');else item.removeAttribute('aria-current')})};document.addEventListener('cw-settings-pane-changed',sync);document.addEventListener('DOMContentLoaded',sync,{once:true})})();</script>

<script>(()=>{const ready=()=>{const input=document.querySelector('#cw-settings-nav .cw-settings-search input'),items=[...document.querySelectorAll('#cw-settings-nav .cw-settings-nav-btn')];if(!input||!items.length)return;const apply=()=>{const q=input.value.trim().toLowerCase();items.forEach(btn=>{btn.hidden=!!q&&!btn.textContent.toLowerCase().includes(q)})};input.addEventListener('input',apply);document.addEventListener('keydown',e=>{if((e.ctrlKey||e.metaKey)&&String(e.key).toLowerCase()==='k'){e.preventDefault();window.showTab?.('settings');setTimeout(()=>input.focus(),0)}})};document.readyState==='loading'?document.addEventListener('DOMContentLoaded',ready,{once:true}):ready()})();</script>

<script>(()=>{const scrollTo=id=>document.getElementById(id)?.scrollIntoView({behavior:'smooth',block:'start'});window.cwSyncJump=()=>{window.cwSettingsSelect?.('sync');setTimeout(()=>scrollTo('sec-sync'),0)};window.cwProvidersJump=sectionId=>{if(sectionId==='sec-sync')return window.cwSyncJump?.();window.cwSettingsSelect?.('providers');setTimeout(()=>{window.openSection?.(sectionId);scrollTo(sectionId)},0)};window.cwOverviewJump=(sectionId,authGroupId='')=>{if(sectionId==='sec-sync')return window.cwSyncJump?.();return(window.cwSettingsSelect?.('providers'),setTimeout(async()=>{if(sectionId==='sec-auth'){window.openSection?.('sec-auth');try{await window.mountAuthProviders?.()}catch{}if(authGroupId){window.openSection?.(authGroupId);scrollTo(authGroupId)}else scrollTo('sec-auth');return}window.openSection?.(sectionId);scrollTo(sectionId)},0))}})();</script>
<script>
(() => {
  const $ = (id) => document.getElementById(id);
  const setText = (id, text) => {
    const el = $(id);
    if (el) el.textContent = text;
  };
  const setWidth = (id, value) => {
    const el = $(id);
    if (el) el.style.width = value;
  };
  const setDone = (selector, done) => document.querySelector(selector)?.classList.toggle("is-done", !!done);
  const plural = (n, singular, pluralForm) => `${n} ${n === 1 ? singular : (pluralForm || `${singular}s`)}`;
  const state = { primary: "auth" };

  const open = (key) => {
    if (key === "auth") return window.cwOverviewJump?.("sec-auth");
    if (key === "meta") {
      if (typeof window.openMetadataProviderForm === "function") {
        window.cwSettingsSelect?.("providers");
        setTimeout(() => window.openMetadataProviderForm?.("TMDB_METADATA")?.catch?.(() => window.openAddMetadata?.()), 0);
        return;
      }
      window.cwSettingsSelect?.("providers");
      return window.openAddMetadata?.();
    }
    if (key === "sync") return window.cwSyncJump?.();
    if (key === "scheduling" || key === "automation") return window.cwSettingsSelect?.("scheduling");
    if (key === "scrobbler") return window.cwSettingsSelect?.("scrobbler");
    if (key === "app") return window.cwSettingsSelect?.("app");
    if (key === "maintenance") return window.cwSettingsSelect?.("maintenance");
  };

  window.cwSettingsOverviewGo = (key) => {
    const target = key === "primary" ? state.primary : key;
    if (target) open(target);
  };

  window.cwSettingsStepKey = (event, key) => {
    if (!event) return;
    if (event.key === "Enter" || event.key === " ") {
      event.preventDefault();
      window.cwSettingsOverviewGo?.(key);
    }
  };

  const setStep = (step, opts = {}) => {
    const card = document.querySelector(`.cw-settings-setup-step[data-step="${step}"]`);
    if (!card) return;
    card.classList.toggle("is-done", !!opts.done);
    card.classList.toggle("is-active", !!opts.active);
    card.classList.toggle("is-optional", !!opts.optional);
    const statusKey = String(opts.status || "").trim().toLowerCase();
    card.classList.toggle("is-inactive", statusKey === "inactive");
    card.classList.toggle("is-warning", ["missing", "needs setup", "disabled", "inactive"].includes(statusKey));

    const statusEl = card.querySelector(".cw-settings-step-state");
    const detailEl = card.querySelector(".cw-settings-step-detail");
    const primaryLinkEl = card.querySelector(`#cw-settings-step-${step}-link`);
    const secondaryLinkEl = card.querySelector(`#cw-settings-step-${step}-alt-link`);

    if (statusEl) statusEl.textContent = opts.status || "";
    if (detailEl) detailEl.textContent = opts.detail || "";
    if (primaryLinkEl) primaryLinkEl.textContent = opts.link || "";
    if (secondaryLinkEl) secondaryLinkEl.textContent = opts.altLink || "";
  };

  const render = (data = {}) => {
    const authCount = Number(data?.auth?.configured || 0);
    const pairTotal = Number(data?.pairs?.total ?? data?.pairs?.count ?? 0);
    const pairActive = Number(data?.pairs?.enabled ?? data?.pairs?.active ?? data?.pairs?.count ?? 0);
    const pairDisabled = Number(data?.pairs?.disabled ?? Math.max(0, pairTotal - pairActive));
    const metaConfigured = Number(data?.meta?.configured || 0);
    const metaDetected = Number(data?.meta?.detected || 0);
    const scheduleOn = !!data?.sched?.enabled;
    const scrobOn = !!data?.scrob?.enabled;
    const automationOn = scheduleOn || scrobOn;

    const steps = {
      auth: authCount > 0,
      meta: metaConfigured > 0,
      sync: pairActive > 0,
      scheduling: scheduleOn || scrobOn
    };
    const order = ["auth", "meta", "sync", "scheduling"];
    const next = order.find((step) => !steps[step]);
    const doneCount = order.filter((step) => steps[step]).length;
    const overviewGrid = document.getElementById("cw-settings-overview-grid");

    state.primary = doneCount === 4 ? "scheduling" : next;
    overviewGrid?.classList.toggle("cw-settings-overview-complete", doneCount === 4);
    const percent = Math.round((doneCount / 4) * 100);
    const ring = $("cw-settings-progress-ring");
    if (ring) ring.style.setProperty("--cw-setup-progress", `${percent}%`);
    setText("cw-settings-progress-count", `${doneCount}/4`);
    setText("cw-settings-progress-percent", `${percent}%`);
    setText("cw-settings-progress-text", `${doneCount} of 4 steps ready`);
    setWidth("cw-settings-progress-bar", `${Math.max(6, Math.min(100, percent))}%`);
    setText("cw-settings-scrobbler-cta", scrobOn ? "Scrobbler settings" : "Open scrobbler");
    order.forEach((step) => setDone(`[data-step-node="${step}"]`, steps[step]));

    if (!steps.auth) {
      setText("cw-settings-hero-title", "Connect a service");
      setText("cw-settings-hero-copy", "Start by signing into at least one media server or tracker.");
      setText("cw-settings-primary-cta", "Open connections");
    } else if (!steps.meta) {
      setText("cw-settings-hero-title", "Add metadata");
      setText("cw-settings-hero-copy", "TMDb is enough to get started and makes matching work better.");
      setText("cw-settings-primary-cta", "Open metadata");
    } else if (!steps.sync) {
      setText("cw-settings-hero-title", "Set up sync pairs or scrobbler");
      setText("cw-settings-hero-copy", "Both are optional, but most people use at least one of them.");
      setText("cw-settings-primary-cta", "Open sync pairs");
    } else if (!steps.scheduling) {
      setText("cw-settings-hero-title", "Add scheduling or scrobbler");
      setText("cw-settings-hero-copy", "Optional. Turn on scheduling, scrobbler, or both.");
      setText("cw-settings-primary-cta", "Open scheduling");
    } else {
      setText("cw-settings-hero-title", "You're set");
      setText("cw-settings-hero-copy", "The basic setup is done. Anything else is extra.");
      setText("cw-settings-primary-cta", "Open scheduling");
    }

    setText("cw-settings-stat-auth", String(authCount));
    setText("cw-settings-stat-auth-copy", authCount ? `${plural(authCount, "provider profile")} connected` : "No providers connected yet");
    setText("cw-settings-stat-pairs", String(pairActive));
    setText("cw-settings-stat-pairs-copy", pairTotal ? (pairDisabled ? `${pairActive} active, ${pairDisabled} disabled` : `${plural(pairActive, "pair")} active`) : "No sync pairs yet");
    setText("cw-settings-stat-automation", automationOn ? "Live" : "Off");
    setText("cw-settings-stat-automation-copy", scheduleOn && scrobOn ? "Scheduling and scrobbler are on" : scheduleOn ? "Scheduling is on" : scrobOn ? "Scrobbler is on" : "Scheduling and scrobbler are off");
    setStep("auth", {
      status: steps.auth ? "Connected" : "Needs setup",
      copy: steps.auth ? `${plural(authCount, "provider profile")} connected` : "Connect provider profiles first",
      detail: steps.auth ? `${plural(authCount, "provider")} connected` : "No providers connected",
      link: "Manage",
      done: steps.auth,
      active: next === "auth"
    });

    setStep("meta", {
      status: steps.meta ? (metaDetected > metaConfigured ? `Partial ${metaConfigured}/${Math.max(metaDetected, metaConfigured)}` : "Ready") : "Missing",
      copy: steps.meta ? (metaDetected > metaConfigured ? `${metaConfigured} of ${Math.max(metaDetected, metaConfigured)} metadata providers configured` : "TMDb configured and ready") : "Configure TMDb for matching and enrichment",
      detail: steps.meta ? (metaDetected > metaConfigured ? `${metaConfigured} of ${Math.max(metaDetected, metaConfigured)} ready` : "TMDb configured") : "Metadata provider needed",
      link: "Manage",
      done: steps.meta,
      active: next === "meta"
    });

    const syncStatus = pairActive > 0 ? "Active" : pairTotal > 0 ? "Disabled" : "Optional";
    const syncCopy = pairTotal ? (pairDisabled ? `${pairActive} active, ${pairDisabled} disabled` : `${plural(pairActive, "sync pair")} active`) : "No sync pairs active";
    setStep("sync", {
      status: syncStatus,
      copy: syncCopy,
      detail: pairTotal ? (pairDisabled ? `${pairActive} active, ${pairDisabled} disabled` : `${plural(pairActive, "active pair")}`) : "No sync pairs configured",
      link: "Manage",
      done: steps.sync,
      active: next === "sync",
      optional: !steps.sync
    });

    setStep("scheduling", {
      status: scheduleOn && scrobOn ? "Both on" : scheduleOn ? "Scheduling on" : scrobOn ? "Scrobbler on" : "Optional",
      copy: scheduleOn && scrobOn ? "Scheduling and scrobbler enabled" : scheduleOn ? "Scheduling enabled" : scrobOn ? "Scrobbler enabled" : "Scheduling and scrobbler optional",
      detail: scheduleOn && scrobOn ? "2 of 2 enabled" : scheduleOn || scrobOn ? "1 of 2 enabled" : "No automation configured",
      link: "Manage",
      done: steps.scheduling,
      active: next === "scheduling",
      optional: !steps.scheduling
    });
  };

  document.addEventListener("cw-settings-overview-data", (e) => render(e?.detail?.data || {}));
  document.addEventListener("DOMContentLoaded", () => render({}), { once: true });
})();
</script>
<script>(()=>{window.cwScrobblerJump=sectionId=>{window.cwSettingsSelect?.('scrobbler');let tries=0;const jump=()=>{const el=document.getElementById(sectionId);if(el){el.scrollIntoView({behavior:'smooth',block:'start'});return}if(++tries<40)setTimeout(jump,50)};setTimeout(jump,0)};window.cwUiSettingsJump=tab=>(window.cwSettingsSelect?.('app'),setTimeout(()=>{const t=String(tab||'').trim().toLowerCase();window.cwUiSettingsSelect?.(t)},0))})();</script>

<script>(()=>{const origFetch=window.fetch;if(typeof origFetch!=='function'||origFetch.__cwAuthPendingWrapped)return;const pending=()=>window.cwIsAuthSetupPending?.()===true,allowPath=p=>p.startsWith('/api/app-auth/')||p==='/api/config/meta'||p.startsWith('/api/config/meta?')||p.startsWith('/assets/')||p==='/favicon.svg';const emptyJson=(body='{}')=>new Response(body,{status:200,headers:{'Content-Type':'application/json','Cache-Control':'no-store'}});window.fetch=Object.assign(async function(resource,init){try{if(!pending())return await origFetch(resource,init);const url=typeof resource==='string'?resource:String(resource?.url||'');const u=new URL(url,location.origin);if(u.origin!==location.origin||!u.pathname.startsWith('/api/')||allowPath(u.pathname)||allowPath(u.pathname+u.search))return await origFetch(resource,init);const method=String(init?.method||resource?.method||'GET').toUpperCase();if(method!=='GET'&&method!=='HEAD')return await origFetch(resource,init);if(u.pathname.startsWith('/api/config'))return emptyJson('{}');if(u.pathname.startsWith('/api/status'))return emptyJson('{"providers":{}}');if(u.pathname.startsWith('/api/pairs'))return emptyJson('[]');if(u.pathname.startsWith('/api/scheduling'))return emptyJson('{}');if(u.pathname.startsWith('/api/insights'))return emptyJson('{}');if(u.pathname.startsWith('/api/watch/'))return emptyJson('{}');if(u.pathname.startsWith('/api/webhooks/'))return emptyJson('{}');return emptyJson('{}')}catch{return await origFetch(resource,init)}},{__cwAuthPendingWrapped:true})})();</script>

<script>(()=>{const $=id=>document.getElementById(id),fab=$('save-fab'),frost=$('save-frost'),page=$('page-settings'),tab=$('tab-settings'),noSave=new Set(['overview','providers','sync']),pane=()=>String(window.__cwSettingsPane||'overview').toLowerCase(),visible=()=>{if(!page||noSave.has(pane()))return false;const cs=getComputedStyle(page);return!page.classList.contains('hidden')&&cs.display!=='none'&&cs.visibility!=='hidden'},update=()=>{const on=visible();fab?.classList.toggle('hidden',!on);frost?.classList.toggle('hidden',!on)},watch=(el,attrs)=>el&&new MutationObserver(update).observe(el,{attributes:true,attributeFilter:attrs});document.addEventListener('DOMContentLoaded',()=>{watch(page,['class','style']);watch(tab,['class']);update()},{once:true});document.addEventListener('tab-changed',update);document.addEventListener('cw-settings-pane-changed',update);window.addEventListener('hashchange',update);document.querySelector('.tabs')?.addEventListener('click',update,true)})();</script>

<script>(()=>{const install=()=>{const orig=window.saveSettings;if(typeof orig!=='function'||orig._wrapped)return;window.saveSettings=Object.assign(async function(btnOrEvent){const btn=btnOrEvent instanceof HTMLElement?btnOrEvent:document.getElementById('save-fab-btn');if(btn&&!btn.dataset.defaultHtml)btn.dataset.defaultHtml=btn.innerHTML;if(btn)btn.disabled=true;try{const ret=orig.apply(this,arguments);await(ret&&typeof ret.then==='function'?ret:Promise.resolve());window.invalidateConfigCache?.();window.manualRefreshStatus?.();if(btn){btn.innerHTML='Settings saved';setTimeout(()=>{btn.innerHTML=btn.dataset.defaultHtml||'<span class="btn-label">SAVE</span>';btn.disabled=false},1600)}return ret}catch(e){if(btn){btn.innerHTML='Save failed';setTimeout(()=>{btn.innerHTML=btn.dataset.defaultHtml||'<span class="btn-label">SAVE</span>';btn.disabled=false},2000)}throw e}},{_wrapped:true})};document.readyState==='complete'?install():window.addEventListener('load',install,{once:true})})();</script>
</body></html>

"""

def get_index_html() -> str:
    html = _get_index_html_static().replace("__CW_ASSET_BLOCK__", _asset_block())
    return (
        html
        .replace("__CW_CURRENT_VERSION__", CURRENT_VERSION)
        .replace("__CW_VERSION__", _asset_version_token())
    )