{{/*
    Editor surface — matches switchboard-prototype-editor.jsx.
    IDE-like layout: topbar + file tree + tabs + code + chat pane.
    editor-mode.js builds CodeMirror, file tree, etc.
*/}}

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

    {{/* Top Bar */}}
    <div class="editor-topbar">
        <a href="{{.BasePath}}/" class="editor-topbar-back">
            <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 style="width:1px;height:18px;background:var(--border);"></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>
        <span style="font-size:13px;font-weight:600;" id="editorWorkspaceName">
            {{if .Data}}{{.Data.WorkspaceName}}{{else}}Editor{{end}}
        </span>
        <div style="display:flex;align-items:center;gap:4px;background:var(--purple-dim);padding:2px 8px;border-radius:4px;">
            <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 style="font-size:11px;font-weight:600;color:var(--purple);font-family:var(--mono);">main</span>
        </div>
        <div style="flex:1;"></div>
        <button class="icon-btn" id="editorNewFileBtn" title="New File">
            <svg width="14" height="14" 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>
        </button>
        <button class="icon-btn" id="editorRefreshBtn" title="Refresh">
            <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>
        <button class="icon-btn" id="editorSearchBtn" title="Search">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
        </button>
        <div style="width:1px;height:18px;background:var(--border);"></div>
        <button class="icon-btn" id="editorToggleTree" title="Toggle file tree">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2"/><line x1="9" y1="3" x2="9" y2="21"/></svg>
        </button>
        <button class="icon-btn" id="editorToggleChat" title="Toggle chat">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2"/><line x1="15" y1="3" x2="15" y2="21"/></svg>
        </button>
    </div>

    {{/* Body: tree + editor + chat */}}
    <div class="editor-body" id="editorBody">
        {{/* File Tree */}}
        <div class="editor-tree" id="editorFileTree">
            <div class="editor-tree-header">
                <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="var(--accent)" stroke-width="2"><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>
                <span style="font-size:11px;font-weight:600;color:var(--text-2);text-transform:uppercase;letter-spacing:0.4px;flex:1;">Files</span>
                <button class="icon-btn" id="treeNewFileBtn" title="New file">
                    <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>
                </button>
            </div>
            <div class="editor-tree-files" id="editorTreeFiles">
                {{/* Populated by editor-mode.js */}}
            </div>
        </div>

        {{/* Main Editor Area */}}
        <div class="editor-main" id="editorMain">
            {{/* Tabs */}}
            <div class="editor-tabs" id="editorTabs">
                {{/* Populated by editor-mode.js */}}
            </div>

            {{/* Code Content */}}
            <div class="editor-content" id="editorContent">
                <div style="display:flex;align-items:center;justify-content:center;height:100%;color:var(--text-3);">
                    <div style="text-align:center;">
                        <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" style="opacity:0.12;display:inline-block;margin-bottom:10px;"><path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"/><polyline points="13 2 13 9 20 9"/></svg>
                        <p style="margin:0;font-size:14px;">Open a file to start editing</p>
                        <p style="margin:6px 0 0;font-size:12px;">Select from the file tree or Ctrl+P</p>
                    </div>
                </div>
            </div>

            {{/* Status Bar */}}
            <div class="editor-statusbar" id="editorStatusbar">
                <span>Ready</span>
            </div>
        </div>

        {{/* Chat Pane (resizable) */}}
        <div id="editorSplitHandle" style="width:5px;background:var(--border);cursor:col-resize;flex-shrink:0;display:none;"></div>
        <div class="editor-chat" id="editorChatPane" style="display:none;">
            <div class="editor-chat-header">
                <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="var(--accent)" stroke-width="2"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
                <span style="font-size:12px;font-weight:600;flex:1;">AI Chat</span>
                <span class="badge badge-accent" id="editorChatModel">claude-sonnet-4-5</span>
            </div>
            <div class="editor-chat-messages" id="editorChatMessages">
                {{/* Populated by editor-mode.js */}}
            </div>
            <div class="editor-chat-input">
                <div style="display:flex;gap:8px;align-items:flex-end;">
                    <textarea id="editorChatInput" placeholder="Ask about this code…" rows="2"
                        style="flex:1;background:var(--input-bg,var(--bg));border:1px solid var(--border);color:var(--text);padding:8px 10px;border-radius:8px;font-size:12px;font-family:inherit;outline:none;resize:none;"></textarea>
                    <button id="editorChatSendBtn" style="background:var(--accent);color:#fff;border:none;border-radius:8px;padding:8px 14px;font-size:12px;font-weight:600;cursor:pointer;font-family:inherit;">Send</button>
                </div>
                <div style="display:flex;gap:6px;margin-top:6px;font-size:10px;color:var(--text-3);">
                    <span id="editorChatContext">Context: none</span>
                    <span>&middot;</span>
                    <span>Cmd+L to focus</span>
                </div>
            </div>
        </div>
    </div>
</div>

<div id="toastContainer" class="toast-container"></div>
{{end}}

{{/* CSS: loaded via base.html (variables, layout, primitives, modals, chat, panels, surfaces, splash) */}}
{{define "css-editor"}}
<link rel="stylesheet" href="{{.BasePath}}/css/editor-mode.css?v={{.Version}}">
{{end}}

{{/* Scripts */}}
{{define "scripts-editor"}}
<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}}" onerror="console.warn('[CM6] Bundle not available')"></script>
<script nonce="{{.CSPNonce}}" src="{{.BasePath}}/js/ui-format.js?v={{.Version}}"></script>
<script nonce="{{.CSPNonce}}" src="{{.BasePath}}/js/editor-mode.js?v={{.Version}}"></script>
<script nonce="{{.CSPNonce}}" src="{{.BasePath}}/js/app.js?v={{.Version}}"></script>
{{end}}