{{/*
    Notes surface (v0.37.11 — Preact).
    Replaced the v0.37.9 template mount with a single mount point.
    Preact NotesSurface component handles all rendering.
*/}}

{{define "surface-notes"}}

{{/* ── Crash Catcher (visible without devtools) ── */}}
<div id="crashBanner" style="display:none;position:fixed;top:0;left:0;right:0;z-index:99999;background:#b00020;color:#fff;padding:12px 20px;font-family:monospace;font-size:13px;max-height:40vh;overflow-y:auto;">
    <strong>Init Error</strong> <button onclick="this.parentElement.style.display='none'" style="float:right;background:none;border:1px solid #fff;color:#fff;cursor:pointer;padding:2px 8px;border-radius:3px">X</button>
    <pre id="crashDetail" style="margin:8px 0 0;white-space:pre-wrap;font-size:12px;"></pre>
</div>
<script nonce="{{$.CSPNonce}}">
window.addEventListener('error', function(e) {
    var b = document.getElementById('crashBanner');
    var d = document.getElementById('crashDetail');
    if (b && d) {
        b.style.display = '';
        d.textContent += (e.filename || '') + ':' + (e.lineno || '') + ' ' + (e.message || e) + '\n';
    }
});
window.addEventListener('unhandledrejection', function(e) {
    var b = document.getElementById('crashBanner');
    var d = document.getElementById('crashDetail');
    if (b && d) {
        b.style.display = '';
        d.textContent += 'Promise: ' + (e.reason?.message || e.reason || 'unknown') + '\n' + (e.reason?.stack || '') + '\n';
    }
});
</script>

{{/* ── Mount Point ────────────────────────── */}}
<div id="notes-mount" style="height:100%;display:flex;">
    <div style="display:flex;align-items:center;justify-content:center;width:100%;color:var(--text-2,#999);font-size:14px;">
        Loading...
    </div>
</div>

{{end}}

{{define "css-notes"}}
<link rel="stylesheet" href="{{.BasePath}}/css/sw-notes-surface.css?v={{.Version}}">
<link rel="stylesheet" href="{{.BasePath}}/branding/custom.css" onerror="this.remove()">
{{end}}

{{define "scripts-notes"}}
<script nonce="{{$.CSPNonce}}" src="{{$.BasePath}}/vendor/marked.min.js"></script>
<script nonce="{{$.CSPNonce}}" src="{{$.BasePath}}/vendor/purify.min.js"></script>
<script nonce="{{$.CSPNonce}}" src="{{$.BasePath}}/vendor/codemirror/codemirror.bundle.js?v={{$.Version}}"></script>
<script type="module" nonce="{{$.CSPNonce}}">
    // v0.37.11: Preact boot — same pattern as chat surface.
    const { h, render } = await import('{{$.BasePath}}/js/sw/vendor/preact.module.js');
    const hooksModule = await import('{{$.BasePath}}/js/sw/vendor/hooks.module.js');
    const { default: htm } = await import('{{$.BasePath}}/js/sw/vendor/htm.module.js');
    const html = htm.bind(h);
    window.preact = window.preact || { h, render };
    window.hooks = window.hooks || hooksModule;
    window.html = window.html || html;

    const { boot } = await import('{{$.BasePath}}/js/sw/sdk/index.js?v={{$.Version}}');
    await boot();

    await import('{{$.BasePath}}/js/sw/surfaces/notes/index.js?v={{$.Version}}');
</script>
{{end}}