{{/*
    admin/roles.html — Model Roles configuration page.
    Fixes bug #1: embedding models now appear via model_type filtering.
*/}}
{{define "admin-roles"}}
<div class="admin-page">
    <h2>Model Roles</h2>
    <p class="section-hint">Configure which models serve background tasks. Each role has a primary and optional fallback.</p>

    {{$providers := .Data.Providers}}
    {{$models := .Data.Models}}

    {{range .Data.Roles}}
    <section class="settings-section" style="margin-bottom:16px">
        <h3 style="font-size:14px;margin:0 0 12px;text-transform:capitalize">{{.Name}} Role</h3>
        <p class="section-hint" style="margin-bottom:12px">
            {{if eq .Name "utility"}}Summarization, classification, routing — typically a fast, cheap chat model.{{end}}
            {{if eq .Name "embedding"}}Vector generation for knowledge base search and semantic note search.{{end}}
        </p>

        {{$roleName := .Name}}
        {{$filterType := roleFilterType .Name}}
        {{$primaryProvID := ""}}
        {{$primaryModelID := ""}}
        {{$fallbackProvID := ""}}
        {{$fallbackModelID := ""}}
        {{if .Primary}}
            {{$primaryProvID = .Primary.ProviderID}}
            {{$primaryModelID = .Primary.ModelID}}
        {{end}}
        {{if .Fallback}}
            {{$fallbackProvID = .Fallback.ProviderID}}
            {{$fallbackModelID = .Fallback.ModelID}}
        {{end}}

        <div class="role-config" data-role="{{$roleName}}">
            <div style="margin-bottom:8px">
                <label style="font-size:12px;color:var(--text-secondary)">Primary</label>
                <div class="form-row" style="gap:8px;align-items:center;margin-top:4px">
                    <select class="model-provider-select"
                            data-role="{{$roleName}}" data-slot="primary"
                            data-filter-type="{{$filterType}}"
                            onchange="Pages.roleProviderChanged(this)"
                            style="min-width:140px">
                        <option value="">— none —</option>
                        {{range $providers}}
                        <option value="{{.ID}}"{{if eq .ID $primaryProvID}} selected{{end}}>{{.Name}}</option>
                        {{end}}
                    </select>
                    <select class="model-model-select"
                            data-role="{{$roleName}}" data-slot="primary"
                            style="min-width:200px">
                        <option value="">— select model —</option>
                        {{range $models}}
                        {{if and (eq .ProviderConfigID $primaryProvID) (or (eq $filterType "") (eq .ModelType $filterType))}}
                        <option value="{{.ModelID}}"{{if eq .ModelID $primaryModelID}} selected{{end}}>{{.DisplayName}}</option>
                        {{end}}
                        {{end}}
                    </select>
                </div>
            </div>

            <div style="margin-bottom:8px">
                <label style="font-size:12px;color:var(--text-secondary)">Fallback</label>
                <div class="form-row" style="gap:8px;align-items:center;margin-top:4px">
                    <select class="model-provider-select"
                            data-role="{{$roleName}}" data-slot="fallback"
                            data-filter-type="{{$filterType}}"
                            onchange="Pages.roleProviderChanged(this)"
                            style="min-width:140px">
                        <option value="">— none —</option>
                        {{range $providers}}
                        <option value="{{.ID}}"{{if eq .ID $fallbackProvID}} selected{{end}}>{{.Name}}</option>
                        {{end}}
                    </select>
                    <select class="model-model-select"
                            data-role="{{$roleName}}" data-slot="fallback"
                            style="min-width:200px">
                        <option value="">— select model —</option>
                        {{range $models}}
                        {{if and (eq .ProviderConfigID $fallbackProvID) (or (eq $filterType "") (eq .ModelType $filterType))}}
                        <option value="{{.ModelID}}"{{if eq .ModelID $fallbackModelID}} selected{{end}}>{{.DisplayName}}</option>
                        {{end}}
                        {{end}}
                    </select>
                </div>
            </div>

            <button class="btn-small btn-primary" onclick="Pages.saveRole('{{$roleName}}')">Save</button>
        </div>
    </section>
    {{end}}
</div>
{{end}}