{{/*
    Editor surface — v0.25.0 rebuild.
    Three-pane layout: files | code-editor | <chat, notes>
    Uses PaneContainer for resizable splits and tabbed right pane.

    Components are SERVER-RENDERED via Go template partials into hidden
    containers (#editorComponents). The boot script moves them into
    pane slots created by PaneContainer. This ensures full DOM parity
    with the chat surface — same buttons, same features, same behavior.
*/}}

{{define "surface-editor"}}
<div class="surface-editor" id="editorSurface">

    {{/* ── Top Bar ─────────────────────────── */}}
    <div class="editor-topbar" id="editorTopbar">
        <a href="{{.BasePath}}/" class="editor-topbar-back" title="Back to chat">
            <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="19" y1="12" x2="5" y2="12"/><polyline points="12 19 5 12 12 5"/></svg>
            Back
        </a>
        <div class="editor-topbar-sep"></div>
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="color:var(--accent);"><polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/></svg>

        {{/* Workspace selector dropdown */}}
        <div class="editor-ws-selector" id="editorWsSelector">
            <button class="editor-ws-selector-btn" id="editorWsSelectorBtn">
                <span id="editorWorkspaceName">{{if .Data}}{{.Data.WorkspaceName}}{{else}}Editor{{end}}</span>
                <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="6 9 12 15 18 9"/></svg>
            </button>
            <div class="editor-ws-dropdown" id="editorWsDropdown">
                <div id="editorWsList" class="editor-ws-list">
                    {{/* Populated by JS */}}
                </div>
                <div class="editor-ws-dropdown-divider"></div>
                <button class="editor-ws-dropdown-item editor-ws-new" id="editorWsNewBtn">
                    <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
                    New Workspace
                </button>
            </div>
        </div>

        <div class="editor-topbar-branch" id="editorBranchBadge" style="display:none;">
            <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="var(--purple)" stroke-width="2"><circle cx="12" cy="18" r="3"/><circle cx="12" cy="6" r="3"/><line x1="12" y1="9" x2="12" y2="15"/></svg>
            <span id="editorBranchName" class="editor-topbar-branch-text">main</span>
        </div>
        <div style="flex:1;"></div>
        <button class="icon-btn" id="editorRefreshBtn" title="Refresh files">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="23 4 23 10 17 10"/><path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"/></svg>
        </button>
        {{template "user-menu" dict "ID" ""}}
    </div>

    {{/* ── Pane Body ───────────────────────── */}}
    <div class="editor-body" id="editorBody"></div>

    {{/* ── Bootstrap (no workspace) ────────── */}}
    <div class="editor-bootstrap" id="editorBootstrap" style="display:none;">
        <div class="editor-bootstrap-card">
            <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="var(--accent)" stroke-width="1.5" style="opacity:0.6;margin-bottom:12px;">
                <path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/>
            </svg>
            <h3 style="margin:0 0 16px;font-size:16px;">Open a Workspace</h3>
            <div id="editorBootstrapList" style="margin-bottom:16px;">
                <div style="font-size:12px;color:var(--text-3);">Loading workspaces…</div>
            </div>
            <div style="display:flex;align-items:center;gap:8px;margin-bottom:12px;">
                <div style="flex:1;height:1px;background:var(--border);"></div>
                <span style="font-size:11px;color:var(--text-3);text-transform:uppercase;">or create new</span>
                <div style="flex:1;height:1px;background:var(--border);"></div>
            </div>
            <input type="text" id="editorBootstrapName" class="editor-bootstrap-input" placeholder="Workspace name" value="workspace">
            <button id="editorBootstrapBtn" class="editor-bootstrap-btn">Create Workspace</button>
        </div>
    </div>

    {{/* ── Server-Rendered Components ──────── */}}
    {{/* Hidden until moved into pane slots by editor-surface.js.
         Full DOM from Go template partials = feature parity with chat surface. */}}
    <div id="editorComponents" style="display:none;">
        {{template "file-tree" dict "ID" "ed"}}
        {{template "code-editor" dict "ID" "ed"}}
        {{template "chat-pane" dict "ID" "ed"}}
        {{template "note-editor" dict "ID" "edNotes"}}
    </div>
</div>
{{end}}

{{/* ── CSS ─────────────────────────────────── */}}
{{define "css-editor"}}
<link rel="stylesheet" href="{{.BasePath}}/css/editor-surface.css?v={{.Version}}">
{{end}}

{{/* ── Scripts ─────────────────────────────── */}}
{{define "scripts-editor"}}
<script nonce="{{.CSPNonce}}" src="{{.BasePath}}/vendor/codemirror/codemirror.bundle.js?v={{.Version}}" onerror="console.warn('[CM6] Bundle not available')"></script>
<script type="module" nonce="{{.CSPNonce}}" src="{{.BasePath}}/js/chat-pane.js?v={{.Version}}"></script>
<script type="module" nonce="{{.CSPNonce}}" src="{{.BasePath}}/js/editor-surface.js?v={{.Version}}"></script>
<script type="module" nonce="{{.CSPNonce}}" src="{{.BasePath}}/js/app.js?v={{.Version}}"></script>
{{end}}