{{/*
    File Tree Component — workspace file browser with directory expand/collapse.
    Usage: {{template "file-tree" dict "ID" "editor"}}
    Creates mount points: {ID}FileTree, {ID}TreeHeader, {ID}TreeItems, {ID}TreeNewFile.
    FileTree.create() in file-tree.js binds to these IDs.
*/}}
{{define "file-tree"}}
<div class="file-tree" id="{{.ID}}FileTree">
    <div class="file-tree-header" id="{{.ID}}TreeHeader">
        <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 class="file-tree-title">Files</span>
        <button class="icon-btn" id="{{.ID}}TreeNewFile" 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="file-tree-items" id="{{.ID}}TreeItems">
        {{/* Populated by FileTree.refresh() */}}
    </div>
</div>
{{end}}