{% import "components.html" as c with context %}
{% set url = "/agents/" ~ ref(listing.agent.computer_id) ~ "/" ~ ref(listing.agent.id) ~ "/contacts" %}
{% set tab = "&review=pending" if listing.review == "pending" else "" %}
{# the column asks whether anything has arrived or left since it was read,
   and only then for itself again, as far as it has been scrolled and with
   the row that is open now; the new column is morphed into the old one so
   the rows keep their identity. the tabs above it are the page's; the
   count of those waiting is carried to its tab with every answer #}
<span class="n" id="pending-review" hx-swap-oob="outerHTML"{% if not listing.pending_review %} hidden{% endif %}>{{ listing.pending_review or "" }}</span>
<div class="list-items" id="contacts" hx-get="{{ url }}?since={{ listing.since }}&shown={{ listing.answer }}{{ tab }}" hx-vals='js:{until: this.querySelector(".edge")?.dataset.after ?? "", selected: this.querySelector(".li.on")?.id.slice(8) ?? ""}' hx-trigger="every 5s" hx-swap="outerMorph">
  {% include "contact_rows.html" %}
  {% if listing.answer == "offline" %}
  {{ c.empty(t.text("contacts.offline")) }}
  {% elif listing.answer != "listed" %}
  <div class="empty">{{ t.text("contacts." ~ listing.answer, {"code": listing.code}) }} <button class="btn sm" hx-get="{{ url }}{% if selected_thread %}?selected={{ selected_thread }}{% endif %}{{ tab|replace("&", "&" if selected_thread else "?", 1) }}" hx-target="#contacts" hx-swap="outerHTML">{{ t.text("contacts.retry") }}</button></div>
  {% elif not listing.contacts %}
  {{ c.empty(t.text("contacts.no_requests" if listing.review == "pending" else "contacts.empty")) }}
  {% endif %}
</div>