{{/*
    Notes surface (v0.37.9).
    Server renders the layout shell. SDK boots Preact NotesPane kit
    into #notesMainMount via sw.notesPane().
*/}}

{{define "surface-notes"}}
<div class="surface-notes" id="surfaceNotes">
    <div class="surface-notes-body">
        {{/* Notes list + editor */}}
        <div class="surface-notes-main" id="notesMainMount"></div>
        {{/* Chat assist pane (optional, can toggle) */}}
        <div class="surface-notes-assist" id="notesAssistMount"></div>
    </div>
</div>
{{end}}

{{define "css-notes"}}
{{/* v0.37.9: Notes surface CSS — sw-notes-pane.css loaded in base.html */}}
<link rel="stylesheet" href="{{.BasePath}}/branding/custom.css" onerror="this.remove()">
{{end}}

{{define "scripts-notes"}}
{{/* v0.37.9: Notes surface — Preact vendor globals + SDK boot + NotesPane */}}
<script type="module" nonce="{{.CSPNonce}}">
    // Vendor: Preact + htm → globals
    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;

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

    // Mount NotesPane
    const mount = document.getElementById('notesMainMount');
    if (mount) sw.notesPane(mount, { standalone: true });

    // Optional: mount chat assist pane
    const assist = document.getElementById('notesAssistMount');
    if (assist) sw.chatPane(assist, { standalone: true });
</script>
{{end}}