{{/*
    Notes surface (Phase 2b).
    Server renders the layout shell. Existing notes.js + note-graph.js
    handle CRUD and rendering inside the containers.
*/}}

{{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"}}
<link rel="stylesheet" href="{{.BasePath}}/css/editor-mode.css?v={{.Version}}">
<link rel="stylesheet" href="{{.BasePath}}/css/persona-kb.css?v={{.Version}}">
<link rel="stylesheet" href="{{.BasePath}}/css/memory.css?v={{.Version}}">
<link rel="stylesheet" href="{{.BasePath}}/css/notifications.css?v={{.Version}}">
<link rel="stylesheet" href="{{.BasePath}}/css/channel-models.css?v={{.Version}}">
<link rel="stylesheet" href="{{.BasePath}}/branding/custom.css" onerror="this.remove()">
<style>
    .surface-notes {
        display: flex;
        flex-direction: column;
        height: 100%;
        overflow: hidden;
    }
    .surface-notes-body {
        flex: 1;
        display: flex;
        min-height: 0;
        overflow: hidden;
    }
    .surface-notes-main {
        flex: 1;
        display: flex;
        flex-direction: column;
        min-width: 0;
        overflow: hidden;
    }
    .surface-notes-assist {
        width: 400px;
        border-left: 1px solid var(--border, #2a2a2a);
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }
    @media (max-width: 768px) {
        .surface-notes-assist { display: none; }
    }
</style>
{{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}}/js/ui-format.js?v={{.Version}}"></script>
<script nonce="{{.CSPNonce}}" src="{{.BasePath}}/js/chat.js?v={{.Version}}"></script>
<script nonce="{{.CSPNonce}}" src="{{.BasePath}}/js/files.js?v={{.Version}}"></script>
<script nonce="{{.CSPNonce}}" src="{{.BasePath}}/js/channel-models.js?v={{.Version}}"></script>
<script nonce="{{.CSPNonce}}" src="{{.BasePath}}/js/tokens.js?v={{.Version}}"></script>
<script nonce="{{.CSPNonce}}" src="{{.BasePath}}/js/extensions.js?v={{.Version}}"></script>
<script nonce="{{.CSPNonce}}" src="{{.BasePath}}/js/notes.js?v={{.Version}}"></script>
<script nonce="{{.CSPNonce}}" src="{{.BasePath}}/js/note-graph.js?v={{.Version}}"></script>
<script nonce="{{.CSPNonce}}" src="{{.BasePath}}/js/knowledge-ui.js?v={{.Version}}"></script>
<script nonce="{{.CSPNonce}}" src="{{.BasePath}}/js/persona-kb.js?v={{.Version}}"></script>
<script nonce="{{.CSPNonce}}" src="{{.BasePath}}/js/memory-ui.js?v={{.Version}}"></script>
<script nonce="{{.CSPNonce}}" src="{{.BasePath}}/js/notifications.js?v={{.Version}}"></script>
<script nonce="{{.CSPNonce}}" src="{{.BasePath}}/js/panels.js?v={{.Version}}"></script>
{{/* debug.js now loaded in base.html for all surfaces */}}
<script nonce="{{.CSPNonce}}" src="{{.BasePath}}/js/projects-ui.js?v={{.Version}}"></script>
<script nonce="{{.CSPNonce}}" src="{{.BasePath}}/js/app.js?v={{.Version}}"></script>
<script nonce="{{.CSPNonce}}">
    // Notes surface boot: open notes panel in standalone mode
    document.addEventListener('DOMContentLoaded', () => {
        if (window.__SURFACE__ === 'notes' && typeof openNotes === 'function') {
            // Mount notes list into the main container
            const mount = document.getElementById('notesMainMount');
            if (mount) {
                // Notes panel will build into the mount point
                mount.dataset.notesStandalone = 'true';
            }
            openNotes();
        }
    });
</script>
{{end}}