{% extends "admin/_layout.html" %}
{% from "_macros.html" import icon %}
{% set section = "connections" %}

{% block title %}Connections - LLeMbas{% endblock %}
{% block heading %}Connections{% endblock %}

{% block admin_content %}
<p class="admin-lede">
  Any endpoint that speaks the OpenAI HTTP API: OpenAI itself, or a local
  runner such as LM Studio, vLLM, llama.cpp or Ollama. LLeMbas asks each one
  for its model list and offers those models in the chat picker.
</p>

{% if message %}
<div class="alert alert--success">{{ message }}</div>
{% endif %}

<section class="card">
  <h2 class="card__title">Add a connection</h2>
  <form method="post" action="/admin/connections" >
    <div class="field">
      <label class="field__label" for="new-name">Name</label>
      <input class="input" id="new-name" name="name" required placeholder="Local LM Studio">
    </div>

    <div class="field">
      <label class="field__label" for="new-url">Base URL</label>
      <input class="input input--mono" id="new-url" name="base_url" required
             placeholder="http://localhost:1234/v1">
      <p class="field__hint">
        With or without the trailing <code>/v1</code> — both are accepted.
      </p>
    </div>

    <div class="field">
      <label class="field__label" for="new-key">API key</label>
      <input class="input input--mono" id="new-key" name="api_key" type="password"
             autocomplete="off" placeholder="sk-…">
      <p class="field__hint">
        Encrypted before it is stored, and never sent back to the browser.
        Leave empty for endpoints that need no key.
      </p>
    </div>

    <div class="btn-row" style="margin-top: var(--sp-5)">
      <button class="btn btn--primary" type="submit">
        {{ icon("plus", "icon--sm") }} Add and load models
      </button>
    </div>
  </form>
</section>

<h2 class="admin-section-title">
  Configured connections
  <span class="badge">{{ connections|length }}</span>
</h2>

{% if not connections %}
<div class="empty" style="padding: var(--sp-10) 0">
  {{ icon("server", "empty__mark") }}
  <p class="empty__text">
    Nothing configured yet. Add a connection above and its models appear here.
  </p>
</div>
{% endif %}

<div id="connection-list">
  {% for connection in connections %}
    {% with masked = masked[connection.id],
            model_count = model_counts[connection.id] %}
      {% include "admin/_connection_row.html" %}
    {% endwith %}
  {% endfor %}
</div>
{% endblock %}