{{/*
    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.
*/}}
{{define "chat-pane"}}
<div class="chat-pane" id="{{.ID}}ChatPane">
    <div class="chat-pane-messages" id="{{.ID}}ChatMessages"></div>
    <div class="chat-pane-input-bar">
        <div class="chat-pane-model-sel" id="{{.ID}}ModelSel"></div>
        <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}}