{{define "base.html"}}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover, interactive-widget=resizes-content">
    <title>{{block "title" .}}Chat Switchboard{{end}}</title>
    <link rel="icon" type="image/svg+xml" href="{{.BasePath}}/favicon.svg?v={{.Version}}">
    <link rel="icon" type="image/x-icon" href="{{.BasePath}}/favicon.ico?v={{.Version}}">
    {{/* Decomposed from monolithic styles.css (v0.22.9) */}}
    <link rel="stylesheet" href="{{.BasePath}}/css/variables.css?v={{.Version}}">
    <link rel="stylesheet" href="{{.BasePath}}/css/layout.css?v={{.Version}}">
    <link rel="stylesheet" href="{{.BasePath}}/css/primitives.css?v={{.Version}}">
    <link rel="stylesheet" href="{{.BasePath}}/css/modals.css?v={{.Version}}">
    {{/* chat.css removed in v0.37.10 — replaced by sw-chat-surface.css + sw-chat-pane.css */}}
    {{/* panels.css, pane-container.css, chat-pane.css removed in v0.37.10 */}}
    <link rel="stylesheet" href="{{.BasePath}}/css/surfaces.css?v={{.Version}}">
    {{/* splash.css removed in v0.37.12 — login is Preact with sw-login.css */}}
    <link rel="stylesheet" href="{{.BasePath}}/css/sw-primitives.css?v={{.Version}}">
    <link rel="stylesheet" href="{{.BasePath}}/css/sw-chat-pane.css?v={{.Version}}">
    <link rel="stylesheet" href="{{.BasePath}}/css/sw-notes-pane.css?v={{.Version}}">
    <link rel="stylesheet" href="{{.BasePath}}/css/user-menu.css?v={{.Version}}">
    <link rel="stylesheet" href="{{.BasePath}}/css/tool-grants.css?v={{.Version}}">
    <link rel="stylesheet" href="{{.BasePath}}/css/workflow.css?v={{.Version}}">
    <link rel="stylesheet" href="{{.BasePath}}/css/admin-surfaces.css?v={{.Version}}">
    <link rel="stylesheet" href="{{.BasePath}}/css/extension-surface.css?v={{.Version}}">
    <link rel="stylesheet" href="{{.BasePath}}/css/sw-shell.css?v={{.Version}}">
    {{if eq .Surface "chat"}}{{template "css-chat" .}}{{end}}
    {{if eq .Surface "notes"}}{{template "css-notes" .}}{{end}}
    {{if eq .Surface "projects"}}{{template "css-projects" .}}{{end}}
    {{/* v0.27.0: Extension surface CSS — loaded from /surfaces/{id}/css/main.css */}}
    {{if and .Manifest (eq .Manifest.Source "extension")}}
    <link rel="stylesheet" href="{{.BasePath}}/surfaces/{{.Surface}}/css/main.css?v={{.Version}}">
    {{end}}
    <style>
        :root {
            --banner-h: 28px;
        }
        body { margin: 0; background: var(--bg); color: var(--text); display: flex; flex-direction: column; height: 100vh; overflow: hidden; }
        .surface { flex: 1; min-height: 0; overflow: hidden; }
        .surface-inner { width: 100%; height: 100%; transform-origin: top left; }
        .banner { flex-shrink: 0; }
    </style>
    <meta name="theme-color" content="#0e0e10" id="metaThemeColor">
    <script>
        // Early theme application — prevents flash of wrong theme on all surfaces.
        // Read from Theme API key (switchboard_theme) as authoritative source.
        (function() {
            try {
                var mode = localStorage.getItem('switchboard_theme') || 'system';
                var resolved = mode;
                if (mode === 'system') resolved = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
                document.documentElement.setAttribute('data-theme', resolved);
                var meta = document.getElementById('metaThemeColor');
                if (meta) meta.content = resolved === 'light' ? '#f7f7fa' : '#0e0e10';
                var fav = document.querySelector('link[rel="icon"][type="image/svg+xml"]');
                if (fav) fav.href = fav.href.replace(/favicon(-light)?\.svg/, resolved === 'light' ? 'favicon-light.svg' : 'favicon.svg');
            } catch(e) {}
        })();
        // Early appearance — apply scale + msg font from localStorage on all surfaces.
        // Scale uses transform on .surface-inner so shell stays fixed, content fills viewport.
        (function() {
            try {
                var p = JSON.parse(localStorage.getItem('cs-appearance') || '{}');
                if (p.scale && p.scale !== 100) {
                    var s = p.scale / 100;
                    document.addEventListener('DOMContentLoaded', function() {
                        var el = document.getElementById('surfaceInner');
                        if (el) { el.style.transform = 'scale('+s+')'; el.style.transformOrigin = 'top left'; el.style.width = (100/s)+'%'; el.style.height = (100/s)+'%'; }
                    });
                }
                if (p.msgFont && p.msgFont !== 14) document.documentElement.style.setProperty('--msg-font', p.msgFont + 'px');
            } catch(e) {}
        })();
    </script>
</head>
<body data-surface="{{.Surface}}" data-base-path="{{.BasePath}}">
    {{if .Banner.Visible}}
    <div class="banner banner-top active" style="background:{{.Banner.Background}};color:{{.Banner.Color}};height:var(--banner-h);line-height:var(--banner-h);text-align:center;font-size:12px;font-weight:600;overflow:hidden;">
        {{.Banner.Text}}
    </div>
    {{end}}

    {{if .Message.Visible}}
    <div class="sw-shell__announcement" id="shellMessage">
        <div class="sw-shell__announcement-inner sw-shell__announcement--{{.Message.Variant}}">
            <span class="sw-shell__announcement-text">{{.Message.Text}}</span>
            <button class="sw-shell__banner-close" onclick="this.closest('.sw-shell__announcement').remove()" aria-label="Dismiss">&times;</button>
        </div>
    </div>
    {{end}}

    <div class="surface" id="surface">
        <div class="surface-inner" id="surfaceInner">
        {{if eq .Surface "chat"}}{{template "surface-chat" .}}
        {{else if eq .Surface "admin"}}{{template "surface-admin" .}}
        {{else if eq .Surface "team-admin"}}{{template "surface-team-admin" .}}
        {{else if eq .Surface "notes"}}{{template "surface-notes" .}}
        {{else if eq .Surface "settings"}}{{template "surface-settings" .}}
        {{else if eq .Surface "projects"}}{{template "surface-projects" .}}
        {{else if and .Manifest (eq .Manifest.Source "extension")}}{{template "surface-extension" .}}
        {{else}}<div style="padding:20px">Unknown surface: {{.Surface}}</div>
        {{end}}
        </div>
    </div>

    {{if .Footer.Visible}}
    <div class="sw-shell__footer">{{.Footer.Text}}</div>
    {{end}}

    {{if .Banner.Visible}}
    <div class="banner banner-bottom active" style="background:{{.Banner.Background}};color:{{.Banner.Color}};height:var(--banner-h);line-height:var(--banner-h);text-align:center;font-size:12px;font-weight:600;overflow:hidden;">
        {{.Banner.Text}}
    </div>
    {{end}}

    <script nonce="{{.CSPNonce}}">
        window.__BASE__ = '{{.BasePath}}';
        window.__VERSION__ = '{{.Version}}';
        window.__ENV__ = '{{.Environment}}';
        window.__BRANDING__ = {};
        window.__SURFACE__ = '{{.Surface}}';
        window.__PAGE_DATA__ = {{.Data | toJSON}};
        window.__USER__ = {{.User | toJSON}};
        {{if .Manifest}}window.__MANIFEST__ = {{.Manifest | toJSON}};{{end}}
    </script>

    {{/* v0.37.14 Scorched Earth IV: sb.js, events.js, switchboard-sdk.js,
         workflow-surfaces.js removed. All surfaces use Preact SDK boot().
         Survivors: debug.js, repl.js (standalone, no old-layer deps). */}}

    {{if eq .Surface "chat"}}{{template "scripts-chat" .}}{{end}}
    {{if eq .Surface "admin"}}{{template "scripts-admin" .}}{{end}}
    {{if eq .Surface "team-admin"}}{{template "scripts-team-admin" .}}{{end}}
    {{if eq .Surface "notes"}}{{template "scripts-notes" .}}{{end}}
    {{if eq .Surface "settings"}}{{template "scripts-settings" .}}{{end}}
    {{if eq .Surface "projects"}}{{template "scripts-projects" .}}{{end}}
    {{/* v0.27.0: Extension surface JS — loaded from /surfaces/{id}/js/main.js */}}
    {{if and .Manifest (eq .Manifest.Source "extension")}}
    <script type="module" nonce="{{.CSPNonce}}" src="{{.BasePath}}/surfaces/{{.Surface}}/js/main.js?v={{.Version}}"></script>
    {{end}}

    {{/* v0.37.13: Legacy UserMenu hydration removed — all surfaces use Preact UserMenu. */}}

    {{/* ── Debug Log Modal (all surfaces) ───── */}}
    <div id="debugModal" class="modal-overlay">
        <div class="modal modal-wide">
            <div class="modal-header">
                <h2>Debug Log</h2>
                <button class="modal-close" onclick="closeModal('debugModal')">✕</button>
            </div>
            <div class="modal-tabs">
                <button class="debug-tab active" data-tab="console" onclick="switchDebugTab('console')">Console <span id="debugConsoleCount" class="badge">0</span></button>
                <button class="debug-tab" data-tab="network" onclick="switchDebugTab('network')">Network <span id="debugNetworkCount" class="badge">0</span></button>
                <button class="debug-tab" data-tab="state" onclick="switchDebugTab('state')">State</button>
                <button class="debug-tab" data-tab="repl" onclick="switchDebugTab('repl')">REPL</button>
            </div>
            <div class="modal-body" style="padding:0;overflow:hidden;display:flex;flex-direction:column;min-height:0;">
                <div id="debugConsoleTab" class="debug-tab-content" style="display:flex;flex-direction:column;flex:1;min-height:0;">
                    <div style="padding:8px;display:flex;gap:8px;align-items:center;flex-shrink:0;">
                        <label><input type="checkbox" id="debugFilterErrors"> Errors only</label>
                        <label><input type="checkbox" id="debugAutoScroll" checked> Auto-scroll</label>
                    </div>
                    <div id="debugConsoleContent" class="debug-content" style="font-family:monospace;font-size:12px;padding:8px;flex:1;overflow-y:auto;min-height:0;"></div>
                </div>
                <div id="debugNetworkTab" class="debug-tab-content" style="display:none;flex:1;min-height:0;overflow-y:auto;">
                    <div id="debugNetworkContent" class="debug-content" style="font-family:monospace;font-size:12px;padding:8px;"></div>
                </div>
                <div id="debugStateTab" class="debug-tab-content" style="display:none;flex:1;min-height:0;overflow-y:auto;">
                    <div id="debugStateContent" class="debug-content" style="font-family:monospace;font-size:12px;padding:8px;white-space:pre-wrap;"></div>
                </div>
                <div id="debugReplTab" class="debug-tab-content" style="display:none;flex:1;min-height:0;flex-direction:column;">
                    <div id="replOutput" style="flex:1;overflow-y:auto;font-family:monospace;font-size:12px;padding:8px;min-height:0;"></div>
                    <div style="border-top:1px solid var(--border);padding:8px;flex-shrink:0;">
                        <input type="text" id="replInput" placeholder="Type expression…" style="width:100%;font-family:monospace;font-size:12px;">
                    </div>
                </div>
            </div>
            <div class="modal-footer" style="display:flex;justify-content:space-between;align-items:center;">
                <div style="display:flex;gap:8px;">
                    <button class="btn-danger btn-small" onclick="runDebugDiagnostics()">Diagnostics</button>
                    <button class="btn-danger btn-small" onclick="purgeCache()">Purge Cache</button>
                </div>
                <div style="display:flex;gap:8px;">
                    <button class="btn-secondary btn-small" onclick="clearDebugLog()">Clear</button>
                    <button class="btn-secondary btn-small" onclick="copyDebugLog()">Copy</button>
                    <button class="btn-secondary btn-small" onclick="exportDebugLog()">Export</button>
                </div>
            </div>
        </div>
    </div>
    <script type="module" nonce="{{.CSPNonce}}" src="{{.BasePath}}/js/debug.js?v={{.Version}}"></script>
    <script type="module" nonce="{{.CSPNonce}}" src="{{.BasePath}}/js/repl.js?v={{.Version}}"></script>
</body>
</html>
{{end}}
