{% extends "base.html" %}
{% block title %}Providers - Invincible{% endblock %}
{% block content %}
<style>
  .prov-mark {
    width: 2.1rem; height: 2.1rem; border-radius: 6px;
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 0.95rem; flex-shrink: 0;
    color: var(--mark, var(--accent-ink));
    background: color-mix(in srgb,
      var(--mark, var(--accent)) 14%, transparent);
    border: 1px solid color-mix(in srgb,
      var(--mark, var(--accent)) 45%, transparent);
  }
  .prov-mark-sm { width: 1.6rem; height: 1.6rem; font-size: 0.78rem;
                  border-radius: 5px; }
  .provider-card .label {
    font-size: 0.95rem; letter-spacing: 0; text-transform: none;
    color: var(--ink); font-weight: 600;
  }
  .prov-card-head { display: flex; align-items: center; gap: 0.7rem;
                    margin-bottom: 0.6rem; }
  .status-connected { color: var(--ok); }
  .status-not-connected { color: var(--muted); }
  .provider-card.connected .label { color: var(--ink); }
  details.custom-provider {
    border: 1px dashed var(--border); border-radius: var(--radius);
    padding: 0.85rem 1.05rem; margin: 1rem 0; background: transparent;
  }
  details.custom-provider summary { cursor: pointer; color: var(--muted);
                                    font-size: 0.88rem; }
  details.custom-provider summary:hover { color: var(--accent-ink); }
  details.custom-provider[open] summary { margin-bottom: 0.7rem; }
  .routing-form { display: flex; flex-direction: column; gap: 0.55rem;
                  max-width: 46rem; }
  .routing-form label.radio { display: flex; gap: 0.5rem; align-items: baseline;
                              color: var(--ink); cursor: pointer; }
  .routing-form label.radio input { flex-shrink: 0; }
  .chain-steps, .pinned-row { margin-left: 1.4rem; display: flex;
                              flex-direction: column; gap: 0.4rem; }
  .pinned-row { flex-direction: row; align-items: center; gap: 0.6rem; }
  .chain-step { display: flex; align-items: center; gap: 0.5rem; }
  .chain-step .chain-name { min-width: 8rem; }
  .chain-step input[type="text"], .pinned-row input[type="text"] {
    flex: 0 1 16rem; }
  .pinned-row select { flex: 0 1 12rem; }
</style>

<h2>Provider connections</h2>
<p class="muted">Chat requests route only through providers you connect
here. The model you save per connection is just the default &mdash; any
request that names a <code>model</code> is routed with that model
instead, so you can use any model your provider offers.</p>

{% if connected %}<p class="banner-ok">Provider connected.</p>{% endif %}
{% if tested == 'ok' %}<p class="banner-ok">Connection test passed.</p>
{% elif tested == 'failed' %}<p class="banner">Connection test failed &mdash;
check the API key or base URL.</p>{% endif %}
{% if test_error %}<p class="banner">Connection test blocked: the base URL no
longer resolves to a public address.</p>{% endif %}

<h3 id="connect">Connect a provider</h3>
<div class="cards">
  {% for c in catalog %}
  <div class="card provider-card{% if c.key in connected_keys %} connected{% endif %}">
    <div class="prov-card-head">
      <span class="prov-mark" style="--mark: {{ c.color }}">{{ c.label[0] | upper }}</span>
      <div>
        <span class="label">{{ c.label }}</span>
        {% if c.key in connected_keys %}
        <p class="muted status-connected">Connected</p>
        {% else %}
        <p class="muted status-not-connected">Not connected</p>
        {% endif %}
      </div>
    </div>
    {% if c.key not in connected_keys %}
    <form method="post" action="/providers/mine" class="connect-form">
      <input type="hidden" name="catalog_key" value="{{ c.key }}">
      <input type="text" name="provider_name" value="{{ c.label }}"
             maxlength="80" aria-label="Connection name" required>
      <input type="text" name="model_id" value="{{ c.model_id }}"
             aria-label="Model id" title="Default model - requests naming a model override this"
             required>
      <input type="text" name="base_url" value="{{ c.base_url }}"
             aria-label="Base URL" required>
      <input type="password" name="api_key" placeholder="API key"
             autocomplete="off" required>
      <button type="submit">Connect</button>
    </form>
    {% endif %}
  </div>
  {% endfor %}
</div>

<details class="custom-provider">
  <summary>+ Add a custom provider</summary>
  <form method="post" action="/providers/mine" class="connect-form">
    <input type="text" name="provider_name" placeholder="Name"
           maxlength="80" required>
    <input type="text" name="base_url" placeholder="https://api.example.com/v1"
           required>
    <input type="text" name="model_id" placeholder="default model id"
           title="Default model - requests naming a model override this"
           required>
    <input type="password" name="api_key" placeholder="API key"
           autocomplete="off" required>
    <button type="submit">Connect</button>
  </form>
</details>

<h3>Connected providers</h3>
{% if rows %}
<div class="table-scroll">
<table>
  <thead><tr><th></th><th>Name</th><th>Model</th><th>Base URL</th>
      <th>Key</th><th>Status</th><th></th></tr></thead>
  {% include "_provider_rows.html" %}
</table>
</div>
{% else %}
<p class="muted empty">No providers connected yet. <a href="#connect">Connect
your first provider &rarr;</a></p>
{% endif %}

{% if rows %}
<h3 id="routing">Routing</h3>
<p class="muted">How requests pick among your connected providers.</p>
{% if routing_saved %}<p class="banner-ok">Routing saved.</p>{% endif %}
<form method="post" action="/routing/mine" class="routing-form">
  <label class="radio"><input type="radio" name="mode" value="auto"
    {% if routing_mode != 'chain' and routing_mode != 'pinned' %}checked{% endif %}>
    <span><strong>Auto</strong> &mdash; try my providers in order, using the
    model each request names.</span></label>
  <label class="radio"><input type="radio" name="mode" value="chain"
    {% if routing_mode == 'chain' %}checked{% endif %}>
    <span><strong>Chain</strong> &mdash; try each provider in my order with
    the model I set per step. A request naming a step's model starts there;
    the rest follow as cross-model fallbacks.</span></label>
  <div class="chain-steps">
    {% for r in rows %}
    <div class="chain-step">
      {# formaction rides the routing form's submit to the move endpoint
         (nested <form> would be invalid HTML); the endpoint ignores the
         routing fields and only reads direction. #}
      <button type="submit" class="linklike move-provider" title="Move earlier"
              formaction="/providers/mine/{{ r.id }}/move"
              name="direction" value="up"
              {% if loop.first %}disabled{% endif %}>&#9650;</button>
      <button type="submit" class="linklike move-provider" title="Move later"
              formaction="/providers/mine/{{ r.id }}/move"
              name="direction" value="down"
              {% if loop.last %}disabled{% endif %}>&#9660;</button>
      <span class="prov-mark prov-mark-sm" style="--mark: {{ r.color }}">{{ r.provider_name[0] | upper }}</span>
      <span class="chain-name">{{ r.provider_name }}</span>
      <input type="hidden" name="chain_{{ loop.index0 }}_credential_id"
             value="{{ r.id }}">
      <input type="text" name="chain_{{ loop.index0 }}_model"
             value="{{ chain_prefill.get(r.id, r.model_id) }}" maxlength="200"
             aria-label="Model for {{ r.provider_name }}"
             title="Model to request from this provider">
    </div>
    {% endfor %}
  </div>
  <label class="radio"><input type="radio" name="mode" value="pinned"
    {% if routing_mode == 'pinned' %}checked{% endif %}>
    <span><strong>Pinned</strong> &mdash; always this provider and model;
    failures surface as-is, with no fallback.</span></label>
  <div class="pinned-row">
    <select name="pinned_credential_id" aria-label="Pinned provider">
      {% for r in rows %}
      <option value="{{ r.id }}" {% if r.id == pinned_credential_id %}selected{% endif %}>{{ r.provider_name }}</option>
      {% endfor %}
    </select>
    <input type="text" name="pinned_model" value="{{ pinned_model }}"
           maxlength="200" placeholder="model id"
           aria-label="Pinned model">
  </div>
  <div><button type="submit">Save routing</button></div>
</form>
{% endif %}
{% endblock content %}