{% extends "settings_base.html" %}
{% block settings_content %}
<section class="settings-grid v05-grid">
  <article class="card registry-card">
    <div class="card-header"><div><h2>Provider Registry</h2><p>Base URLs, auth environment variables, capabilities, and fallback status.</p></div><a class="button primary" href="#provider-editor">Add provider</a></div>
    <form class="filter-row" data-settings-filters>
      <label class="search-bar"><span>Search providers</span><input name="search" placeholder="Search providers…"></label>
      <label><span>Status</span><select name="status"><option value="all">All status</option><option value="active">Active</option><option value="inactive">Inactive</option></select></label>
      <label><span>Currency</span><select name="currency" data-currency-options><option value="">All currencies</option></select></label>
      <button class="button ghost" type="submit">Apply filters</button>
    </form>
    <div class="table-shell">
      <table class="data-table">
        <thead><tr><th scope="col">Provider</th><th scope="col">Slug</th><th scope="col">Base URL</th><th scope="col">Currency</th><th scope="col">Status</th><th scope="col">Models / Routes</th><th scope="col">Actions</th></tr></thead>
        <tbody data-settings-providers><tr><td colspan="7" class="empty">Loading providers…</td></tr></tbody>
      </table>
    </div>
    <div data-settings-pagination></div>
  </article>

  <form class="card form-card editor-card" id="provider-editor" method="post" action="/admin/settings/providers" data-settings-action="provider-save" data-provider-editor>
    <div class="card-header"><div><h2>Selected Provider</h2><p>Select a provider row or save a new provider.</p></div></div>
    <input type="hidden" name="original_slug">
    <div class="form-grid two-col">
      <label class="form-field"><span>Provider name</span><input name="name" required data-provider-editor-field="name"></label>
      <label class="form-field"><span>Slug</span><input name="slug" required data-provider-editor-field="slug"></label>
      <label class="form-field wide"><span>Base URL</span><input name="upstream_url" data-provider-editor-field="upstream_url"></label>
      <label class="form-field"><span>Currency</span><input name="currency" value="USD" required data-provider-editor-field="currency"></label>
      <label class="form-field"><span>API key env var</span><input name="api_key_env" data-provider-editor-field="api_key_env"></label>
      <label class="check switch-line"><input type="hidden" name="active" value="no"><input type="checkbox" name="active" value="yes" checked data-provider-editor-field="active"><span>Active</span></label>
      <label class="check switch-line"><input type="checkbox" name="is_default_fallback" value="yes" data-provider-editor-field="is_default_fallback"><span>Default for fallback</span></label>
    </div>
    <fieldset class="chip-fieldset">
      <legend>Supported capabilities</legend>
      <label class="check"><input type="checkbox" name="capability_text" value="yes" checked data-provider-editor-field="capability_text"> Text</label>
      <label class="check"><input type="checkbox" name="capability_vision" value="yes" data-provider-editor-field="capability_vision"> Vision</label>
      <label class="check"><input type="checkbox" name="capability_tool_calling" value="yes" checked data-provider-editor-field="capability_tool_calling"> Tool calling</label>
    </fieldset>
    <div class="button-row"><button class="button primary" type="submit">Save provider</button><button class="button ghost" type="button" data-run-provider-test>Test provider</button><button class="button ghost" type="button" data-clear-provider-editor>Clear</button></div>
    <div class="result-panel" data-provider-test-result hidden></div>
    <p class="form-message" data-form-message aria-live="polite"></p>
  </form>

  <form class="card form-card" method="post" action="/admin/settings/upstream-defaults" data-settings-action="upstream-defaults">
    <div class="card-header"><div><h2>Fallback Provider and Model</h2><p>Choose where unmatched JSON model names are sent.</p></div></div>
    <div class="form-grid two-col">
      <label class="form-field wide"><span>Pass-through upstream URL</span><input name="upstream_url" value="{{ upstream_url }}" required></label>
      <label class="form-field"><span>Fallback provider</span><select name="default_provider_slug" data-provider-options data-enhanced-select data-enhanced-select-label="Fallback provider"><option value="">No provider</option>{% for provider in providers %}<option value="{{ provider.slug }}" {% if provider.slug == default_provider_slug %}selected{% endif %}>{{ provider.name }}</option>{% endfor %}</select></label>
      <label class="form-field"><span>Fallback model</span><input name="default_model" value="{{ default_model }}"></label>
      <label class="check switch-line"><input type="hidden" name="fallback_enabled" value="no"><input type="checkbox" name="fallback_enabled" value="yes" {% if fallback_enabled %}checked{% endif %}><span>Enable fallback</span></label>
    </div>
    <input type="hidden" name="return_to" value="/admin/settings/providers">
    <p class="muted">If fallback is disabled or incomplete, unmatched models use the pass-through upstream unchanged.</p>
    <div class="button-row"><button class="button primary" type="submit">Save fallback defaults</button></div>
    <p class="form-message" data-form-message aria-live="polite"></p>
  </form>

  <article class="card diagnostics-card health-card">
    <div class="card-header"><div><h2>Provider Health</h2><p>Lightweight checks call configured <code>/models</code> endpoints.</p></div><button class="button ghost" type="button" data-provider-health>Run health checks</button></div>
    <div class="table-shell"><table class="data-table" data-provider-health-table><thead><tr><th scope="col">Provider</th><th scope="col">Last check</th><th scope="col">Latency</th><th scope="col">Auth</th><th scope="col">Result</th></tr></thead><tbody data-settings-provider-health><tr><td colspan="5" class="empty">Loading provider health…</td></tr></tbody></table></div>
  </article>
</section>
{% endblock %}