{% 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 %}
      <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">
          {% for model in models %}
          <option value="{{ model.model_id }}" {{ 'selected' if model.model_id == chat.model_id }}>
            {{ model.label }}
          </option>
          {% endfor %}
        </select>
      </form>
      {% endif %}
      {% else %}
      <h1 class="topbar__title">Chats</h1>
      {% endif %}
    </header>

    {% 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">
        <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();
                const t = this.querySelector('textarea');
                window.lembas.autosize(t);
                window.lembas.scrollThread(true);
              }">
          <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.
        </p>
      </div>
    {% endif %}
  </main>
</div>
{% endblock %}