{% 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">{{ t("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">{{ t("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 }}">{{ t("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 }}">{{ t("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 }}">{{ t("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="{{ t('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 }}">{{ t("Unload URL") }}</label>
      <div class="btn-row">
        <input class="input input--mono" id="unload-{{ connection.id }}" name="unload_url"
               value="{{ connection.unload_url }}" placeholder="{{ t('No unload call') }}"
               style="flex: 1; min-width: 0">
        <select class="select" name="unload_method" aria-label="{{ t('How to ask it to unload') }}" style="flex: none">
          <option value="POST" {{ 'selected' if connection.unload_method != 'GET' }}>{{ t("POST") }}</option>
          <option value="GET" {{ 'selected' if connection.unload_method == 'GET' }}>{{ t("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="field__label" for="headers-{{ connection.id }}">{{ t("Extra headers") }}</label>
      <textarea class="textarea input--mono" id="headers-{{ connection.id }}"
                name="extra_headers" rows="2"
                placeholder="{{ t('HTTP-Referer: https://example.org') }}">{% for name, value in (connection.extra_headers_json or {}).items() %}{{ name }}: {{ value }}
{% endfor %}</textarea>
      <p class="field__hint">
        One <code>Name: value</code> per line, sent with every request to this
        endpoint. OpenRouter reads <code>HTTP-Referer</code> and
        <code>X-Title</code> and attributes your usage with them. Leave it empty
        unless an endpoint has asked for something.
      </p>
    </div>

    <div class="field">
      <label class="checkbox">
        <input type="checkbox" name="enabled" value="true"
               {{ 'checked' if connection.enabled }}>
        <span>{{ t("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>