{% import "components.html" as c with context %}
{# a row is named by two numbers, its computer's and its own #}
{% for agent in page.agents %}
{% set key = ref(agent.computer_id) ~ "/" ~ ref(agent.id) %}
{% call c.list_item(agent.name, icons=c.agent_icons(agent), settings="/agents/" ~ key ~ "/profile", status=agent.status, identity=agent.name, href="/agents/" ~ key, on=(selected_key == key), off=(agent.status == "offline"), extra_class="agent", id="agent-" ~ key|replace("/", "-"), opens=".agent") %}
  {# the card shows while the pointer is on the avatar, by the pointer; it
     fetches itself the first time the mouse enters its row #}
  <div class="card" hx-morph-skip hx-get="/agents/{{ key }}/activity" hx-trigger='mouseenter once from:"closest .agent"' hx-target="this" hx-swap="innerMorph"><div class="loading">{{ c.icon("loader-circle") }}</div></div>
{% endcall %}
{% endfor %}
{% if page.edge %}{% set edge = ref(page.agents[-1].computer_id) ~ "/" ~ ref(page.agents[-1].id) %}{{ c.edge(edge, page.more, "/agents/list?after=" ~ edge ~ ("&selected=" ~ selected_key if selected_key else "")) }}{% endif %}