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

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

{% block admin_content %}
<p class="admin-lede">
  Every model discovered across your connections. The order here is the order
  users see. Pinned models are offered first, and the default is what a new chat
  starts with.
</p>

{% if saved %}
<div class="alert alert--success">{{ icon("check", "icon--sm") }} <span>{{ saved }}</span></div>
{% endif %}

{% if not models %}
<div class="empty" style="padding: var(--sp-10) 0">
  {{ icon("server", "empty__mark") }}
  <p class="empty__text">
    No models yet. <a href="/admin/connections">Add a connection</a> and run
    “Test &amp; refresh”.
  </p>
</div>
{% else %}

<form method="post" action="/admin/models/bulk" class="bulk-bar">
  <span class="text-sm muted">With selected:</span>
  <button class="btn btn--sm" name="action" value="enable" type="submit">Enable</button>
  <button class="btn btn--sm" name="action" value="disable" type="submit">Disable</button>
  <button class="btn btn--sm" name="action" value="public" type="submit">Make public</button>
  <button class="btn btn--sm" name="action" value="private" type="submit">Restrict</button>

  <div class="model-rows">
    {% for model in models %}
    <div class="model-row {{ 'is-off' if not model.enabled }}">
      <input class="model-row__check" type="checkbox" name="model_ids" value="{{ model.id }}"
             aria-label="Select {{ model.label }}">

      {{ model_avatar(model, cls="model-row__avatar") }}

      <div class="model-row__main">
        <div class="model-row__title">
          <strong>{{ model.label }}</strong>
          {% if model.model_id == default_model %}
          <span class="badge badge--gold">{{ icon("star", "icon--sm") }} default</span>
          {% endif %}
          {% if model.pinned %}<span class="badge">pinned</span>{% endif %}
          {% if not model.enabled %}<span class="badge badge--danger">disabled</span>{% endif %}
          {% if not model.public %}
          <span class="badge">{{ model.groups|length }} group{{ '' if model.groups|length == 1 else 's' }}</span>
          {% endif %}
          {% for name, on in (model.capabilities_json or {}).items() %}
            {% if on %}<span class="badge badge--gold">{{ name }}</span>{% endif %}
          {% endfor %}
        </div>
        <code class="model-row__id">{{ model.model_id }}</code>
        <span class="text-xs faint">via {{ model.connection.name }}</span>
      </div>

      <div class="model-row__actions">
        <button class="btn btn--icon btn--sm" type="submit" aria-label="Move up"
                formaction="/admin/models/{{ model.id }}/move" formmethod="post"
                name="direction" value="up" {{ 'disabled' if loop.first }}>
          {{ icon("arrow-up", "icon--sm") }}
        </button>
        <button class="btn btn--icon btn--sm" type="submit" aria-label="Move down"
                formaction="/admin/models/{{ model.id }}/move" formmethod="post"
                name="direction" value="down" {{ 'disabled' if loop.last }}>
          {{ icon("arrow-down", "icon--sm") }}
        </button>
        <a class="btn btn--sm" href="#model-{{ model.id }}">Edit</a>
      </div>
    </div>
    {% endfor %}
  </div>
</form>

<h2 class="admin-section-title">Model settings</h2>

{% for model in models %}
<section class="card" id="model-{{ model.id }}">
  <div class="row row--between" style="margin-bottom: var(--sp-4)">
    <div class="row" style="gap: var(--sp-3); min-width: 0">
      {{ model_avatar(model, cls="model-row__avatar") }}
      <div style="min-width: 0">
        <strong class="truncate">{{ model.label }}</strong>
        <div><code class="text-xs faint">{{ model.model_id }}</code></div>
      </div>
    </div>
    {% if model.model_id != default_model %}
    <form method="post" action="/admin/models/{{ model.id }}/default">
      <button class="btn btn--sm" type="submit">{{ icon("star", "icon--sm") }} Make default</button>
    </form>
    {% endif %}
  </div>

  <form method="post" action="/admin/models/{{ model.id }}">
    <div class="field">
      <label class="field__label" for="dn-{{ model.id }}">Display name</label>
      <input class="input" id="dn-{{ model.id }}" name="display_name"
             value="{{ model.display_name }}" placeholder="{{ model.model_id }}">
      <p class="field__hint">Shown instead of the raw model id. Leave empty to use the id.</p>
    </div>

    <div class="field">
      <label class="field__label" for="desc-{{ model.id }}">Description</label>
      <textarea class="textarea" id="desc-{{ model.id }}" name="description" rows="2"
                placeholder="What is this model good at?">{{ model.description }}</textarea>
    </div>

    <div class="field">
      <span class="field__label">Capabilities</span>
      <div class="checkbox-row">
        {% for name in capabilities %}
        <label class="checkbox">
          <input type="checkbox" name="capability" value="{{ name }}"
                 {{ 'checked' if (model.capabilities_json or {}).get(name) }}>
          <span>{{ name }}</span>
        </label>
        {% endfor %}
      </div>
      <p class="field__hint">
        Endpoints rarely advertise these reliably, so they are your call.
        <strong>reasoning</strong> shows the thinking block;
        <strong>vision</strong> and <strong>tools</strong> are used by features
        not built yet.
      </p>
    </div>

    <div class="field">
      <div class="checkbox-row">
        <label class="checkbox">
          <input type="checkbox" name="enabled" value="true" {{ 'checked' if model.enabled }}>
          <span>Enabled</span>
        </label>
        <label class="checkbox">
          <input type="checkbox" name="pinned" value="true" {{ 'checked' if model.pinned }}>
          <span>Pinned — offered first in the picker</span>
        </label>
      </div>
    </div>

    <div class="field">
      <label class="checkbox">
        <input type="checkbox" name="public" value="true" {{ 'checked' if model.public }}>
        <span>Available to everyone</span>
      </label>
      <p class="field__hint">
        Uncheck to restrict this model to specific groups. Administrators always
        have access.
      </p>
      {% if groups %}
      <div class="checkbox-row" style="margin-top: var(--sp-3)">
        {% for group in groups %}
        <label class="checkbox">
          <input type="checkbox" name="group_ids" value="{{ group.id }}"
                 {{ 'checked' if group in model.groups }}>
          <span>{{ group.name }}</span>
        </label>
        {% endfor %}
      </div>
      {% else %}
      <p class="field__hint">
        No groups yet — <a href="/admin/groups">create one</a> to restrict access.
      </p>
      {% endif %}
    </div>

    <button class="btn btn--primary" type="submit">Save {{ model.label }}</button>
  </form>

  <div class="connection__footer">
    <form method="post" action="/admin/models/{{ model.id }}/image"
          enctype="multipart/form-data" class="row" style="gap: var(--sp-2)">
      <input class="input input--file" type="file" name="image"
             accept="image/png,image/jpeg,image/webp,image/gif" required
             aria-label="Model image">
      <button class="btn btn--sm" type="submit">{{ icon("image", "icon--sm") }} Upload</button>
    </form>
    {% if model.image_path %}
    <form method="post" action="/admin/models/{{ model.id }}/image/delete">
      <button class="btn btn--sm btn--danger" type="submit">Remove image</button>
    </form>
    {% endif %}
  </div>
</section>
{% endfor %}
{% endif %}
{% endblock %}