{% extends "base.html" %}
{% block body %}
<div class="pending">
  <nav aria-label="Pending" class="queue">
    <h2>{{ S["queue.title"] }}{% if rows %} <span>{{ t("queue.count", n=rows | length) }}</span>{% endif %}</h2>
    {%- if rows or notices %}
    <ul>
      {%- for r in rows %}
      <li><a href="/pending/{{ r.id }}"{% if r.id == open_id %} aria-current="true" class="open"{% endif %}><span class="kind">{{ r.label }}</span><span class="title">{{ r.title }}</span><span class="meta">{{ r.meta }}</span></a></li>
      {%- endfor %}
      {#- Quarantine notices, pinned at the end (the tap spec §3.1, R3): the only red in the queue. #}
      {%- for n in notices %}
      <li class="notice"><span class="kind alarm">{{ S["kind.quarantine"] }}</span><span class="title">{{ n.title }}</span><span class="meta">{{ n.meta }}</span></li>
      {%- endfor %}
    </ul>
    {%- endif %}
    {%- if not rows %}
    <p>{{ S["queue.empty"] }}</p>
    {%- endif %}
  </nav>
  <main aria-label="Proposal">
    {%- if message and not detail %}
    <p class="outcome{% if message[0] in ('error', 'lapsed') %} alarm-text{% endif %}" role="status">{{ message[1] }}</p>
    {%- endif %}
    {%- if detail %}
    <p class="ref">{{ detail.ref }}</p>
    <h1 tabindex="-1" autofocus>{{ detail.title }}</h1>
    <blockquote class="reason"><cite>{{ t("reason.attr", who=detail.who) }}</cite>
      {%- if detail.reason_cut %} “{{ detail.reason_cut }}…”<details><summary>{{ S["reason.more"] }}</summary><p>“{{ detail.reason }}”</p></details>
      {%- elif detail.reason %} “{{ detail.reason }}”
      {%- else %} <span class="ink-3">{{ S["reason.none"] }}</span>{% endif %}
    </blockquote>

    <section>
      <h2>{{ S["section.moves"] }}</h2>
      <table>
        <thead><tr><th scope="col">kind</th><th scope="col">item</th><th scope="col">trust now</th><th scope="col">after move</th></tr></thead>
        <tbody>
          {%- for r in detail.moves %}
          {% include "_manifest_row.html" %}
          {%- endfor %}
        </tbody>
      </table>
      {%- if detail.more_moves %}
      <details><summary>+ {{ detail.more_moves | length }} more</summary><table><tbody>
        {%- for r in detail.more_moves %}
        {% include "_manifest_row.html" %}
        {%- endfor %}
      </tbody></table></details>
      {%- endif %}
    </section>

    <section>
      <h2>{{ t("section.audience", destination=detail.dest) }}</h2>
      <p>{{ detail.count }}</p>
      <ul class="chips" aria-label="Audience">
        {%- for a in detail.chips %}
        <li>{% if a.principal == "interactive" %}{{ a.owner }}{% else %}agent:{{ a.client }}{% endif %} · {{ a.role }}</li>
        {%- endfor %}
      </ul>
      {%- if detail.more_chips %}
      <details><summary>+ {{ detail.more_chips | length }} more</summary><ul class="chips">
        {%- for a in detail.more_chips %}
        <li>{% if a.principal == "interactive" %}{{ a.owner }}{% else %}agent:{{ a.client }}{% endif %} · {{ a.role }}</li>
        {%- endfor %}
      </ul></details>
      {%- endif %}
      {%- if detail.consequence %}
      <div class="box"><p>{{ detail.consequence }}</p></div>
      {%- endif %}
    </section>

    <section role="region" aria-labelledby="presence-h" class="box" id="presence" data-acts{% if detail.arm %} hx-get="/pending/{{ detail.id }}" hx-trigger="load delay:{{ refresh or 10 }}s" hx-select="#presence" hx-target="this" hx-swap="outerHTML"{% endif %}>
      <h2 id="presence-h">{{ S["section.presence"] }}</h2>
      {%- if message %}
      <p class="outcome{% if message[0] in ('error', 'lapsed') %} alarm-text{% endif %}" role="status">{{ message[1] }}</p>
      {%- endif %}
      {#- R9 error and lapsed revert to ready: the red line, and the acts again. #}
      {%- if not message or message[0] in ('error', 'lapsed') %}
      <p>{{ detail.presence }}</p>
      {%- if detail.terms %}<p class="mono">{{ detail.terms }}</p>{% endif %}
      {% include "_window.html" %}
      <form method="post" action="/pending/{{ detail.id }}" class="acts" hx-post="/pending/{{ detail.id }}" hx-target="#presence" hx-select="#presence" hx-swap="outerHTML" hx-indicator="#presence" hx-disabled-elt="#presence button">
        <input type="hidden" name="csrf" value="{{ detail.csrf }}">
        {%- if detail.blocked %}
        <p class="alarm-line" role="status">{{ detail.blocked }}</p>
        {%- elif detail.arm %}
        <input type="hidden" name="arm" value="{{ detail.arm.token }}">
        <input type="hidden" name="mode" value="{{ detail.arm.mode }}">
        <button class="act" name="step" value="confirm"><span class="idle">{{ S["act.confirm"] }}</span><span class="busy">{{ S["act.inflight"] }}</span></button>
        <span class="sr" aria-live="polite">{{ S["act.confirm.sr"] }}</span>
        {%- else %}
        <button class="act" name="step" value="arm"><span class="idle">{{ S["act.sign"] }}</span><span class="busy">{{ S["act.inflight"] }}</span></button>
        {%- endif %}
        <button name="step" value="deny">{{ S["act.deny"] }}</button>
        {%- if detail.nowindow and not detail.arm and not detail.blocked %}
        <button class="ghost" name="step" value="arm_once">{{ S["act.nowindow"] }}</button>
        {%- endif %}
      </form>
      {%- endif %}
    </section>
    {%- endif %}
  </main>
</div>
{% endblock %}