{% from "_macros.html" import icon %}
{#
  One connection: an editable form plus its current status.

  Swapped in place by the "Test & refresh" button, so this fragment has to be
  able to render on its own as well as inside the list.
#}
<section class="card connection" id="connection-{{ connection.id }}">
  <form method="post" action="/admin/connections/{{ connection.id }}" class="form-grid">
    <div class="card__header">
      <div class="row" style="gap: var(--sp-2); min-width: 0">
        <span class="status-dot {{ 'is-ok' if connection.enabled and not connection.last_error
                                    else 'is-bad' if connection.last_error else 'is-off' }}"
              aria-hidden="true"></span>
        <strong class="truncate">{{ connection.name }}</strong>
        {% if model_count is defined %}
        <span class="badge">{{ model_count }} model{{ '' if model_count == 1 else 's' }}</span>
        {% endif %}
        {% if not connection.enabled %}
        <span class="badge">disabled</span>
        {% endif %}
      </div>

      <div class="btn-row">
        <button class="btn btn--sm" type="submit"
                hx-post="/admin/connections/{{ connection.id }}/test"
                hx-target="#connection-{{ connection.id }}" hx-swap="outerHTML"
                formnovalidate>
          {{ icon("refresh", "icon--sm") }} Test &amp; refresh
        </button>
        <button class="btn btn--sm btn--primary" type="submit">Save</button>
      </div>
    </div>

    {% if message %}
    <div class="alert alert--{{ message_kind|default('success') }}">
      {% if message_kind == "error" %}{{ icon("warning", "alert__icon") }}{% endif %}
      <span>{{ message }}</span>
    </div>
    {% elif connection.last_error %}
    <div class="alert alert--error">
      {{ icon("warning", "alert__icon") }}
      <span>{{ connection.last_error }}</span>
    </div>
    {% endif %}

    <div class="field">
      <label class="field__label" for="name-{{ connection.id }}">Name</label>
      <input class="input" id="name-{{ connection.id }}" name="name"
             value="{{ connection.name }}" required>
    </div>

    <div class="field">
      <label class="field__label" for="url-{{ connection.id }}">Base URL</label>
      <input class="input input--mono" id="url-{{ connection.id }}" name="base_url"
             value="{{ connection.base_url }}" required>
    </div>

    <div class="field">
      <label class="field__label" for="key-{{ connection.id }}">API key</label>
      <input class="input input--mono" id="key-{{ connection.id }}" name="api_key"
             type="password" autocomplete="off"
             value="{{ unchanged if connection.api_key_encrypted else '' }}"
             placeholder="No key set">
      <p class="field__hint">
        {% if connection.api_key_encrypted %}
          Currently <code>{{ masked }}</code>. Leave the dots alone to keep it,
          or clear the field to remove the key entirely.
        {% else %}
          No key is stored for this endpoint.
        {% endif %}
      </p>
    </div>

    <div class="field">
      <label class="field__label" for="unload-{{ connection.id }}">Unload URL</label>
      <div class="btn-row">
        <input class="input input--mono" id="unload-{{ connection.id }}" name="unload_url"
               value="{{ connection.unload_url }}" placeholder="No unload call"
               style="flex: 1; min-width: 0">
        <select class="select" name="unload_method" style="flex: none">
          <option value="POST" {{ 'selected' if connection.unload_method != 'GET' }}>POST</option>
          <option value="GET" {{ 'selected' if connection.unload_method == 'GET' }}>GET</option>
        </select>
      </div>
      <p class="field__hint">
        Only used by image generation's Preserve VRAM, to free this endpoint's
        memory while ComfyUI works. llama-swap answers <code>GET /unload</code>.
        Leave it empty for anything on another machine — its memory is not the
        memory being freed, and it would be an unexplained request.
      </p>
    </div>

    <div class="field">
      <label class="checkbox">
        <input type="checkbox" name="enabled" value="true"
               {{ 'checked' if connection.enabled }}>
        <span>Enabled — its models are offered in chats</span>
      </label>
    </div>

    <div class="card__footer">
      <span class="text-xs faint">
        {% if connection.last_checked_at %}
          Last checked {{ connection.last_checked_at.strftime("%Y-%m-%d %H:%M") }} UTC
        {% else %}
          Never checked
        {% endif %}
      </span>
      <button class="btn btn--sm btn--danger" type="submit"
              formaction="/admin/connections/{{ connection.id }}/delete" formnovalidate
              data-confirm-button="Delete the connection “{{ connection.name }}”? Existing chats keep their history.">
        {{ icon("trash", "icon--sm") }} Delete
      </button>
    </div>
  </form>
</section>