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

{% block title %}{{ chat.title if chat else t("New chat") }} - {{ brand.name }}{% endblock %}

{% block head %}
<link rel="stylesheet" href="{{ asset('css/chat.css') }}">
{% if terminal_enabled %}
<link rel="stylesheet" href="{{ asset('vendor/xterm.css') }}">
{% endif %}
{% endblock %}

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

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

  <main class="main">
    <header class="topbar">
      {% include "partials/_sidebar_toggle.html" %}

      <h1 class="topbar__title">
        <span id="chat-title">{{ chat.title if chat else t("New chat") }}</span>
        {#
          Rename, where the name is. A themed dialog through `data-prompt`
          rather than an inline field: the heading is in a flex row beside the
          badges and the connection chip, and swapping it for a text box moves
          all of them. The response is the same out-of-band pair the `done`
          frame sends, so the sidebar row follows without a second request.
        #}
        {% if chat %}
        <button class="btn btn--icon btn--sm topbar__rename" type="button"
                hx-patch="/api/chats/{{ chat.id }}" hx-swap="none"
                data-prompt="{{ t('What should this chat be called?') }}"
                data-prompt-title="{{ t('Rename chat') }}" data-prompt-field="title"
                data-prompt-value="{{ chat.title }}"
                aria-label="{{ t('Rename chat') }}" title="{{ t('Rename chat') }}">
          {{ icon("pencil", "icon--sm") }}
        </button>
        {% endif %}
        {# Beside the title because it describes the chat rather than acting on
           it. The way out of it is Keep, in the overflow menu. #}
        {% if chat and chat.temporary %}
        <span class="badge badge--warning"
              title="{{ t('Not listed in the sidebar. It may read your files but saves nothing, and is deleted %(after)s.', after=temporary_after) }}">{{ t("Temporary · read-only") }}</span>
        {# Reported on the way out, so a chat that lives "until you leave it"
           does. A reload reports it too, and the page that comes back clears
           it again (chat_service.mark_back). #}
        {% if temporary_leaves %}
        <span hidden data-temporary-leave="/api/chats/{{ chat.id }}/leave"></span>
        {% endif %}
        {% endif %}
      </h1>

      {# Where this chat runs. Beside the title because it describes the chat
         and cannot be changed -- update_chat refuses the connection and the
         directory with a 409 -- so it is of a kind with the Temporary badge
         rather than with the controls on the right. The mode is the one thing
         here that moves, and it stays down by the message box. #}
      {% if chat and chat.kind == "agent" %}
      <span class="topbar__where" title="{{ chat.project_dir }}">
        {{ icon("bolt", "icon--sm") }}
        {# "Local" in LLeMbas Desktop when the chat's device is this computer,
           with the host in the tooltip (`local_device`). #}
        <span class="topbar__where-name"{% if agent_device_shown and agent_device_shown.local %} title="{{ agent_device_shown.title }}"{% endif %}>
          {{ (agent_device_shown.name if agent_device_shown and agent_device_shown.local else agent_device_name) or t("device missing") }}
        </span>
        <span class="topbar__where-dir">{{ chat.project_dir }}</span>
      </span>
      {% if chat.device_token_id and device_reports_model %}
      {% include "chat/_device_model.html" %}
      {% endif %}
      {% endif %}

      <div class="topbar__actions">
        {#
          A link, not a script: the flag lives in the URL, so it survives a
          reload and can be bookmarked. The URL is built in `chat_index` so it
          keeps the chosen model, folder and kind.
        #}
        {% if not chat and can.get("chat.create") %}
        <a class="btn btn--icon {{ 'is-active' if starting_temporary }}"
           href="{{ temporary_toggle_url }}"
           aria-label="{{ t('Temporary chat') }}"
           title="{% if starting_temporary %}{{ t('Starting a temporary chat. Click to go back to a normal one.') }}{% else %}{{ t('Start a temporary chat: not listed, saves nothing, and deleted %(after)s.', after=temporary_after) }}{% endif %}">
          {{ icon("clock") }}
        </a>
        {% endif %}

        {% if models %}
          {% if can.get("chat.model_select") or not chat %}
            {% include "chat/_model_picker.html" %}
          {% elif current_model %}
          <span class="badge">{{ current_model.label }}</span>
          {% endif %}
        {% endif %}

        {# Before a chat exists, both of these depend on a decision being made in
           the browser -- the kind toggle and the connection select -- which the
           server cannot see. So they render carrying `data-agent-only` and start
           `hidden`; `ui.js` shows them when `lembas:agent-target` names a
           connection and hides them again when it stops. On a chat that exists
           the server's answer is complete and neither attribute appears. #}

        {% if terminal_enabled %}
        {# To the left of the inspector, and never open beside it: see the
           toggle group in app.js. #}
        <button class="btn btn--icon" type="button" aria-label="{{ t('Terminal') }}"
                title="{{ t('Open a shell on %(device)s', device=agent_device_name or t('the device')) }}"
                {% if not chat %}data-agent-only hidden{% endif %}
                aria-expanded="false" data-toggle="#terminal" data-toggle-group="side">
          {{ icon("terminal") }}
        </button>
        {% endif %}

        {% if chat and user.is_admin %}
        <button class="btn btn--icon" type="button" aria-label="{{ t('Inspect this chat') }}"
                title="{{ t('Inspect this chat') }}" aria-expanded="false" data-toggle="#inspector"
                data-toggle-group="side">
          {{ icon("search") }}
        </button>
        {% endif %}

        {# No overflow menu here: Keep this chat, Chat settings and Compact
           are all in the chat's settings panel, opened from the composer's
           settings, and Compact is `/compact` too. #}
      </div>
    </header>

    {% if not models %}
      {# Every fresh install lands here, so it points at the fix. #}
      <div class="empty">
        {{ icon("server", "empty__mark") }}
        <h2 class="empty__title">{{ t("No models available") }}</h2>
        <p class="empty__text">
          {% if user.is_admin %}
            {{ t("Add an OpenAI-compatible connection and %(name)s will load its models.", name=brand.name) }}
          {% else %}
            {{ t("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") }} {{ t("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">
            {{ scene() }}
            <h2 class="empty__title">{{ t("What would you ask?") }}</h2>
            <p class="empty__text">{{ t(brand.text.chat_empty) }}</p>

            {# Only on a chat that does not exist yet. An empty chat someone
               opened on purpose already has a model and a prompt chosen. #}
            {% if not chat and suggestions %}
            <div class="suggestions">
              {% for suggestion in suggestions %}
              <button class="suggestion" type="button"
                      data-suggestion="{{ suggestion.prompt }}">
                <span class="suggestion__name">{{ t(suggestion.name) }}</span>
                {% if suggestion.description %}
                <span class="suggestion__note">{{ t(suggestion.description) }}</span>
                {% endif %}
              </button>
              {% endfor %}
            </div>
            {% endif %}
          </div>
          {% endif %}

          {# The same include the rewind response returns, so the conversation
             is described in one place. Markdown was rendered server-side in
             pages.py, keyed by message id. #}
          {% include "chat/_thread.html" %}
        </div>
      </div>

      {% if chat %}
      {#
        Where a reply that started outside a request arrives. A schedule
        firing, or a background helper ending with its note, wakes the chat
        server-side (`wake.wake_chat`) and there is no channel to say so: the
        only stream is per-message, opened by a bubble this page has not got.
        See `GET /api/chats/{id}/tail`, and `app.js` for the cursor -- which is
        read from the DOM on `htmx:configRequest`, not rendered here, because the
        DOM is the honest answer to what this page already holds.

        OUTSIDE `#thread`, not in it: a rewind and a compaction both swap
        `chat/_thread.html` into that container with `innerHTML`, and a poller
        living inside would be swapped away by the first one and never fire
        again. OUTSIDE the composer's form as well, and it names its own target
        regardless -- htmx inherits `hx-target`, the form carries `#thread`, and
        a polling chip that once lived inside it demonstrated what an unstated
        target does to a transcript.

        `hx-sync="this:drop"` because a poll fires whether or not the last one
        has come back, and two answers computed from the same cursor are two
        copies of one bubble. The composer's POST is the other writer, and
        `hx-sync` cannot order two elements: app.js keeps the poll quiet while
        the composer sends, aborts one already out when it starts, and removes
        any bubble the page already has from whatever lands in `#thread`.
      #}
      <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>
      {% endif %}

      {#
        A task chat has no composer, and that is the section rather than a
        restriction on it: a schedule's chat is written into by the schedule and
        read by a person, so there is nothing for them to send. The controls
        that *do* apply — run it now, pause it, edit it — take the row's place.

        Suppressed by not including it, not by hiding it. `chat/_composer.html`
        is the only thing that posts a message, so its absence is the guarantee;
        a hidden one would still be a form anybody could post to.
      #}
      {% if chat and chat.kind == "task" %}
        {% include "schedules/_strip.html" %}
      {% else %}
        {% if chat %}
        {# The chat's background jobs -- helpers started here, a device's jobs
           -- with Stop and a way into a helper. Above the plan, as the LLeMbas
           CLI's status bar sits above its prompt. #}
        {% with jobs = (jobs | default([])), oob = false %}
          {% include "chat/_jobs_strip.html" %}
        {% endwith %}
        {% endif %}
        {% with plan = (chat.plan if chat else {}), oob = false %}
          {% include "chat/_plan_panel.html" %}
        {% endwith %}
        {% include "chat/_composer.html" %}
      {% endif %}
    {% endif %}
  </main>

  {# The panels, mirroring the sidebar opposite, in the order they sit on
     screen: the terminal, then the inspector, then the chat's settings. Only
     ever one of them is open -- see the toggle group. #}
  {% if chat and chat.kind != "task" %}
    {% include "chat/_job_panel.html" %}
  {% endif %}
  {% if terminal_enabled %}
    {% include "chat/_terminal.html" %}
  {% endif %}
  {% if chat and user.is_admin %}
    {% include "chat/_inspector.html" %}
  {% endif %}
  {% if models and (chat or scope_families or scope_skills or scope_allow) and not (chat and chat.kind == "task") %}
    {% include "chat/_settings_panel.html" %}
  {% endif %}

  {#
    The window switch: on a phone, a side panel is the whole screen, and this is
    how you move between it and the conversation.

    A panel on a phone used to be a sheet over the conversation with a close
    button, which made the conversation a place you return to by closing
    things -- and the terminal and a prototype each a separate
    detour. Switching is the honest model at that width: there is room for one
    window, so say which, and let the others be one tap away.

    Shown only below the phone breakpoint and only while a panel is open (the
    `:has()` rule in app.css); above it the panels sit beside the conversation
    and the topbar buttons are the switch. `data-window` rather than
    `data-toggle`, because pressing the window you are in must not close it.
  #}
  <nav class="winswitch" aria-label="{{ t('Windows') }}" data-winswitch>
    <button class="winswitch__btn" type="button" data-window="" aria-pressed="true">
      {{ icon("chat", "icon--sm") }}<span class="winswitch__label">{{ t("Chat") }}</span>
    </button>
    {% if terminal_enabled %}
    <button class="winswitch__btn" type="button" data-window="#terminal" aria-pressed="false"
            {% if not chat %}data-agent-only hidden{% endif %}>
      {{ icon("terminal", "icon--sm") }}<span class="winswitch__label">{{ t("Terminal") }}</span>
    </button>
    {% endif %}
    {% if chat and chat.kind != "task" %}
    <button class="winswitch__btn" type="button" data-window="#jobpanel" aria-pressed="false"
            aria-label="{{ t('Helper') }}" title="{{ t('Helper') }}">
      {{ icon("sparkle", "icon--sm") }}
    </button>
    {% endif %}
    {% if models and (chat or scope_families or scope_skills or scope_allow) and not (chat and chat.kind == "task") %}
    <button class="winswitch__btn" type="button" data-window="#chat-settings" aria-pressed="false"
            aria-label="{{ t('Chat settings') }}" title="{{ t('Chat settings') }}">
      {{ icon("sliders", "icon--sm") }}
    </button>
    {% endif %}
    {% if chat and user.is_admin %}
    <button class="winswitch__btn" type="button" data-window="#inspector" aria-pressed="false"
            aria-label="{{ t('Inspect this chat') }}" title="{{ t('Inspect this chat') }}">
      {{ icon("search", "icon--sm") }}
    </button>
    {% endif %}
  </nav>
</div>
{% endblock %}

{% block scripts %}
{# Unconditional: every chat has a transcript, and this is what keeps a block
   somebody opened open across the swaps that arrive twelve times a second. #}
<script src="{{ asset('js/steps.js') }}" defer></script>
{% if terminal_enabled %}
{# Only where it can be used. xterm is nearly three times everything else
   vendored, so a plain chat must never load it. #}
<script src="{{ asset('vendor/xterm.js') }}" defer></script>
<script src="{{ asset('vendor/xterm-addon-fit.js') }}" defer></script>
<script src="{{ asset('js/terminal.js') }}" defer></script>
{% endif %}
{#- The `python` tool's runner: only on a chat that may use it, with Python
    switched on by an administrator and Pyodide fetched and verified on this
    server (api/pyodide.py, services/pyodide_files.py). -#}
{% if chat and python_runner is defined and python_runner(chat) %}
<div hidden data-python-runner data-chat-id="{{ chat.id }}"
     data-worker-src="{{ asset('js/python-worker.js') }}"
     data-pyodide-index="{{ pyodide_index_url() }}"></div>
<script src="{{ asset('js/python.js') }}" defer></script>
{% endif %}
{% endblock %}