{{/* Admin models — model catalog table. */}}

{{define "admin-models"}}
<div class="admin-page">
    <h2>Model Catalog</h2>
    <p class="section-hint">All models synced from providers. Toggle visibility to control what users can access.</p>

    <div class="admin-toolbar">
        <input type="text" class="admin-search" id="modelSearch" placeholder="Filter models…" oninput="Pages.filterModels(this.value)">
        <select class="admin-search" style="min-width:120px;" id="modelTypeFilter" onchange="Pages.filterModels()">
            <option value="">All types</option>
            <option value="chat">Chat</option>
            <option value="embedding">Embedding</option>
            <option value="image">Image</option>
        </select>
        <select class="admin-search" style="min-width:140px;" id="modelProviderFilter" onchange="Pages.filterModels()">
            <option value="">All providers</option>
            {{range .Data.Providers}}
            <option value="{{.ID}}">{{.Name}}</option>
            {{end}}
        </select>
    </div>

    {{if .Data.Models}}
    <table class="admin-table" id="modelTable">
        <thead>
            <tr>
                <th>Model</th>
                <th>Provider</th>
                <th>Type</th>
                <th>Capabilities</th>
                <th></th>
            </tr>
        </thead>
        <tbody>
            {{range .Data.Models}}
            <tr data-provider="{{.ProviderConfigID}}" data-type="{{.ModelType}}" data-name="{{.DisplayName}} {{.ModelID}}">
                <td>
                    <strong>{{.DisplayName}}</strong>
                    {{if ne .DisplayName .ModelID}}<br><span style="font-size:11px;color:var(--text-tertiary,#666);">{{.ModelID}}</span>{{end}}
                </td>
                <td>{{.ProviderName}}</td>
                <td><span class="admin-badge">{{.ModelType}}</span></td>
                <td style="font-size:11px;color:var(--text-secondary);">—</td>
                <td></td>
            </tr>
            {{end}}
        </tbody>
    </table>
    {{else}}
    <div class="empty-hint">No models in catalog. Sync a provider to populate.</div>
    {{end}}
</div>
{{end}}