{% extends "base.html" %}
{% from "_macros.html" import icon, mark %}
{#
  Messages: one conversation per person, opened at the most recent turns.

  The ordinary chat shell, with two differences. It opens on the live chunk
  rather than on everything, and above that sits a sentinel that fetches the
  page before it when scrolled into view. Everything else — the composer, the
  bubbles, the tail poller, the streaming shell — is the same machinery, which
  is the whole reason this is a `Chat` with a different `kind`.
#}

{% block title %}Messages - {{ brand.name }}{% 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">
      <h1 class="topbar__title">{{ icon("chat", "icon--sm") }} Messages</h1>
      <div class="topbar__actions">
        {% if schedules %}
        <details class="picker">
          <summary class="btn btn--sm">
            {{ icon("clock", "icon--sm") }} {{ schedules | length }} scheduled
          </summary>
          <div class="picker__menu">
            <div class="picker__label">Posting into this conversation</div>
            {% for item in schedules %}
            <a class="jobs__row jobs__row--open" href="/scheduled/{{ item.row.id }}/edit">
              <span>
                <strong>{{ item.row.title }}</strong>
                <span class="text-xs faint">{{ item.summary }}</span>
              </span>
              {% if not item.row.enabled %}
              <span class="badge badge--warning">paused</span>
              {% endif %}
            </a>
            {% endfor %}
          </div>
        </details>
        {% endif %}
        {% if can.get("schedule.use") %}
        <a class="btn btn--sm" href="/scheduled/new">{{ icon("plus", "icon--sm") }} Schedule</a>
        {% endif %}
      </div>
    </header>

    <div class="thread-scroll" id="thread-scroll">
      <div class="thread" id="thread">
        {% if not messages %}
        <div class="thread__intro">
          {{ mark(cls="empty__mark", uid="messages") }}
          <h2 class="empty__title">Nothing said yet</h2>
          <p class="empty__text">
            One conversation that keeps going. Anything scheduled to write here
            will arrive in it.
          </p>
        </div>
        {% endif %}

        {#
          The sentinel goes above the turns and replaces itself with the page
          before, plus a fresh sentinel. Rendered only when there is something
          earlier, so a short conversation has no loading row at the top.
        #}
        {% if more_before %}
        <div class="history-sentinel"
             hx-get="/api/messages/history?before={{ oldest_id }}"
             hx-trigger="revealed"
             hx-target="this"
             hx-swap="outerHTML"
             hx-sync="this:drop">
          <span class="text-xs faint">Loading earlier messages…</span>
        </div>
        {% endif %}

        {% for message in messages %}
          {% with body_html = bodies.get(message.id, "") %}
            {% include "chat/_message.html" %}
          {% endwith %}
        {% endfor %}
      </div>
    </div>

    {#
      Outside `#thread` and outside the composer form, for the two reasons
      `tests/test_chat_tail.py` already walks the chat page to enforce.
    #}
    <div hidden id="thread-tail"
         hx-get="/api/chats/{{ chat.id }}/tail"
         hx-trigger="every 5s"
         hx-target="#thread" hx-swap="beforeend"
         hx-sync="this:drop"></div>

    {% include "chat/_composer.html" %}
  </main>
</div>
{% endblock %}

{% block scripts %}
<script src="{{ url_for('static', path='js/composer.js') }}" defer></script>
<script src="{{ url_for('static', path='js/commands.js') }}" defer></script>
<script src="{{ url_for('static', path='js/steps.js') }}" defer></script>
{% endblock %}