{% extends 'ls_portal/base.html' %}
{% block body_class %}chat-page{% endblock %}
{% block content %}
<section class="chat-shell">
  <header class="chat-header header app-topbar">
    <div class="slim-header-row">
      <div class="slim-title-wrap">
        <div class="kicker">Haigh Environmental Executive Assistant</div>
        <h1 class="title">{{ current_account.display_name or current_account.username }}</h1>
        <div class="subtitle muted">Old chat archive</div>
      </div>
      <details class="header-menu">
        <summary class="burger-button" aria-label="Open menu">☰</summary>
        <nav class="menu-panel" aria-label="Operator navigation">
          <a href="{{ url_for('ls_portal_bp.home') }}">Chat</a>
          <a class="is-active" href="{{ url_for('ls_portal_bp.archive') }}">Archive</a>
          <a href="{{ url_for('ls_portal_bp.plans') }}">To-Dos{% if state.blocked_count %} <span class="nav-count">{{ state.blocked_count }}</span>{% endif %}</a>
          {% if approvals_enabled %}
            <a href="{{ url_for('ls_portal_bp.approvals') }}">Approvals{% if state.approvals_pending_count %} <span class="nav-count">{{ state.approvals_pending_count }}</span>{% endif %}</a>
          {% endif %}
          <a href="{{ url_for('ls_portal_bp.ops') }}">Ops{% if unread_notification_count %} <span class="nav-count">{{ unread_notification_count }}</span>{% endif %}</a>
          {% if current_account.can_manage_accounts or current_account.is_superuser %}
            <a href="{{ url_for('ls_portal_bp.accounts') }}">Accounts</a>
          {% endif %}
        </nav>
      </details>
    </div>
  </header>

  <section class="panel">
    <div class="stack">
      <div>
        <div class="kicker">Action Mode</div>
        {% if messages %}
          <section class="chat-thread" aria-live="polite">
            {% for row in messages %}
              <article class="message message-{{ 'assistant' if row.role == 'assistant' else 'user' }}" data-message-id="{{ row.id }}">
                <div class="message-body{% if row.task_status %} has-status{% endif %}">
                  <div class="message-content" data-compact-text>{{ row.content }}</div>
                  {% if row.task_status %}<div class="message-status-overlay">{{ row.task_status }}</div>{% endif %}
                </div>
                <div class="message-meta muted">
                  Archived {{ row.archived_at or row.updated_at or row.created_at }}
                </div>
                {% if row.last_error %}
                  <div class="message-meta">
                    <span class="danger">{{ row.last_error }}</span>
                  </div>
                {% endif %}
              </article>
            {% endfor %}
          </section>
        {% else %}
          <div class="muted">No archived action messages.</div>
        {% endif %}
      </div>

      <div>
        <div class="kicker">Instant Mode</div>
        {% if instant_messages %}
          <section class="chat-thread" aria-live="polite">
            {% for row in instant_messages %}
              <article class="message message-{{ 'assistant' if row.role == 'assistant' else 'user' }}" data-message-id="{{ row.id }}">
                <div class="message-body{% if row.task_status %} has-status{% endif %}">
                  <div class="message-content" data-compact-text>{{ row.content }}</div>
                  {% if row.task_status %}<div class="message-status-overlay">{{ row.task_status }}</div>{% endif %}
                </div>
                <div class="message-meta muted">
                  Archived {{ row.archived_at or row.updated_at or row.created_at }}
                </div>
                {% if row.last_error %}
                  <div class="message-meta">
                    <span class="danger">{{ row.last_error }}</span>
                  </div>
                {% endif %}
              </article>
            {% endfor %}
          </section>
        {% else %}
          <div class="muted">No archived instant messages.</div>
        {% endif %}
      </div>
    </div>
  </section>
</section>
{% endblock %}