{#
  SETTINGS · Providers & Models (R4b, READ-ONLY dynamic catalog).

  A live, grouped catalog of every model each provider offers. OpenRouter's
  public list (no auth) is ALWAYS fetched — it's the richest source AND the
  cross-reference that backfills pricing for the key-only providers. Providers
  whose API key is set in System (Anthropic / OpenAI / Fireworks) are live-fetched
  + merged. The catalog is cached ~15 min server-side (app.providers.get_catalog);
  a network failure degrades to cached/empty + a note (never a crash).

  This tab is READ-ONLY in legacy mode. Provider keys are managed in the
  Providers surface when it is enabled for this edition.

  Context:
    catalog : view model from app.providers.view_catalog():
      {groups:[{provider,label,count,configured,note,brand_svg,rows:[...]}],
       total, configured_count, notes:[...], age_human, from_cache,
       openrouter_count}
      where each row is
      {id, display_name, type, reasoning, has_reasoning, price_in, price_out,
       window, max_output, source, source_tag:{label,css}, deprecated}
    selected_key : current project key (kept on the refresh URL)
#}
<div class="set-inner">
  <div class="set-page on" id="setpage-providers">
    <div class="set-page-h">Models</div>
    <div class="set-page-sub">A live catalog of every model each configured provider offers — grouped by provider with <b>type</b>, <b>reasoning tiers</b>, <b>input/output price</b> (per&nbsp;1M&nbsp;tokens), and <b>context window</b>. <b>OpenRouter</b>'s public list is always shown (and backfills pricing for the others). <b>Read-only</b> — add providers &amp; API keys in the Providers surface when it is enabled for this edition.</div>

    {# read-only / where-to-add-keys banner #}
    <div class="set-banner">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
      <div><b>Read-only.</b> This catalog is fetched live from each provider's model API. To enable a provider's own models, add its API key in the <b>Providers</b> surface when it is enabled for this edition — OpenRouter needs no key and is always listed.</div>
    </div>

    {# catalog meta strip: counts + freshness + a manual refresh #}
    <div class="prov-meta">
      <div class="prov-meta-l">
        <span class="prov-stat"><b>{{ catalog.total }}</b> model{{ 's' if catalog.total != 1 else '' }}</span>
        <span class="prov-dot">·</span>
        <span class="prov-stat"><b>{{ catalog.configured_count }}</b> provider{{ 's' if catalog.configured_count != 1 else '' }} live</span>
        <span class="prov-dot">·</span>
        <span class="prov-fresh">{{ 'cached' if catalog.from_cache else 'live' }} · updated {{ catalog.age_human }}</span>
      </div>
      <button
        class="prov-refresh"
        type="button"
        title="Re-fetch the catalog"
        hx-get="/settings/providers?project={{ selected_key or '' }}"
        hx-target="#settings-body"
        hx-swap="innerHTML"
      >
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M21 12a9 9 0 1 1-2.6-6.4M21 4v5h-5"/></svg>
        Refresh
      </button>
    </div>

    {# global notes (e.g. OpenRouter unreachable, serving stale cache) #}
    {% if catalog.notes %}
    <div class="set-banner sys-saved err" role="alert">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0z"/><path d="M12 9v4M12 17h.01"/></svg>
      <div>
        {% for n in catalog.notes %}<div>{{ n }}</div>{% endfor %}
      </div>
    </div>
    {% endif %}

    {# ----------------------------------------------------------------------
       Grouped catalog. Each provider is a COLLAPSIBLE card reusing the System
       tab's <details class="env-group"> / <summary class="env-summary"> pattern
       (visual parity). Collapsed BY DEFAULT — the summary still carries the model
       count (e.g. "OpenRouter · 312 models") so a collapsed row is fully readable
       without scrolling past hundreds of rows to reach the next provider.
    ---------------------------------------------------------------------- #}
    {% for g in catalog.groups %}
    <details class="env-group prov-group {{ 'is-unconfigured' if not g.configured else '' }}">
      <summary class="env-summary prov-summary">
        <svg class="eg-car" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M9 6l6 6-6 6"/></svg>
        <span class="eg-ic prov-mark prov-mark--{{ g.provider }}" aria-hidden="true">{{ g.brand_svg | safe }}</span>
        <span class="prov-summary-id">
          <span class="eg-t prov-name">{{ g.label }}</span>
          {% if g.note %}<span class="eg-s prov-summary-note">{{ g.note }}</span>{% endif %}
        </span>
        <span class="eg-meta prov-summary-meta">
          {% if g.configured %}
          <span class="eg-count prov-count">{{ g.count }} model{{ 's' if g.count != 1 else '' }}</span>
          {% else %}
          <span class="prov-pill-off">not configured</span>
          {% endif %}
        </span>
      </summary>

      <div class="env-body prov-body">
      {% if g.rows %}
      <div class="prov-table-wrap">
        <table class="prov-table">
          <thead>
            <tr>
              <th class="c-name">Model</th>
              <th class="c-type">Type</th>
              <th class="c-reason">Reasoning</th>
              <th class="c-price">In&nbsp;/&nbsp;Mtok</th>
              <th class="c-price">Out&nbsp;/&nbsp;Mtok</th>
              <th class="c-ctx">Context</th>
              <th class="c-src">Source</th>
            </tr>
          </thead>
          <tbody>
            {% for m in g.rows %}
            <tr class="{{ 'is-deprecated' if m.deprecated else '' }}">
              <td class="c-name">
                <span class="m-name">{{ m.display_name }}</span>
                <span class="m-id" title="{{ m.id }}">{{ m.id }}</span>
              </td>
              <td class="c-type"><span class="m-type m-type--{{ m.type }}">{{ m.type }}</span></td>
              <td class="c-reason">
                {% if m.has_reasoning %}
                <span class="m-reason">{{ m.reasoning }}</span>
                {% else %}
                <span class="m-dash">—</span>
                {% endif %}
              </td>
              <td class="c-price">{{ m.price_in }}</td>
              <td class="c-price">{{ m.price_out }}</td>
              <td class="c-ctx">{{ m.window }}</td>
              <td class="c-src"><span class="m-src m-src--{{ m.source_tag.css }}">{{ m.source_tag.label }}</span></td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
      {% else %}
      <div class="prov-empty">
        {% if g.note %}{{ g.note }}{% else %}No models returned.{% endif %}
      </div>
      {% endif %}
      </div>
    </details>
    {% endfor %}

    <p class="prov-foot">
      Pricing &amp; reasoning gaps for key-only providers are backfilled from OpenRouter's public catalog
      ({{ catalog.openrouter_count }} models) and tagged <span class="m-src m-src--merged">live&nbsp;+&nbsp;suppl.</span> /
      <span class="m-src m-src--supplement">supplement</span>. Live on load, cached ~15&nbsp;min.
    </p>
  </div>
</div>