{% import "components.html" as c with context %}
{% set key = ref(agent.computer_id) ~ "/" ~ ref(agent.id) %}
{% set attributes %}data-agent='{{ dict(poll("agent-status", agent), labels=status_labels)|tojson }}' x-poll data-poll='{{ poll("agent-info", agent)|tojson }}' data-poll-url="/agents/{{ key }}/row" hx-vals='js:{selected: this.classList.contains("on") ? "{{ key }}" : ""}'{% endset %}
{% 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", live_status=true, attrs=attributes) %}
  {# 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" :style="{left: left + 'px', top: top + 'px'}" 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") }}</div></div>
{% endcall %}