{{/*
    Code Editor Component — tabbed CM6 editor with tab bar, save, and status bar.
    Usage: {{template "code-editor" dict "ID" "editor"}}
    Creates mount points: {ID}EditorTabs, {ID}EditorContent, {ID}EditorWelcome,
    {ID}EditorStatus, {ID}EditorStatusFile, {ID}EditorStatusLang, {ID}EditorStatusBranch.
    CodeEditor.create() in code-editor.js binds to these IDs.
*/}}
{{define "code-editor"}}
<div class="code-editor" id="{{.ID}}CodeEditor">
    <div class="code-editor-tabs" id="{{.ID}}EditorTabs">
        {{/* Populated by CodeEditor.openFile() */}}
    </div>
    <div class="code-editor-content" id="{{.ID}}EditorContent">
        <div class="code-editor-welcome" id="{{.ID}}EditorWelcome">
            <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>
    </div>
    <div class="code-editor-statusbar" id="{{.ID}}EditorStatus">
        <span id="{{.ID}}EditorStatusFile"></span>
        <span id="{{.ID}}EditorStatusLang"></span>
        <span id="{{.ID}}EditorStatusBranch"></span>
    </div>
</div>
{{end}}