{{/*
    Note Editor Component — notes list + editor/reader with folders, search, backlinks.
    Usage: {{template "note-editor" dict "ID" "main"}}
    Creates mount points for list view, editor view, and graph view.
    NoteEditor.create() in note-editor.js binds to these IDs.

    When used in the notes surface (standalone), notes.js wires event listeners
    and integrates with PanelRegistry. When used in the editor surface (tabbed pane),
    NoteEditor.create() provides independent lifecycle and event wiring.
*/}}
{{define "note-editor"}}
<div class="note-editor" id="{{.ID}}NoteEditor">
    {{/* ── List View ───────────────────────── */}}
    <div class="note-editor-list-view" id="{{.ID}}NotesListView">
        <div class="notes-toolbar">
            <button id="{{.ID}}NotesNewBtn" class="btn-small" title="New note">+ New</button>
            <button id="{{.ID}}NotesTodayBtn" class="btn-small" title="Open daily note">📅 Today</button>
            <button id="{{.ID}}NotesGraphBtn" class="btn-small" title="Note graph">🕸 Graph</button>
            <button id="{{.ID}}NotesSelectModeBtn" class="btn-small" title="Select mode">☑ Select</button>
        </div>
        <div class="notes-search-row">
            <input type="text" id="{{.ID}}NotesSearchInput" class="notes-search-input" placeholder="Search notes…" autocomplete="off">
        </div>
        <div class="notes-filter-row">
            <select id="{{.ID}}NotesFolderFilter" class="notes-filter-select"><option value="">All folders</option></select>
            <select id="{{.ID}}NotesSortSelect" class="notes-filter-select">
                <option value="updated_desc">Last updated</option>
                <option value="created_desc">Created</option>
                <option value="alpha">Alphabetical</option>
            </select>
        </div>
        <div id="{{.ID}}NotesList" class="notes-list"></div>
        <div id="{{.ID}}NotesSelectionBar" class="notes-selection-bar" style="display:none;">
            <label class="notes-select-all"><input type="checkbox" id="{{.ID}}NotesSelectAll"> All</label>
            <span id="{{.ID}}NotesSelectedCount">0</span> selected
            <button id="{{.ID}}NotesDeleteSelectedBtn" class="btn-small btn-danger">Delete</button>
            <button id="{{.ID}}NotesCancelSelectBtn" class="btn-small">Cancel</button>
        </div>
    </div>

    {{/* ── Editor View ─────────────────────── */}}
    <div class="note-editor-editor-view" id="{{.ID}}NotesEditorView" style="display:none;">
        <div class="notes-editor-header">
            <button id="{{.ID}}NotesBackBtn" class="btn-small" title="Back to list">← Back</button>
            <div style="flex:1"></div>
            <button id="{{.ID}}NoteEditBtn" class="btn-small" style="display:none;">Edit</button>
            <button id="{{.ID}}NotePreviewBtn" class="btn-small" style="display:none;">Preview</button>
            <button id="{{.ID}}NoteCancelEditBtn" class="btn-small" style="display:none;">Cancel</button>
            <button id="{{.ID}}NoteDeleteBtn" class="btn-small btn-danger" style="display:none;">Delete</button>
            <button id="{{.ID}}NoteSaveBtn" class="btn-small btn-primary">Save</button>
        </div>

        {{/* Edit mode */}}
        <div id="{{.ID}}NoteEditMode" class="notes-editor">
            <input type="text" id="{{.ID}}NoteEditorTitle" class="notes-title-input" placeholder="Note title">
            <div class="notes-meta-row">
                <input type="text" id="{{.ID}}NoteEditorFolder" class="notes-folder-input" placeholder="Folder (e.g. work/project)">
                <input type="text" id="{{.ID}}NoteEditorTags" class="notes-tags-input" placeholder="Tags (comma-separated)">
            </div>
            <div id="{{.ID}}NoteEditorContentContainer" class="notes-content-container">
                <textarea id="{{.ID}}NoteEditorContent" rows="12" class="notes-content-input" placeholder="Write your note in markdown…"></textarea>
            </div>
        </div>

        {{/* Read mode */}}
        <div id="{{.ID}}NoteReadMode" style="display:none;">
            <div class="notes-read-view">
                <h3 id="{{.ID}}NoteReadTitle" class="note-read-title"></h3>
                <div id="{{.ID}}NoteReadMeta" class="note-read-meta"></div>
                <div id="{{.ID}}NoteReadContent" class="note-read-content msg-content"></div>
            </div>
        </div>

        {{/* Backlinks */}}
        <div id="{{.ID}}NoteBacklinks" class="note-backlinks" style="display:none;">
            <div class="note-backlinks-header">
                Backlinks <span id="{{.ID}}NoteBacklinksCount" class="badge">0</span>
            </div>
            <div id="{{.ID}}NoteBacklinksList" class="note-backlinks-list"></div>
        </div>
    </div>

    {{/* ── Graph View ──────────────────────── */}}
    <div class="note-editor-graph-view" id="{{.ID}}NotesGraphView" style="display:none;"></div>
</div>
{{end}}