{% extends "base.html" %}
{% from "_macros.html" import icon, mark %}

{% block title %}{{ chat.title if chat else "Chats" }} - LLeMbas{% endblock %}

{% block head %}
<link rel="stylesheet" href="{{ url_for('static', path='css/chat.css') }}">
{% endblock %}

{% block body_attrs %} data-authenticated="true"{% endblock %}

{% block body %}
<div class="shell">
  {% include "partials/sidebar.html" %}

  <main class="main">
    <header class="topbar">
      <button class="btn btn--icon" type="button" aria-label="Toggle sidebar"
              onclick="document.getElementById('sidebar').toggleAttribute('hidden')">
        {{ icon("sidebar") }}
      </button>

      {% if chat %}
      <h1 class="topbar__title"><span id="chat-title">{{ chat.title }}</span></h1>

      {% if models and can.get("chat.model_select") %}
      <form hx-patch="/api/chats/{{ chat.id }}" hx-swap="none"
            hx-trigger="change from:find select">
        <select class="select select--compact" name="model_id" aria-label="Model">
          {% if pinned_models %}
          <optgroup label="Pinned">
            {% for model in pinned_models %}
            <option value="{{ model.model_id }}"
                    {{ 'selected' if model.model_id == chat.model_id }}>{{ model.label }}</option>
            {% endfor %}
          </optgroup>
          <optgroup label="Other models">
          {% endif %}
          {% for model in other_models %}
          <option value="{{ model.model_id }}"
                  {{ 'selected' if model.model_id == chat.model_id }}>{{ model.label }}</option>
          {% endfor %}
          {% if pinned_models %}</optgroup>{% endif %}
        </select>
      </form>
      {% elif current_model %}
      <span class="badge">{{ current_model.label }}</span>
      {% endif %}

      <button class="btn btn--icon" type="button" aria-label="Chat settings"
              title="Chat settings"
              onclick="document.getElementById('chat-settings').toggleAttribute('hidden')">
        {{ icon("sliders") }}
      </button>
      {% else %}
      <h1 class="topbar__title">Chats</h1>
      {% endif %}
    </header>

    {% if chat and (can.get("chat.system_prompt") or can.get("chat.params")) %}
    {# Collapsed by default: these are per-chat overrides, not everyday controls.
       Each field saves on change rather than needing a Save button, so there is
       no half-applied state to reason about. #}
    <section class="chat-settings" id="chat-settings" hidden>
      <div class="chat-settings__inner">
        {% if current_model and current_model.description %}
        <p class="chat-settings__note">{{ current_model.description }}</p>
        {% endif %}

        {% if can.get("chat.system_prompt") %}
        <div class="field">
          <label class="field__label" for="system-prompt">System prompt</label>
          <textarea class="textarea" id="system-prompt" name="system_prompt" rows="3"
                    placeholder="Instructions that apply to every message in this chat."
                    hx-patch="/api/chats/{{ chat.id }}" hx-swap="none"
                    hx-trigger="change">{{ chat.system_prompt }}</textarea>
        </div>
        {% endif %}

        {% if can.get("chat.params") %}
        <div class="chat-settings__params">
          <div class="field">
            <label class="field__label" for="temperature">Temperature</label>
            <input class="input" id="temperature" name="temperature" type="number"
                   min="0" max="2" step="0.05" placeholder="default"
                   value="{{ chat.params_json.get('temperature', '') }}"
                   hx-patch="/api/chats/{{ chat.id }}" hx-swap="none" hx-trigger="change">
          </div>
          <div class="field">
            <label class="field__label" for="top-p">Top-p</label>
            <input class="input" id="top-p" name="top_p" type="number"
                   min="0" max="1" step="0.05" placeholder="default"
                   value="{{ chat.params_json.get('top_p', '') }}"
                   hx-patch="/api/chats/{{ chat.id }}" hx-swap="none" hx-trigger="change">
          </div>
          <div class="field">
            <label class="field__label" for="max-tokens">Max tokens</label>
            <input class="input" id="max-tokens" name="max_tokens" type="number"
                   min="1" step="1" placeholder="default"
                   value="{{ chat.params_json.get('max_tokens', '') }}"
                   hx-patch="/api/chats/{{ chat.id }}" hx-swap="none" hx-trigger="change">
          </div>
        </div>
        <p class="field__hint">
          Leave a field empty to let the provider decide. Values outside the
          allowed range are ignored rather than clamped.
        </p>
        {% endif %}
      </div>
    </section>
    {% endif %}

    {% if not chat %}
      {# No chat selected. #}
      <div class="empty">
        {{ mark(cls="empty__mark", uid="empty") }}
        <h2 class="empty__title">The road goes ever on</h2>
        <p class="empty__text">
          Pick a chat from the side, or start a new one.
        </p>
        <button class="btn btn--primary" hx-post="/api/chats" hx-swap="none">
          {{ icon("plus", "icon--sm") }} New chat
        </button>
      </div>

    {% elif not models %}
      {# Nothing to talk to yet. This is the state every fresh install lands in,
         so it points straight at the fix rather than just reporting a problem. #}
      <div class="empty">
        {{ icon("server", "empty__mark") }}
        <h2 class="empty__title">No models available</h2>
        <p class="empty__text">
          {% if user.is_admin %}
            Add an OpenAI-compatible connection and LLeMbas will load its models.
          {% else %}
            No model connections have been set up yet. Ask an administrator.
          {% endif %}
        </p>
        {% if user.is_admin %}
        <a class="btn btn--primary" href="/admin/connections">
          {{ icon("server", "icon--sm") }} Set up a connection
        </a>
        {% endif %}
      </div>

    {% else %}
      <div class="thread-scroll" id="thread-scroll">
        <div class="thread" id="thread">
          {% if not messages %}
          <div class="thread__intro">
            {{ mark(cls="empty__mark", uid="intro") }}
            <h2 class="empty__title">What would you ask?</h2>
            <p class="empty__text">Speak, friend, and enter.</p>
          </div>
          {% endif %}

          {% for message in messages %}
            {# Markdown was rendered server-side in pages.py, keyed by message
               id, so this loop stays a lookup rather than a render. #}
            {% with body_html = bodies.get(message.id, "") %}
              {% include "chat/_message.html" %}
            {% endwith %}
          {% endfor %}
        </div>
      </div>

      <div class="composer" {% if can.get("files.upload") %}data-dropzone{% endif %}>
        {% if can.get("files.upload") %}
        {# Uploads go up as soon as a file is chosen, so the chip (and any
           rejection) appears immediately rather than at send time. The chips
           carry hidden inputs, which is how the ids reach the message POST. #}
        <form id="upload-form" hx-post="/api/files?chat_id={{ chat.id }}"
              hx-target="#attachments" hx-swap="beforeend"
              hx-encoding="multipart/form-data"
              hx-on::after-request="this.reset()">
          <input class="visually-hidden" type="file" name="file" id="file-input"
                 multiple accept="image/*,.pdf,.txt,.md,.csv,.json,.py,.js,.ts,.rs,.go,.sh,.sql,.yaml,.yml,.toml,.log"
                 onchange="window.lembas.uploadFiles(this.files); this.value = ''">
        </form>
        {% endif %}

        <div class="composer__attachments" id="attachments"></div>

        <form class="composer__form"
              hx-post="/api/chats/{{ chat.id }}/messages"
              hx-target="#thread" hx-swap="beforeend"
              hx-on::after-request="if (event.detail.successful) {
                this.reset();
                document.getElementById('attachments').replaceChildren();
                const t = this.querySelector('textarea');
                window.lembas.autosize(t);
                window.lembas.scrollThread(true);
              }">
          {# The chips live outside this form, so their hidden inputs are pulled
             in explicitly at submit time. #}
          <div hx-include="#attachments" hidden></div>

          {% if can.get("files.upload") %}
          <button class="btn btn--icon composer__attach" type="button"
                  aria-label="Attach a file" title="Attach a file"
                  onclick="document.getElementById('file-input').click()">
            {{ icon("attach") }}
          </button>
          {% endif %}

          <textarea class="composer__input" name="content" rows="1"
                    data-autosize data-max-height="320" data-composer-input
                    placeholder="Send a message…" aria-label="Message"></textarea>
          <button class="btn btn--primary composer__send" type="submit" aria-label="Send">
            {{ icon("send", "icon--sm") }}
          </button>
        </form>

        <p class="composer__hint">
          Enter to send, Shift+Enter for a new line.
          {% if can.get("files.upload") %}
            Drag files in, or paste an image.
            {% if current_model and not current_model.capabilities_json.get("vision") %}
              <strong>{{ current_model.label }} has no vision</strong>, so images
              will not be sent — documents still will.
            {% endif %}
          {% endif %}
        </p>

        {% if can.get("files.upload") %}
        <div class="dropzone-overlay" aria-hidden="true">
          {{ icon("attach", "icon--lg") }}
          <span>Drop to attach</span>
        </div>
        {% endif %}
      </div>
    {% endif %}
  </main>
</div>
{% endblock %}