{{/*
    Chat Pane Component - reusable chat scaffold.
    Usage: {{template "chat-pane" dict "ID" "main"}}
    Creates mount points: {ID}ChatMessages, {ID}ChatInput, {ID}SendBtn, {ID}ModelSel
    ChatPane.create() in chat-pane.js binds to these IDs.

    The header bar ({ID}ChatHeader) is hidden by default.
    Standalone panes (editor assist) show it for chat switching + model selection.
*/}}
{{define "chat-pane"}}
<div class="chat-pane" id="{{.ID}}ChatPane">
    <div class="chat-pane-header" id="{{.ID}}ChatHeader" style="display:none;">
        <div class="chat-pane-header-left">
            <select class="chat-pane-chat-select" id="{{.ID}}ChatSelect" title="Switch chat">
                <option value="">New conversation</option>
            </select>
            <button class="chat-pane-new-btn" id="{{.ID}}ChatNewBtn" title="New chat">
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
            </button>
        </div>
        <div class="chat-pane-header-right">
            <div class="chat-pane-model-sel" id="{{.ID}}ModelSel"></div>
        </div>
    </div>
    <div class="chat-pane-messages" id="{{.ID}}ChatMessages"></div>
    <div class="chat-pane-input-bar">
        <div class="chat-pane-input-wrap">
            <div class="chat-pane-input" id="{{.ID}}ChatInput"></div>
            <button class="chat-pane-send" id="{{.ID}}SendBtn" title="Send">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/>
                </svg>
            </button>
        </div>
        <div class="chat-pane-toolbar" id="{{.ID}}Toolbar"></div>
    </div>
</div>
{{end}}