{# _config_row.html: subagent card body — prompt/model/temp fields #}
{% load cotton %}

<div class="cb-fields-row mb-3">

    {# ─── Prompt dropdown ─────────────────────────────────────────────── #}
    <div class="cb-field">
        <label class="cb-field-label">Prompt</label>
        <div class="cb-dropdown" @click.outside="promptDropdowns[selectedSa.key] = false">
            <button type="button"
                    class="cb-dropdown-trigger"
                    :class="getSelectedPromptId(selectedSa.key) ? 'cb-dropdown-trigger--override' : ''"
                    @click.stop="togglePromptDropdown(selectedSa.key)">
                <span x-text="promptDisplayLabel(selectedSa)"></span>
                <template x-if="getSelectedPromptId(selectedSa.key)">
                    <span class="pm-pill pm-pill--override" style="font-size:9px;padding:1px 6px;">
                        <span class="pm-pill__dot"></span>Override
                    </span>
                </template>
                <template x-if="!getSelectedPromptId(selectedSa.key)">
                    <span class="pm-pill pm-pill--prod-green" style="font-size:9px;padding:1px 6px;">
                        <span class="pm-pill__dot"></span>Prod
                    </span>
                </template>
                <svg class="cb-dropdown-chevron" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
                </svg>
            </button>
            <div class="cb-dropdown-menu" x-show="promptDropdowns[selectedSa.key]" x-cloak x-transition>
                {# Prod option #}
                <div class="cb-dropdown-option"
                     @click="setRowPrompt(selectedSa.key, ''); promptDropdowns[selectedSa.key] = false">
                    <span x-text="prodPromptLabel(selectedSa)"></span>
                    <span class="pm-pill pm-pill--prod-green" style="font-size:9px;padding:1px 6px;">
                        <span class="pm-pill__dot"></span>Prod
                    </span>
                    <template x-if="!getSelectedPromptId(selectedSa.key)">
                        <svg class="cb-dropdown-check" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                        </svg>
                    </template>
                </div>
                {# User versions #}
                <template x-for="v in selectedSa.versions" :key="v.id">
                    <div class="cb-dropdown-option"
                         @click="setRowPrompt(selectedSa.key, v.id); promptDropdowns[selectedSa.key] = false">
                        <span x-text="v.label + ' (' + v.created_at + ')'"></span>
                        <template x-if="getSelectedPromptId(selectedSa.key) === v.id">
                            <svg class="cb-dropdown-check" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                            </svg>
                        </template>
                    </div>
                </template>
            </div>
        </div>
    </div>

    {# ─── Model dropdown ─────────────────────────────────────────────── #}
    <div class="cb-field">
        <label class="cb-field-label">Model</label>
        <div class="cb-dropdown" @click.outside="modelDropdowns[selectedSa.key] = false">
            <button type="button"
                    class="cb-dropdown-trigger"
                    :class="getSelectedModel(selectedSa.key) && getSelectedModel(selectedSa.key) !== selectedSa.prod_model ? 'cb-dropdown-trigger--override' : ''"
                    @click.stop="toggleModelDropdown(selectedSa.key)">
                <span x-text="modelDisplayLabel(selectedSa)"></span>
                <template x-if="getSelectedModel(selectedSa.key) && getSelectedModel(selectedSa.key) !== selectedSa.prod_model">
                    <span class="pm-pill pm-pill--override" style="font-size:9px;padding:1px 6px;">
                        <span class="pm-pill__dot"></span>Override
                    </span>
                </template>
                <template x-if="!getSelectedModel(selectedSa.key) || getSelectedModel(selectedSa.key) === selectedSa.prod_model">
                    <span class="pm-pill pm-pill--prod-green" style="font-size:9px;padding:1px 6px;">
                        <span class="pm-pill__dot"></span>Prod
                    </span>
                </template>
                <svg class="cb-dropdown-chevron" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
                </svg>
            </button>
            <div class="cb-dropdown-menu" x-show="modelDropdowns[selectedSa.key]" x-cloak x-transition>
                <template x-for="(models, provider) in groupedModels" :key="provider">
                    <template x-for="m in models" :key="m.name">
                        <div class="cb-dropdown-option"
                             @click="setRowModel(selectedSa.key, m.name); modelDropdowns[selectedSa.key] = false">
                            <span x-text="m.name"></span>
                            <template x-if="m.name === selectedSa.prod_model">
                                <span class="pm-pill pm-pill--prod-green" style="font-size:9px;padding:1px 6px;">
                                    <span class="pm-pill__dot"></span>Prod
                                </span>
                            </template>
                            <template x-if="effectiveModel(selectedSa) === m.name">
                                <svg class="cb-dropdown-check" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                                </svg>
                            </template>
                        </div>
                    </template>
                </template>
            </div>
        </div>
    </div>

    {# ─── Temperature ─────────────────────────────────────────────────── #}
    <div class="cb-field cb-field--narrow">
        <label class="cb-field-label">Temp</label>
        <div class="cb-dropdown" @click.outside="tempDropdowns[selectedSa.key] = false">
            <button type="button"
                    class="cb-dropdown-trigger"
                    :class="rows[selectedSa.key]?.temperature != null && rows[selectedSa.key]?.temperature !== selectedSa.prod_temperature ? 'cb-dropdown-trigger--override' : ''"
                    @click.stop="tempDropdowns[selectedSa.key] = !tempDropdowns[selectedSa.key]; tempSearch[selectedSa.key] = ''">
                <span x-text="formatTemp(effectiveTemp(selectedSa))"></span>
                <template x-if="rows[selectedSa.key]?.temperature != null && rows[selectedSa.key]?.temperature !== selectedSa.prod_temperature">
                    <span class="pm-pill pm-pill--override" style="font-size:9px;padding:1px 6px;">
                        <span class="pm-pill__dot"></span>Override
                    </span>
                </template>
                <template x-if="!(rows[selectedSa.key]?.temperature != null && rows[selectedSa.key]?.temperature !== selectedSa.prod_temperature)">
                    <span class="pm-pill pm-pill--prod-green" style="font-size:9px;padding:1px 6px;">
                        <span class="pm-pill__dot"></span>Prod
                    </span>
                </template>
                <svg class="cb-dropdown-chevron" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
                </svg>
            </button>
            <div class="cb-dropdown-menu" x-show="tempDropdowns[selectedSa.key]" x-cloak x-transition>
                <div class="cb-dropdown-search">
                    <input type="text"
                           class="cb-dropdown-search-input"
                           placeholder="Search…"
                           x-model="tempSearch[selectedSa.key]"
                           @click.stop
                           x-ref="'tempSearchInput'"
                           @keydown.escape="tempDropdowns[selectedSa.key] = false" />
                </div>
                <template x-for="t in filteredTempOptions(selectedSa.key)" :key="t">
                    <div class="cb-dropdown-option"
                         @click="setRowTemperature(selectedSa.key, t); tempDropdowns[selectedSa.key] = false">
                        <span x-text="formatTemp(t)"></span>
                        <template x-if="t === selectedSa.prod_temperature">
                            <span class="pm-pill pm-pill--prod-green" style="font-size:9px;padding:1px 6px;">
                                <span class="pm-pill__dot"></span>Prod
                            </span>
                        </template>
                        <template x-if="effectiveTemp(selectedSa) === t">
                            <svg class="cb-dropdown-check" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                            </svg>
                        </template>
                    </div>
                </template>
            </div>
        </div>
    </div>
</div>

{# ─── Reset to prod button ──────────────────────────────────────────── #}
<button type="button"
        class="cb-reset-btn"
        :disabled="!isOverridden(selectedSa.key)"
        :class="!isOverridden(selectedSa.key) ? 'opacity-40 cursor-default' : ''"
        @click="clearRow(selectedSa.key)">
    <svg class="h-3.5 w-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/>
    </svg>
    Reset all to production defaults
</button>