{{/*
    admin/routing.html — Routing Policy management.
    Fixes bug #2: team scope uses a proper dropdown, not raw text.
*/}}
{{define "admin-routing"}}
<div class="admin-page">
    <h2>Routing Policies</h2>
    <p class="section-hint">Define rules for model selection, cost limits, and team-specific routing.</p>

    <div style="margin-bottom:12px">
        <button class="btn-small btn-primary" onclick="Pages.showRoutingForm()">+ New Policy</button>
    </div>

    <div id="routingPolicyForm" style="display:none" class="admin-inline-form">
        <input type="hidden" id="routingPolicyId">
        <div class="form-row" style="gap:8px">
            <div class="form-group" style="flex:1">
                <label>Name</label>
                <input type="text" id="routingPolicyName" placeholder="e.g. Prefer local provider">
            </div>
            <div class="form-group" style="width:80px">
                <label>Priority</label>
                <input type="number" id="routingPolicyPriority" value="100" min="0" max="999">
            </div>
        </div>
        <div class="form-row" style="gap:8px">
            <div class="form-group" style="flex:1">
                <label>Type</label>
                <select id="routingPolicyType">
                    <option value="provider_prefer">Provider Prefer</option>
                    <option value="team_route">Team Route</option>
                    <option value="cost_limit">Cost Limit</option>
                    <option value="model_alias">Model Alias</option>
                </select>
            </div>
            <div class="form-group" style="flex:1">
                <label>Scope</label>
                <select id="routingPolicyScope" onchange="Pages.routingScopeChanged(this)">
                    <option value="global">Global</option>
                    <option value="team">Team</option>
                </select>
            </div>
        </div>

        {{/* Team dropdown — shown when scope=team. Pre-populated from server. */}}
        <div class="form-row" id="routingTeamRow" style="display:none">
            <div class="form-group" style="flex:1">
                <label>Team</label>
                <select id="routingPolicyTeamId">
                    <option value="">— select team —</option>
                    {{range .Data.Teams}}
                    <option value="{{.ID}}">{{.Name}}</option>
                    {{end}}
                </select>
            </div>
        </div>

        <div class="form-group">
            <label>Config (JSON)</label>
            <textarea id="routingPolicyConfig" rows="4" placeholder='{"provider_config_id": "..."}'
                style="font-family:monospace;"></textarea>
        </div>
        <div class="form-row" style="gap:8px">
            <label class="checkbox-label">
                <input type="checkbox" id="routingPolicyActive" checked> Active
            </label>
        </div>
        <div class="form-row" style="gap:8px;margin-top:8px">
            <button class="btn-small btn-primary" onclick="Pages.saveRoutingPolicy()">Save</button>
            <button class="btn-small" onclick="Pages.hideRoutingForm()">Cancel</button>
        </div>
    </div>

    <div id="routingPolicyList">
        {{if not .Data.Policies}}
        <div class="empty-hint">No routing policies configured.</div>
        {{end}}
    </div>
</div>
{{end}}