{# Model area partial — swapped in via HTMX when a provider is selected.
   Context variables: models, supports_custom, error, error_hint, message,
                      selector_id, provider_name, default_model_id, provider_type #}

{% if error %}
{# State: unreachable or error #}
<div style="border: 1px solid #ef4444; border-radius: 0.5rem; padding: 0.5rem 0.75rem;
            background: rgba(239,68,68,0.08); font-size: 0.8rem;">
    <div style="color: #ef4444; font-weight: 600; margin-bottom: 0.15rem;">{{ error }}</div>
    {% if error_hint %}
    <div style="opacity: 0.7;">{{ error_hint }}</div>
    {% endif %}
</div>
<div style="display: flex; justify-content: flex-start; margin-top: 0.35rem;">
    <button type="button" class="btn btn-xs btn-ghost"
            onclick="qaiRefetchModels({{ selector_id | tojson }})">
        &#8635; Retry
    </button>
</div>

{% elif not models and message %}
{# State: reachable but empty model list (or no API key yet) #}
<div style="border: 1px solid #f59e0b; border-radius: 0.5rem; padding: 0.5rem 0.75rem;
            background: rgba(245,158,11,0.08); font-size: 0.8rem;">
    <div style="color: #f59e0b; font-weight: 600; margin-bottom: 0.15rem;">No models loaded</div>
    <div style="opacity: 0.7;">{{ message }}</div>
</div>
<div style="display: flex; justify-content: flex-start; margin-top: 0.35rem;">
    <button type="button" class="btn btn-xs btn-ghost"
            onclick="qaiRefetchModels({{ selector_id | tojson }})">
        &#8635; Refresh models
    </button>
</div>

{% elif not models and supports_custom %}
{# State: aggregator / custom — free-text model ID only #}
<input type="text" name="model" required
       id="{{ selector_id }}-custom-direct"
       placeholder="e.g. {{ provider_name }}/model-id"
       class="input input-bordered input-sm w-full" />

{% else %}
{# State: models loaded (enumerated or curated) #}
{% if message %}
<div style="border: 1px solid #f59e0b; border-radius: 0.5rem; padding: 0.4rem 0.65rem;
            background: rgba(245,158,11,0.06); font-size: 0.75rem; margin-bottom: 0.35rem;">
    <span style="color: #f59e0b;">&#9888;</span>
    <span style="opacity: 0.7;">{{ message }}</span>
</div>
{% endif %}
<select name="model" required
        class="select select-bordered select-sm w-full"
        onchange="toggleCustomModel_{{ selector_id }}(this)">
    <option value="" disabled {% if not default_model_id %}selected{% endif %}>Select a model...</option>
    {% for m in models %}
    <option value="{{ m.id }}"
            {% if m.id == default_model_id %}selected{% endif %}>{{ m.label }}</option>
    {% endfor %}
    {% if supports_custom %}
    <option value="__custom__">Custom model id...</option>
    {% endif %}
</select>

{% if provider_type == "local" %}
<div style="display: flex; justify-content: flex-end; margin-top: 0.25rem;">
    <button type="button" class="btn btn-xs btn-ghost"
            onclick="qaiRefetchModels({{ selector_id | tojson }})">
        &#8635; Refresh models
    </button>
</div>
{% endif %}

{% if supports_custom %}
<div id="{{ selector_id }}-custom-wrap" class="hidden mt-1">
    <input type="text" id="{{ selector_id }}-custom-input"
           placeholder="provider/model-id"
           class="input input-bordered input-sm w-full" />
</div>
<script>
function toggleCustomModel_{{ selector_id }}(sel) {
    var wrap = document.getElementById('{{ selector_id }}-custom-wrap');
    var inp = document.getElementById('{{ selector_id }}-custom-input');
    if (sel.value === '__custom__') {
        wrap.classList.remove('hidden');
        inp.name = 'model';
        inp.required = true;
        sel.name = '';
        sel.required = false;
    } else {
        wrap.classList.add('hidden');
        inp.name = '';
        inp.required = false;
        sel.name = 'model';
        sel.required = true;
    }
}
</script>
{% endif %}
{% endif %}