{% extends "base.html" %}
{% block title %}Connections — SimpleAudit{% endblock %}
{% block head %}
<style>
  dialog.sa-dialog::backdrop { background: rgb(0 0 0 / .6); backdrop-filter: blur(2px); }
  dialog.sa-dialog { color: inherit; }
  .conn-card:target { outline: 2px solid rgb(108 140 255 / .6); outline-offset: 2px; }
</style>
{% endblock %}
{% block content %}
<div class="flex flex-wrap items-start justify-between gap-3 mb-5">
  <div>
    <h1 class="text-lg font-semibold text-gray-100">Connections</h1>
    <p class="text-sm text-gray-500 mt-0.5 max-w-2xl">
      {{ connections|length }} connection{{ connections|length|pluralize }} · {{ model_total }} model{{ model_total|pluralize }}.
      A connection is one server and its API key; register the models it serves to use them as target, auditor or judge.
    </p>
  </div>
  <div class="flex flex-wrap items-center gap-2 w-full sm:w-auto">
    {% if connections %}
    <input type="search" id="model-search" placeholder="Filter connections and models…" aria-label="Filter connections and models"
           class="flex-1 min-w-0 sm:flex-none sm:w-60 px-2.5 py-1.5 rounded-lg bg-surface-overlay border border-gray-700 text-xs text-gray-200 focus:outline-none focus:ring-2 focus:ring-accent/50">
    <button type="button" id="check-all" title="Ping every connection and check which models it serves"
            class="px-3 py-1.5 rounded-lg bg-surface-overlay border border-gray-700 text-xs text-gray-300 hover:text-white whitespace-nowrap">Check all</button>
    {% endif %}
    <button type="button" data-write data-conn-open="new"
            class="px-3 py-1.5 rounded-lg bg-accent text-white text-xs font-medium hover:bg-accent-hover whitespace-nowrap">+ Add connection</button>
  </div>
</div>

{% if connections %}
<div class="space-y-4" id="conn-list">
  {% for conn in connections %}
  <section id="conn-{{ conn.id }}" class="conn-card bg-surface-raised rounded-xl border border-gray-800 scroll-mt-6 {% if not conn.enabled %}opacity-70{% endif %}"
           data-conn="{{ conn.id }}" data-search="{{ conn.name|lower }} {{ conn.base_url|lower }} {{ conn.provider|lower }} {{ conn.description|lower }}">
    <!-- Connection header -->
    <header class="flex flex-wrap items-center gap-x-3 gap-y-2 px-4 py-3 border-b border-gray-800">
      <span class="w-9 h-9 shrink-0 rounded-lg bg-accent/15 text-accent font-semibold flex items-center justify-center uppercase" aria-hidden="true">{{ conn.name|slice:":1" }}</span>
      <div class="min-w-0 flex-1 basis-48">
        <div class="flex flex-wrap items-center gap-2">
          <h2 class="text-sm font-semibold text-gray-100">{{ conn.name }}</h2>
          <span class="px-1.5 py-0.5 rounded bg-gray-800 text-[10px] text-gray-400 uppercase tracking-wide">{{ conn.provider }}</span>
          {% if conn.is_shared %}
          <span class="px-1.5 py-0.5 rounded bg-violet-900/40 text-violet-300 text-[10px]" title="{{ conn.share_label }} — shared into this workspace by {{ conn.project.name }}. Read-only here.">⇄ shared · {{ conn.project.name }}</span>
          {% else %}
          <span class="px-1.5 py-0.5 rounded bg-gray-800 text-[10px] text-gray-400" title="{{ conn.share_label }}">⌂ this workspace</span>
          {% endif %}
          {% if not conn.enabled %}<span class="px-1.5 py-0.5 rounded bg-gray-800 text-[10px] text-gray-400" title="Its models can't be picked for new runs">disabled</span>{% endif %}
          {% if conn.can_edit %}
            {% if conn.api_key_direct %}<span class="text-[11px] text-emerald-400" title="API key stored on this connection (never shown)">● key stored</span>
            {% elif conn.secret_reference %}<span class="text-[11px] text-sky-300" title="Read from the worker's environment at run time">● env {{ conn.secret_reference }}</span>
            {% else %}<span class="text-[11px] text-gray-500" title="Requests are sent without an API key (fine for local servers)">○ no key</span>{% endif %}
          {% else %}
            <span class="text-[11px] text-gray-500" title="Shared connection — the owner manages its key">🔒 owner-managed key</span>
          {% endif %}
          <span class="conn-status hidden text-[11px] px-1.5 py-0.5 rounded" aria-live="polite"></span>
        </div>
        {% if conn.description %}<p class="text-xs text-gray-400 mt-0.5 line-clamp-2 whitespace-pre-line" title="{{ conn.description }}">{{ conn.description }}</p>{% endif %}
        <p class="text-xs text-gray-500 font-mono truncate mt-0.5" title="{{ conn.base_url }}">{{ conn.base_url }}</p>
      </div>
      <div class="flex items-center gap-1.5 w-full sm:w-auto justify-end">
        <button type="button" data-check="{{ conn.id }}" title="Ping the server and check which registered models it serves"
                class="px-2.5 py-1 rounded-lg text-xs text-gray-300 bg-surface-overlay hover:text-white">Check</button>
        {% if conn.can_edit %}
        <button type="button" data-write data-discover="{{ conn.id }}" title="List the models this server offers and pick ones to add"
                class="px-2.5 py-1 rounded-lg text-xs text-gray-300 bg-surface-overlay hover:text-white">+ Models</button>
          {% if otlp_enabled %}
          <button type="button" data-write data-otlp="{{ conn.id }}" title="Generate an OTLP credential so this target can push traces to Studio"
                class="px-2.5 py-1 rounded-lg text-xs text-gray-300 bg-surface-overlay hover:text-white">OTLP</button>
        {% endif %}
        <button type="button" data-write data-conn-open="{{ conn.id }}" title="Edit connection" aria-label="Edit connection {{ conn.name }}"
                class="w-7 h-7 rounded-lg text-gray-400 hover:text-accent hover:bg-surface-overlay">✎</button>
        {% if conn.in_use %}
        <span class="w-7 h-7 inline-flex items-center justify-center text-gray-600 cursor-help" title="Can't delete: runs or monitors use its models"><svg class="w-3.5 h-3.5" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M8 1a3.5 3.5 0 0 0-3.5 3.5V6H4a1.5 1.5 0 0 0-1.5 1.5v6A1.5 1.5 0 0 0 4 15h8a1.5 1.5 0 0 0 1.5-1.5v-6A1.5 1.5 0 0 0 12 6h-.5V4.5A3.5 3.5 0 0 0 8 1Zm2 5H6V4.5a2 2 0 1 1 4 0V6Z"/></svg></span>
        {% else %}
        <form method="post" data-write action="{% url 'connection_delete' conn.id %}" data-confirm="Delete connection “{{ conn.name }}” and its {{ conn.model_list|length }} model{{ conn.model_list|length|pluralize }}?">
          {% csrf_token %}
          <button title="Delete connection and its models" aria-label="Delete connection {{ conn.name }}" class="w-7 h-7 rounded-lg text-gray-500 hover:text-red-400 hover:bg-surface-overlay">✕</button>
        </form>
        {% endif %}
        {% else %}
        <span class="text-[11px] text-gray-600 px-1" title="Shared connections are read-only in this workspace — only {{ conn.project.name }} can edit them">read-only</span>
        {% endif %}
      </div>
    </header>

    <!-- Models -->
    {% if conn.model_list %}
    <div class="overflow-x-auto">
    <table class="w-full text-sm">
      <thead>
        <tr class="text-[11px] uppercase tracking-wide text-gray-500">
          <th class="text-left font-medium px-4 py-2 w-8"><span class="sr-only">Availability</span></th>
          <th class="text-left font-medium px-2 py-2">Name</th>
          <th class="text-left font-medium px-2 py-2">Model ID</th>
          <th class="text-right font-medium px-2 py-2">Used by</th>
          <th class="px-4 py-2 w-24"><span class="sr-only">Actions</span></th>
        </tr>
      </thead>
      <tbody>
        {% for m in conn.model_list %}
        <tr class="model-row border-t border-gray-800/60 hover:bg-surface-overlay/40 group" data-model="{{ m.id }}" data-model-id="{{ m.model_id }}"
            data-search="{{ m.display_name|lower }} {{ m.model_id|lower }} {{ m.description|lower }}">
          <td class="px-4 py-2 align-top"><span class="model-dot inline-block w-2 h-2 rounded-full bg-gray-700" title="Not checked yet — press Check"></span></td>
          <td class="px-2 py-2 text-gray-200 align-top">
            <div class="model-view min-w-0 max-w-md">
              <span>{{ m.display_name|default:m.model_id }}</span>
              {% if m.description %}<p class="text-[11px] text-gray-500 mt-0.5 line-clamp-2 whitespace-pre-line" title="{{ m.description }}">{{ m.description }}</p>{% endif %}
            </div>
            <form method="post" class="model-edit hidden flex flex-wrap gap-2 items-start max-w-2xl">
              {% csrf_token %}
              <input type="hidden" name="action" value="edit_model">
              <input type="hidden" name="rm_id" value="{{ m.id }}">
              <input type="text" name="model_display_name" value="{{ m.display_name }}" placeholder="Display name" aria-label="Display name"
                     class="w-40 px-2 py-1 rounded bg-surface-overlay border border-gray-700 text-xs focus:outline-none focus:ring-1 focus:ring-accent/50">
              <input type="text" name="model_id_new" value="{{ m.model_id }}" placeholder="Model ID" aria-label="Model ID" required
                     class="w-48 px-2 py-1 rounded bg-surface-overlay border border-gray-700 text-xs font-mono focus:outline-none focus:ring-1 focus:ring-accent/50">
              <textarea name="model_description" rows="2" maxlength="1000" placeholder="Description (optional): what it is, when to use it" aria-label="Description"
                        class="basis-full px-2 py-1 rounded bg-surface-overlay border border-gray-700 text-xs focus:outline-none focus:ring-1 focus:ring-accent/50">{{ m.description }}</textarea>
              <button class="px-2 py-1 rounded bg-accent/20 text-accent text-xs hover:bg-accent/30" title="Save changes">Save</button>
              <button type="button" data-edit-cancel class="px-2 py-1 rounded text-gray-500 text-xs hover:text-gray-300" title="Discard changes">Cancel</button>
            </form>
          </td>
          <td class="px-2 py-2 text-xs text-gray-400 font-mono model-view align-top">{{ m.model_id }}</td>
          <td class="px-2 py-2 text-xs text-right model-view align-top {% if m.usage %}text-gray-300{% else %}text-gray-600{% endif %}"
              title="Runs and monitors that use this model as target, auditor or judge">{% if m.usage %}{{ m.usage }} run{{ m.usage|pluralize }}{% else %}unused{% endif %}</td>
          <td class="px-4 py-1 text-right whitespace-nowrap model-view align-top">
            {% if conn.can_edit %}
            {% if chat_enabled %}
            <span class="opacity-0 group-hover:opacity-100 focus-within:opacity-100 transition-opacity">
              <a href="{% url 'chat_with' conn.id m.model_id %}" title="Open a chat with {{ m.display_name|default:m.model_id }}"
                 aria-label="Chat with {{ m.display_name|default:m.model_id }}"
                 class="w-7 h-7 inline-flex items-center justify-center rounded text-gray-500 hover:text-accent">
                <svg class="w-4 h-4" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M8 1.5A6.5 6.5 0 0 0 1.5 8c0 1.1.27 2.15.75 3.08L1.5 14.5l3.55-.72A6.5 6.5 0 1 0 8 1.5Zm0 1.5a5 5 0 1 1-2.55 9.3l-.34-.18-2.06.42.43-1.98-.22-.34A5 5 0 0 1 8 3Z"/></svg>
              </a>
            </span>
            {% endif %}
            <span data-write class="opacity-0 group-hover:opacity-100 focus-within:opacity-100 transition-opacity">
              <button type="button" data-edit title="Edit name, model ID or description" aria-label="Edit {{ m.display_name|default:m.model_id }}"
                      class="w-7 h-7 rounded text-gray-500 hover:text-accent">✎</button>
              {% if m.usage %}
              <span class="inline-flex w-7 h-7 items-center justify-center text-gray-600 cursor-help" title="Used by {{ m.usage }} run{{ m.usage|pluralize }} — kept for reproducibility"><svg class="w-3.5 h-3.5" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M8 1a3.5 3.5 0 0 0-3.5 3.5V6H4a1.5 1.5 0 0 0-1.5 1.5v6A1.5 1.5 0 0 0 4 15h8a1.5 1.5 0 0 0 1.5-1.5v-6A1.5 1.5 0 0 0 12 6h-.5V4.5A3.5 3.5 0 0 0 8 1Zm2 5H6V4.5a2 2 0 1 1 4 0V6Z"/></svg></span>
              {% else %}
              <form method="post" class="inline" data-confirm="Remove {{ m.display_name|default:m.model_id }}?">
                {% csrf_token %}
                <input type="hidden" name="action" value="delete_model">
                <input type="hidden" name="rm_id" value="{{ m.id }}">
                <button title="Remove model" aria-label="Remove {{ m.display_name|default:m.model_id }}" class="w-7 h-7 rounded text-gray-500 hover:text-red-400">✕</button>
              </form>
              {% endif %}
            </span>
            {% else %}
            <span class="text-[11px] text-gray-600" title="Shared connection — only {{ conn.project.name }} can edit its models">—</span>
            {% endif %}
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
    </div>
    {% else %}
    <p class="px-4 py-5 text-sm text-gray-500">No models yet. <button type="button" data-write data-discover="{{ conn.id }}" class="text-accent hover:underline">Add models</button> from this server.</p>
    {% endif %}
  </section>
  {% endfor %}
  <p id="filter-empty" class="hidden text-sm text-gray-500 text-center py-6">Nothing matches this filter.</p>
</div>
{% else %}
<!-- Empty state -->
<div class="bg-surface-raised rounded-xl border border-gray-800 p-8 text-center">
  <p class="text-base text-gray-200 font-medium">Connect your first model server</p>
  <p class="text-sm text-gray-500 mt-1 mb-5">Any OpenAI-compatible API works: hosted providers or a local server.</p>
  <div class="flex flex-wrap justify-center gap-2" data-write>
    {% for key, label, provider, url, env in provider_presets %}
    <button type="button" data-conn-open="new" data-preset="{{ key }}"
            class="px-3 py-2 rounded-lg bg-surface-overlay border border-gray-700 text-sm text-gray-200 hover:border-accent/60 hover:text-white">{{ label }}</button>
    {% endfor %}
  </div>
  <div class="mt-4">
    {% include "partials/need_help.html" %}
  </div>
</div>
{% endif %}

<!-- Add / edit connection -->
<dialog id="conn-dialog" class="sa-dialog w-[min(34rem,calc(100vw-2rem))] rounded-xl border border-gray-700 bg-surface-raised p-0 shadow-2xl">
  <form method="post" class="p-5 space-y-4" id="conn-form">
    {% csrf_token %}
    <input type="hidden" name="action" value="add_connection">
    <input type="hidden" name="conn_id" value="">
    <div class="flex items-center justify-between">
      <h2 class="text-base font-semibold text-gray-100" id="conn-dialog-title">Add connection</h2>
      <button type="button" data-dialog-close aria-label="Close" title="Close" class="w-7 h-7 rounded text-gray-500 hover:text-gray-200">✕</button>
    </div>
    <div>
      <p class="block text-xs text-gray-500 mb-1.5">Start from</p>
      <div class="flex flex-wrap gap-1.5" id="preset-chips">
        {% for key, label, provider, url, env in provider_presets %}
        <button type="button" data-preset-chip="{{ key }}" class="px-2 py-1 rounded-md bg-surface-overlay border border-gray-700 text-xs text-gray-300 hover:text-white aria-pressed:border-accent aria-pressed:text-white">{{ label }}</button>
        {% endfor %}
      </div>
    </div>
    <div class="grid grid-cols-1 sm:grid-cols-3 gap-3">
      <label class="sm:col-span-2 block text-xs text-gray-500">Name
        <input type="text" name="conn_name" required placeholder="e.g. OpenAI"
               class="mt-1 w-full px-3 py-2 rounded-lg bg-surface-overlay border border-gray-700 text-sm text-gray-100 focus:outline-none focus:ring-2 focus:ring-accent/50"></label>
      <label class="block text-xs text-gray-500">Provider
        <select name="conn_provider" class="mt-1 w-full px-3 py-2 rounded-lg bg-surface-overlay border border-gray-700 text-sm text-gray-100">
          {% for provider in providers %}<option value="{{ provider }}">{{ provider }}</option>{% endfor %}
        </select></label>
    </div>
    <label class="block text-xs text-gray-500">Description <span class="text-gray-600">(optional)</span>
      <textarea name="conn_description" rows="2" maxlength="1000" placeholder="e.g. Team OpenAI account, billed to project X — explain why this is shared so generously"
                class="mt-1 w-full px-3 py-2 rounded-lg bg-surface-overlay border border-gray-700 text-sm text-gray-100 focus:outline-none focus:ring-2 focus:ring-accent/50"></textarea>
      <span class="block mt-1 text-[11px] text-gray-600">Shown to every workspace that can see this connection. Use it to say what it is and why you're sharing it.</span></label>
    <fieldset id="sharing-fieldset">
      <legend class="text-xs text-gray-500 mb-1.5">Sharing</legend>
      <div class="space-y-1.5">
        {% for value, label in visibility_choices %}
        <label class="flex items-start gap-2 text-xs cursor-pointer">
          <input type="radio" name="conn_visibility" value="{{ value }}" class="mt-0.5 accent-accent" {% if value == 'workspace' %}checked{% endif %}>
          <span class="text-gray-300">{{ label }}</span>
        </label>
        {% endfor %}
      </div>
      <p class="mt-1.5 text-[11px] text-gray-600" data-share-hint>Only this workspace can see or use this connection.</p>
      <div class="mt-2 hidden" data-share-pane="admins">
        <p class="text-[11px] text-gray-500 mb-1">Share with specific workspaces you administer:</p>
        <div class="max-h-40 overflow-y-auto rounded-lg border border-gray-800 bg-surface-overlay/40 divide-y divide-gray-800/60">
          {% for ws in share_targets %}
          <label class="flex items-center gap-2 px-2.5 py-1.5 text-xs cursor-pointer hover:bg-surface-overlay">
            <input type="checkbox" name="conn_shared_with" value="{{ ws.id }}" class="accent-accent">
            <span class="text-gray-300">{{ ws.name }}</span>
          </label>
          {% empty %}
          <p class="px-2.5 py-2 text-[11px] text-gray-600">No other workspaces where you're an admin yet.</p>
          {% endfor %}
        </div>
      </div>
      <div class="mt-2 hidden" data-share-pane="public">
        <p class="text-[11px] text-gray-500 mb-1">Every workspace on this instance can pick its models. The owner's API key pays for everyone's usage — share only what you're comfortable with.</p>
      </div>
    </fieldset>
    <label class="block text-xs text-gray-500">Base URL
      <input type="url" name="conn_base_url" required placeholder="https://api.example.com/v1"
             class="mt-1 w-full px-3 py-2 rounded-lg bg-surface-overlay border border-gray-700 text-sm font-mono text-gray-100 focus:outline-none focus:ring-2 focus:ring-accent/50">
      <span class="block mt-1 text-[11px] text-gray-600">Usually ends in <code>/v1</code>. We call <code>&lt;base URL&gt;/models</code> to discover models.</span></label>
    <fieldset>
      <legend class="text-xs text-gray-500 mb-1.5">API key</legend>
      <div class="inline-flex rounded-lg border border-gray-700 p-0.5 text-xs" role="radiogroup">
        <label class="px-3 py-1 rounded-md cursor-pointer has-[:checked]:bg-accent/20 has-[:checked]:text-white text-gray-400"><input type="radio" name="key_mode" value="stored" class="sr-only" checked> Store key</label>
        <label class="px-3 py-1 rounded-md cursor-pointer has-[:checked]:bg-accent/20 has-[:checked]:text-white text-gray-400"><input type="radio" name="key_mode" value="env" class="sr-only"> Environment variable</label>
        <label class="px-3 py-1 rounded-md cursor-pointer has-[:checked]:bg-accent/20 has-[:checked]:text-white text-gray-400"><input type="radio" name="key_mode" value="none" class="sr-only"> None</label>
      </div>
      <div class="mt-2" data-key-pane="stored">
        <input type="password" name="conn_api_key" autocomplete="off" placeholder="sk-…" aria-label="API key"
               class="w-full px-3 py-2 rounded-lg bg-surface-overlay border border-gray-700 text-sm font-mono text-gray-100 focus:outline-none focus:ring-2 focus:ring-accent/50">
        <span class="block mt-1 text-[11px] text-gray-600" data-key-hint>Stored in the database, never shown again or copied into run records.</span>
      </div>
      <div class="mt-2 hidden" data-key-pane="env">
        <input type="text" name="conn_secret_ref" placeholder="OPENAI_API_KEY" aria-label="Environment variable name"
               class="w-full px-3 py-2 rounded-lg bg-surface-overlay border border-gray-700 text-sm font-mono text-gray-100 focus:outline-none focus:ring-2 focus:ring-accent/50">
        <span class="block mt-1 text-[11px] text-gray-600">Read from the worker's environment when a run starts. Best for production.</span>
      </div>
      <p class="mt-2 hidden text-[11px] text-gray-600" data-key-pane="none">No key is sent — fine for local servers like Ollama or vLLM.</p>
    </fieldset>
    <p class="hidden text-[11px] text-amber-300 bg-amber-900/20 rounded px-2 py-1.5" id="key-drop-warning">Saving deletes the stored API key for this connection.</p>
    <label class="hidden items-center gap-2 text-xs text-gray-400" data-edit-only>
      <input type="checkbox" name="conn_enabled" value="1" checked class="accent-accent"> Enabled — its models can be picked for new runs</label>
    <p class="hidden text-xs rounded px-2 py-1.5 break-words" id="conn-check-result" role="status" aria-live="polite"></p>
    <div class="flex items-center justify-end gap-2 pt-1">
      <button type="button" id="conn-check" title="Try these settings now: list the server's models with this URL and key, without saving"
              class="mr-auto px-3 py-2 rounded-lg bg-surface-overlay border border-gray-700 text-sm text-gray-300 hover:text-white disabled:opacity-50">Check</button>
      <button type="button" data-dialog-close class="px-3 py-2 rounded-lg text-sm text-gray-400 hover:text-gray-200">Cancel</button>
      <button type="submit" class="px-4 py-2 rounded-lg bg-accent text-white text-sm font-medium hover:bg-accent-hover" id="conn-submit">Add connection</button>
    </div>
  </form>
</dialog>

<!-- Add models (discover + manual) -->
<dialog id="models-dialog" class="sa-dialog w-[min(36rem,calc(100vw-2rem))] rounded-xl border border-gray-700 bg-surface-raised p-0 shadow-2xl">
  <form method="post" class="p-5 space-y-3" id="models-form">
    {% csrf_token %}
    <input type="hidden" name="action" value="add_models">
    <input type="hidden" name="conn_id" value="">
    <div class="flex items-center justify-between">
      <h2 class="text-base font-semibold text-gray-100">Add models to <span id="models-dialog-conn"></span></h2>
      <button type="button" data-dialog-close aria-label="Close" title="Close" class="w-7 h-7 rounded text-gray-500 hover:text-gray-200">✕</button>
    </div>
    <div id="discover-box">
      <div class="flex items-center gap-2 mb-2">
        <input type="search" id="discover-filter" placeholder="Filter available models…" aria-label="Filter available models"
               class="flex-1 px-2.5 py-1.5 rounded-lg bg-surface-overlay border border-gray-700 text-xs text-gray-200 focus:outline-none focus:ring-2 focus:ring-accent/50">
        <button type="button" id="discover-all" class="text-xs text-gray-400 hover:text-accent whitespace-nowrap">Select shown</button>
      </div>
      <p id="discover-status" class="text-xs text-gray-500 py-6 text-center">Asking the server which models it offers…</p>
      <ul id="discover-list" class="hidden max-h-72 overflow-y-auto space-y-0.5 pr-1"></ul>
    </div>
    <details class="group">
      <summary class="text-xs text-gray-400 hover:text-gray-200 cursor-pointer select-none">Add one by ID instead</summary>
      <div class="mt-2 grid grid-cols-1 sm:grid-cols-2 gap-2">
        <input type="text" id="manual-id" placeholder="Model ID, e.g. gpt-4o-mini" aria-label="Model ID"
               class="px-3 py-2 rounded-lg bg-surface-overlay border border-gray-700 text-sm font-mono text-gray-100 focus:outline-none focus:ring-2 focus:ring-accent/50">
        <input type="text" name="model_display_name" id="manual-name" placeholder="Display name (optional)" aria-label="Display name"
               class="px-3 py-2 rounded-lg bg-surface-overlay border border-gray-700 text-sm text-gray-100 focus:outline-none focus:ring-2 focus:ring-accent/50">
        <textarea name="model_description" rows="2" maxlength="1000" placeholder="Description (optional)" aria-label="Description"
                  class="sm:col-span-2 px-3 py-2 rounded-lg bg-surface-overlay border border-gray-700 text-sm text-gray-100 focus:outline-none focus:ring-2 focus:ring-accent/50"></textarea>
        <p class="sm:col-span-2 text-[11px] text-gray-600">Name and description apply when you add a single model. Edit any model later with ✎.</p>
      </div>
    </details>
    <div class="flex items-center justify-end gap-2 pt-1">
      <button type="button" data-dialog-close class="px-3 py-2 rounded-lg text-sm text-gray-400 hover:text-gray-200">Cancel</button>
      <button type="submit" id="models-submit" disabled class="px-4 py-2 rounded-lg bg-accent text-white text-sm font-medium hover:bg-accent-hover disabled:opacity-40 disabled:cursor-not-allowed">Add models</button>
    </div>
  </form>
</dialog>

<!-- OTLP credential (generate + copy env vars) -->
<dialog id="otlp-dialog" class="sa-dialog w-[min(38rem,calc(100vw-2rem))] rounded-xl border border-gray-700 bg-surface-raised p-0 shadow-2xl">
  <div class="p-5 space-y-4">
    <div class="flex items-center justify-between">
      <h2 class="text-base font-semibold text-gray-100">OTLP credential for <span id="otlp-dialog-conn"></span></h2>
      <button type="button" data-dialog-close aria-label="Close" title="Close" class="w-7 h-7 rounded text-gray-500 hover:text-gray-200">✕</button>
    </div>
    <p class="text-xs text-gray-400">Issue a credential so this target can push OTLP traces to Studio. The secret is shown once — copy it now.</p>
    <div class="flex items-center gap-2">
      <label class="text-xs text-gray-300" for="otlp-mode">Auth mode</label>
      <select id="otlp-mode" class="px-2.5 py-1.5 rounded-lg bg-surface-overlay border border-gray-700 text-xs text-gray-200">
        <option value="disabled" selected>Disabled</option>
        <option value="none">None (unauthenticated)</option>
        <option value="basic">Basic Auth</option>
        <option value="bearer">Bearer Token</option>
      </select>
      <button type="button" id="otlp-issue" class="px-3 py-1.5 rounded-lg bg-accent text-white text-xs font-medium hover:bg-accent-hover">Save</button>
    </div>
    <div id="otlp-result" class="hidden space-y-2 text-xs">
      <p id="otlp-warning" class="hidden text-amber-300 bg-amber-900/20 rounded px-2 py-1.5">Copy the secret now — it won't be shown again.</p>
      <pre id="otlp-env" class="bg-surface-overlay border border-gray-700 rounded-lg p-3 font-mono text-[11px] text-gray-200 whitespace-pre-wrap break-all"></pre>
      <div class="flex items-center gap-2">
        <button type="button" id="otlp-copy" class="px-3 py-1.5 rounded-lg text-xs text-gray-300 bg-surface-overlay hover:text-white">Copy env vars</button>
      </div>
    </div>
  </div>
</dialog>

{{ provider_presets|json_script:"provider-presets" }}
{{ conn_data|json_script:"conn-data" }}
<script>
(function () {
  const PRESETS = JSON.parse(document.getElementById('provider-presets').textContent)
    .map(([key, label, provider, url, env]) => ({ key, label, provider, url, env }));
  const CONNS = JSON.parse(document.getElementById('conn-data').textContent);
  const $ = (sel, root = document) => root.querySelector(sel);
  const $$ = (sel, root = document) => [...root.querySelectorAll(sel)];
  document.addEventListener('click', e => { if (e.target.closest('[data-dialog-close]')) e.target.closest('dialog').close(); });
  $$('dialog.sa-dialog').forEach(d => d.addEventListener('click', e => { if (e.target === d) d.close(); }));   // backdrop

  // ---------- Filter ----------
  const search = $('#model-search');
  search?.addEventListener('input', () => {
    const q = search.value.trim().toLowerCase();
    let shown = 0;
    $$('[data-conn]').forEach(card => {
      const connHit = card.dataset.search.includes(q);
      let rowHits = 0;
      $$('.model-row', card).forEach(row => { const hit = !q || connHit || row.dataset.search.includes(q); row.hidden = !hit; rowHits += hit; });
      card.hidden = !(connHit || rowHits);
      shown += !card.hidden;
    });
    $('#filter-empty').classList.toggle('hidden', shown > 0);
  });

  // ---------- Connection dialog ----------
  const connDialog = $('#conn-dialog'), connForm = $('#conn-form');
  let storedKeyMode = null;   // key source of the connection being edited
  function setKeyMode(mode) {
    connForm.querySelector(`[name="key_mode"][value="${mode}"]`).checked = true;
    $$('[data-key-pane]', connForm).forEach(p => p.classList.toggle('hidden', p.dataset.keyPane !== mode));
    connForm.elements.conn_secret_ref.required = mode === 'env';
    $('#key-drop-warning').classList.toggle('hidden', !(storedKeyMode === 'stored' && mode !== 'stored'));
  }
  connForm.addEventListener('change', e => {
    if (e.target.name === 'key_mode') setKeyMode(e.target.value);
    if (e.target.name === 'conn_visibility') setShareLevel(e.target.value);
  });
  // Sharing level: show the matching hint/pane and toggle the explicit picker.
  const SHARE_HINTS = {
    workspace: "Only this workspace can see or use this connection.",
    admins: "Pick which workspaces you administer may use these models. The owner's API key pays for their usage.",
    public: "Every workspace on this instance can pick its models. The owner's API key pays for everyone's usage — share only what you're comfortable with.",
  };
  function setShareLevel(level) {
    $$('[data-share-pane]', connForm).forEach(p => p.classList.toggle('hidden', p.dataset.sharePane !== level));
    const hint = $('[data-share-hint]', connForm);
    if (hint) hint.textContent = SHARE_HINTS[level] || '';
    hint?.classList.toggle('hidden', level === 'workspace');
  }
  function applyPreset(key) {
    const p = PRESETS.find(x => x.key === key);
    if (!p) return;
    $$('[data-preset-chip]', connForm).forEach(c => c.setAttribute('aria-pressed', c.dataset.presetChip === key));
    const f = connForm.elements;
    if (!f.conn_name.value || PRESETS.some(x => x.label === f.conn_name.value)) f.conn_name.value = p.key === 'custom' ? '' : p.label;
    f.conn_provider.value = p.provider;
    f.conn_base_url.value = p.url;
    f.conn_secret_ref.value = p.env;
    setKeyMode(p.url.startsWith('http://localhost') ? 'none' : 'stored');
    (p.url ? f.conn_name : f.conn_base_url).focus();
  }
  connForm.addEventListener('click', e => { const chip = e.target.closest('[data-preset-chip]'); if (chip) applyPreset(chip.dataset.presetChip); });
  function openConn(id, preset) {
    connForm.reset();
    clearCheck();
    const f = connForm.elements, c = CONNS[id];
    const editing = id !== 'new' && c;
    storedKeyMode = editing ? c.key_mode : null;
    f.action.value = editing ? 'edit_connection' : 'add_connection';
    f.conn_id.value = editing ? id : '';
    $('#conn-dialog-title').textContent = editing ? `Edit ${c.name}` : 'Add connection';
    $('#conn-submit').textContent = editing ? 'Save' : 'Add connection';
    $('[data-edit-only]', connForm).classList.toggle('hidden', !editing);
    $('[data-edit-only]', connForm).classList.toggle('flex', !!editing);
    $('#preset-chips').parentElement.classList.toggle('hidden', !!editing);
    $$('[data-preset-chip]', connForm).forEach(ch => ch.setAttribute('aria-pressed', 'false'));
    // Reset sharing controls to defaults before filling.
    $$('[name="conn_visibility"]', connForm).forEach(r => r.checked = r.value === 'workspace');
    $$('[name="conn_shared_with"]', connForm).forEach(cb => cb.checked = false);
    setShareLevel('workspace');
    if (editing) {
      if (![...f.conn_provider.options].some(o => o.value === c.provider)) f.conn_provider.add(new Option(c.provider, c.provider));
      f.conn_name.value = c.name; f.conn_description.value = c.description; f.conn_provider.value = c.provider; f.conn_base_url.value = c.base_url;
      f.conn_secret_ref.value = c.secret_ref; f.conn_enabled.checked = c.enabled;
      setKeyMode(c.key_mode);
      f.conn_api_key.placeholder = c.key_mode === 'stored' ? '•••••••• (leave blank to keep the stored key)' : 'sk-…';
      // Restore sharing level + explicit workspaces.
      const vis = c.visibility || 'workspace';
      const visRadio = connForm.querySelector(`[name="conn_visibility"][value="${vis}"]`);
      if (visRadio) visRadio.checked = true;
      setShareLevel(vis);
      const shared = new Set(c.shared_with || []);
      $$('[name="conn_shared_with"]', connForm).forEach(cb => { cb.checked = shared.has(cb.value); });
    } else {
      setKeyMode('stored');
      f.conn_api_key.placeholder = 'sk-…';
      if (preset) applyPreset(preset);
    }
    connDialog.showModal();
    if (!preset) (editing ? f.conn_base_url : f.conn_name).focus();
  }
  document.addEventListener('click', e => {
    const b = e.target.closest('[data-conn-open]');
    if (b) openConn(b.dataset.connOpen, b.dataset.preset);
  });

  // ---------- Inline model edit ----------
  document.addEventListener('click', e => {
    const row = e.target.closest('.model-row');
    if (!row) return;
    if (e.target.closest('[data-edit]')) {
      $$('.model-view', row).forEach(el => el.classList.add('hidden'));
      $('.model-edit', row).classList.remove('hidden');
      $('.model-edit [name="model_display_name"]', row).focus();
    } else if (e.target.closest('[data-edit-cancel]')) {
      $$('.model-view', row).forEach(el => el.classList.remove('hidden'));
      $('.model-edit', row).classList.add('hidden');
    }
  });

  // ---------- Check (ping) ----------
  async function check(connId) {
    const card = $(`[data-conn="${connId}"]`), badge = $('.conn-status', card);
    const dots = $$('.model-dot', card);
    badge.className = 'conn-status text-[11px] px-1.5 py-0.5 rounded bg-surface-overlay text-gray-400';
    badge.textContent = 'checking…';
    dots.forEach(d => { d.className = 'model-dot inline-block w-2 h-2 rounded-full bg-amber-400 animate-pulse'; });
    let data;
    try {
      data = await (await fetch(`/api/models/ping-connection/${connId}/`, { headers: { Accept: 'application/json' } })).json();
    } catch (err) { data = { status: 'error', detail: 'unreachable' }; }
    if (data.status === 'up') {
      badge.className = 'conn-status text-[11px] px-1.5 py-0.5 rounded bg-emerald-900/40 text-emerald-300';
      badge.textContent = `online · ${data.found}/${data.total} available`;
      const found = Object.fromEntries((data.models || []).map(m => [m.id, m.found]));
      $$('.model-row', card).forEach(row => {
        const ok = found[row.dataset.model];
        const dot = $('.model-dot', row);
        dot.className = 'model-dot inline-block w-2 h-2 rounded-full ' + (ok ? 'bg-emerald-400' : 'bg-red-400');
        dot.title = ok ? 'The server offers this model' : 'The server does not list this model — check the ID';
      });
    } else {
      badge.className = 'conn-status text-[11px] px-1.5 py-0.5 rounded bg-red-900/40 text-red-300';
      badge.textContent = data.detail || 'error';
      badge.title = data.detail || '';
      dots.forEach(d => { d.className = 'model-dot inline-block w-2 h-2 rounded-full bg-red-400'; d.title = 'Server unreachable'; });
    }
  }
  document.addEventListener('click', e => { const b = e.target.closest('[data-check]'); if (b) check(b.dataset.check); });
  $('#check-all')?.addEventListener('click', () => $$('[data-conn]').forEach(c => check(c.dataset.conn)));

  // ---------- Add models: discover + pick ----------
  const modelsDialog = $('#models-dialog'), modelsForm = $('#models-form');
  const list = $('#discover-list'), status = $('#discover-status'), submit = $('#models-submit');
  function refreshSubmit() {
    const n = $$('input[name="model_id"]:checked', list).length + ($('#manual-id').value.trim() ? 1 : 0);
    submit.disabled = n === 0;
    submit.textContent = n ? `Add ${n} model${n === 1 ? '' : 's'}` : 'Add models';
  }
  async function openModels(connId) {
    const card = $(`[data-conn="${connId}"]`);
    const have = new Set($$('.model-row', card).map(r => r.dataset.modelId));
    modelsForm.reset();
    modelsForm.elements.conn_id.value = connId;
    $('#models-dialog-conn').textContent = CONNS[connId].name;
    list.innerHTML = ''; list.classList.add('hidden');
    status.classList.remove('hidden'); status.textContent = 'Asking the server which models it offers…';
    refreshSubmit();
    modelsDialog.showModal();
    try {
      const resp = await fetch('{% url "models_discover" %}', {
        method: 'POST', headers: { 'X-CSRFToken': csrfToken() }, body: new URLSearchParams({ connection_id: connId }),
      });
      const data = await resp.json();
      if (!resp.ok) throw new Error(data.error || `HTTP ${resp.status}`);
      if (!data.models.length) { status.textContent = 'The server listed no models. Add one by ID below.'; modelsForm.querySelector('details').open = true; return; }
      list.innerHTML = data.models.map(id => {
        const added = have.has(id);
        return `<li><label class="flex items-center gap-2 px-2 py-1 rounded text-xs ${added ? 'text-gray-600' : 'text-gray-300 hover:bg-surface-overlay cursor-pointer'}" data-search="${esc(id.toLowerCase())}">
          <input type="checkbox" name="model_id" value="${esc(id)}" ${added ? 'disabled checked' : ''} class="accent-accent">
          <span class="font-mono truncate">${esc(id)}</span>${added ? '<span class="ml-auto text-[10px]">added</span>' : ''}</label></li>`;
      }).join('');
      status.classList.add('hidden'); list.classList.remove('hidden');
      $('#discover-filter').focus();
    } catch (err) {
      status.innerHTML = `Couldn't list models: ${esc(err.message)}.<br>Check the base URL and key, or add a model by ID below.`;
      modelsForm.querySelector('details').open = true;
    }
  }
  document.addEventListener('click', e => { const b = e.target.closest('[data-discover]'); if (b) openModels(b.dataset.discover); });

  // ---------- OTLP credential ----------
  const otlpDialog = $('#otlp-dialog'), otlpResult = $('#otlp-result'), otlpEnv = $('#otlp-env');
  function openOtlp(connId) {
    $('#otlp-dialog-conn').textContent = CONNS[connId].name;
    const current = CONNS[connId].otlp;
    $('#otlp-mode').value = current && current.enabled ? current.auth_mode : 'disabled';
    otlpResult.classList.add('hidden');
    otlpDialog.dataset.connId = connId;
    otlpDialog.showModal();
  }
  function showOtlpResult(env, secret) {
    otlpEnv.textContent = env;
    $('#otlp-warning').classList.toggle('hidden', !secret);
    otlpResult.classList.remove('hidden');
  }
  document.addEventListener('click', e => { const b = e.target.closest('[data-otlp]'); if (b) openOtlp(b.dataset.otlp); });
  $('#otlp-issue').addEventListener('click', async () => {
    const connId = otlpDialog.dataset.connId, mode = $('#otlp-mode').value;
    const btn = $('#otlp-issue'); btn.disabled = true; btn.textContent = mode === 'disabled' ? 'Saving…' : 'Issuing…';
    try {
      if (mode === 'disabled') {
        const current = CONNS[connId].otlp;
        if (current) {
          const resp = await fetch('{% url "otlp_credential_toggle" %}', {
            method: 'POST', headers: { 'X-CSRFToken': csrfToken() },
            body: new URLSearchParams({ credential_id: current.id, enabled: '0' }),
          });
          const data = await resp.json();
          if (!resp.ok) throw new Error(data.error || `HTTP ${resp.status}`);
          current.enabled = false;
        }
        otlpEnv.textContent = 'OTLP tracing is disabled for this connection.';
        $('#otlp-warning').classList.add('hidden');
        otlpResult.classList.remove('hidden');
        return;
      }
      const resp = await fetch('{% url "otlp_credential_create" %}', {
        method: 'POST', headers: { 'X-CSRFToken': csrfToken() },
        body: new URLSearchParams({ connection_id: connId, auth_mode: mode, origin: location.origin }),
      });
      const data = await resp.json();
      if (!resp.ok) throw new Error(data.error || `HTTP ${resp.status}`);
      CONNS[connId].otlp = { id: data.credential.id, auth_mode: data.credential.auth_mode, enabled: true };
      showOtlpResult(Object.entries(data.env_vars).map(([k, v]) => `${k}=${v}`).join('\n'), data.secret);
    } catch (err) {
      otlpEnv.textContent = `Error: ${err.message}`;
      otlpResult.classList.remove('hidden');
    } finally {
      btn.disabled = false; btn.textContent = 'Save';
    }
  });
  $('#otlp-copy').addEventListener('click', async () => {
    try { await navigator.clipboard.writeText(otlpEnv.textContent); $('#otlp-copy').textContent = 'Copied!'; }
    catch { $('#otlp-copy').textContent = 'Copy failed'; }
    setTimeout(() => { $('#otlp-copy').textContent = 'Copy env vars'; }, 1500);
  });
  list.addEventListener('change', refreshSubmit);
  $('#manual-id').addEventListener('input', refreshSubmit);
  $('#discover-filter').addEventListener('input', e => {
    const q = e.target.value.trim().toLowerCase();
    $$('li', list).forEach(li => { li.hidden = !li.firstElementChild.dataset.search.includes(q); });
  });
  $('#discover-all').addEventListener('click', () => {
    $$('li:not([hidden]) input:not(:disabled)', list).forEach(cb => { cb.checked = true; });
    refreshSubmit();
  });
  modelsForm.addEventListener('submit', () => {
    // Already-added models are shown ticked but disabled (not submitted); add the manual ID if typed.
    const manual = $('#manual-id').value.trim();
    if (manual) modelsForm.insertAdjacentHTML('beforeend', `<input type="hidden" name="model_id" value="${esc(manual)}">`);
  });
  // ---------- Check the dialog's settings before saving ----------
  const checkBtn = $('#conn-check'), checkResult = $('#conn-check-result');
  function clearCheck() { checkResult.classList.add('hidden'); checkResult.textContent = ''; }
  function showCheck(ok, text) {
    checkResult.className = `text-xs rounded px-2 py-1.5 break-words ${ok ? 'text-green-300 bg-green-900/20' : 'text-red-300 bg-red-900/20'}`;
    checkResult.textContent = text;
  }
  connForm.addEventListener('input', clearCheck);
  checkBtn.addEventListener('click', async () => {
    if (!connForm.elements.conn_base_url.value.trim()) { showCheck(false, 'Enter the base URL first.'); return; }
    checkBtn.disabled = true;
    showCheck(true, 'Checking…');
    checkResult.className = 'text-xs rounded px-2 py-1.5 text-gray-400 bg-surface-overlay';
    try {
      const resp = await fetch('{% url "connection_check" %}', {
        method: 'POST', headers: { 'X-CSRFToken': csrfToken() }, body: new FormData(connForm),
      });
      const data = await resp.json();
      if (data.ok) {
        const names = data.models.join(', ') + (data.count > data.models.length ? ', …' : '');
        showCheck(true, data.count
          ? `✓ Reached the server: ${data.count} model${data.count === 1 ? '' : 's'} (${names}).`
          : '✓ Reached the server, but it listed no models. You can still add models by ID.');
      } else {
        showCheck(false, `✗ ${data.error || 'The check failed.'}`);
      }
    } catch (err) {
      showCheck(false, `✗ Couldn't run the check: ${err.message}`);
    } finally {
      checkBtn.disabled = false;
    }
  });
})();
</script>
{% endblock %}