{% import "components.html" as c with context %}
{% for item in listing.contacts %}
{% set when = " · " ~ c.time(item.last_activity_at_ms) if item.last_activity_at_ms else "" %}
{% set href = "/agents/" ~ ref(listing.agent.computer_id) ~ "/" ~ ref(listing.agent.id) ~ "/contacts/" ~ ref(item.thread_id) ~ "?actor=" ~ ref(item.actor_id) ~ "&target=" ~ ref(item.target) ~ "&channel=" ~ item.channel|urlencode ~ "&name=" ~ item.name|urlencode ~ ("&latest=" ~ item.latest_message_id|urlencode if item.latest_message_id else "") ~ ("&review=pending" if item.review == "pending" else "") %}
{# the conversation opens in the right column alone; the row takes the
   highlight itself, so the list is not asked for again #}
{% set attrs %}hx-swap="outerHTML" @click="selected = $el.id"
@click.capture="if (!$event.ctrlKey && !$event.metaKey && !$event.shiftKey && !$event.altKey && $el.id === 'contact-' + document.getElementById('chat').dataset.thread) { selected = $el.id; $event.preventDefault(); $event.stopImmediatePropagation(); }"
:class="{on: selected === $el.id}" data-contact='{{ {"thread": ref(item.thread_id)|string, "name": item.name}|tojson }}'{% endset %}
{% call c.list_item(item.name, c.channels((item.channel,)) ~ t.text("contacts." ~ item.kind) ~ when, identity=item.thread_id, href=href, on=(selected_thread == ref(item.thread_id)|string), id="contact-" ~ ref(item.thread_id), target="#chat", attrs=attrs) %}
  {# what has come in and not been read yet, counted the way a chat list
     counts it: a red pill at the row's end, capped where it stops meaning #}
  {% if item.pending %}<span class="n">{{ item.pending if item.pending < 100 else "99+" }}</span>{% endif %}
{% endcall %}
{% endfor %}
{% if listing.edge %}{{ c.edge(listing.edge, listing.more, "/agents/" ~ ref(listing.agent.computer_id) ~ "/" ~ ref(listing.agent.id) ~ "/contacts?offset=" ~ listing.edge ~ ("&selected=" ~ selected_thread if selected_thread else "") ~ ("&review=pending" if listing.review == "pending" else "")) }}{% endif %}