{{/*
    Model Selector Component — chat model + persona dropdown with capability badges.
    Usage: {{template "model-selector" dict "ID" ""}}
    With empty ID, generates existing IDs: modelDropdown, modelDropdownBtn, etc.
    With prefix: {{template "model-selector" dict "ID" "editor"}} → editorModelDropdown, etc.
    ModelSelector.create() in model-selector.js binds to these IDs.
*/}}
{{define "model-selector"}}
<div id="{{.ID}}modelDropdown" class="model-dropdown">
    <button id="{{.ID}}modelDropdownBtn" class="model-dropdown-btn">
        <span id="{{.ID}}modelDropdownLabel" class="model-dropdown-label">Select model…</span>
        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="6 9 12 15 18 9"/></svg>
    </button>
    <div id="{{.ID}}modelDropdownMenu" class="model-dropdown-menu">
        {{/* Populated by ModelSelector.update() */}}
    </div>
</div>
<span id="{{.ID}}modelCaps" class="model-caps"></span>
{{end}}