{# Two-step provider/model selector.
   Required context: selector_id (unique per form), providers (configured list) #}

<div class="form-control">
    <label class="label"><span class="label-text">Provider</span></label>
    <select name="provider" required
            id="{{ selector_id }}-provider"
            class="select select-bordered select-sm w-full">
        <option value="" disabled selected>
            Select a provider...
        </option>
        {% for p in providers %}
        <option value="{{ p.name }}">
            {{ p.label }}
        </option>
        {% endfor %}
    </select>
</div>

<div class="form-control">
    <label class="label"><span class="label-text">Model</span></label>
    <div id="{{ selector_id }}-model-area">
        <select disabled class="select select-bordered select-sm w-full opacity-40">
            <option>Select a provider first</option>
        </select>
    </div>
</div>

<script>
/** Shared model-fetch helper used by parent forms and retry buttons. */
window.qaiRefetchModels = function(selectorId) {
    var provEl = document.getElementById(selectorId + '-provider');
    if (!provEl || !provEl.value) return;
    var url = '/api/providers/' + encodeURIComponent(provEl.value)
              + '/models?selector_id=' + encodeURIComponent(selectorId);
    var baseUrlEl = document.getElementById(selectorId + '-baseurl');
    if (baseUrlEl && baseUrlEl.value.trim()) {
        url += '&base_url=' + encodeURIComponent(baseUrlEl.value.trim());
    }
    var headers = {};
    var apiKeyEl = document.getElementById(selectorId + '-apikey');
    if (apiKeyEl && apiKeyEl.value.trim()) {
        headers['X-Assist-Api-Key'] = apiKeyEl.value.trim();
    }
    htmx.ajax('GET', url, {target: '#' + selectorId + '-model-area', headers: headers});
};

/** Reset the model area to a disabled placeholder with a custom message. */
window.qaiResetModelArea = function(selectorId, msg) {
    var area = document.getElementById(selectorId + '-model-area');
    if (area) {
        area.innerHTML = '<select disabled class="select select-bordered select-sm w-full opacity-40">'
            + '<option>' + (msg || 'Select a provider first') + '</option></select>';
    }
};
</script>