{% import "components.html" as c with context %}
{% set sharing = share_data is defined %}
{% set base = "/computers/" ~ ref(selected.computer.id) %}
<div id="computer-view" hx-get="/computers/{{ ref(selected.computer.id) }}/detail{% if sharing %}?tab=sharing{% endif %}" hx-trigger="poll-refresh, agents-changed from:body" x-poll data-poll='{{ poll("computer", selected)|tojson }}' x-data="computerState" data-computer='{{ poll("computer-state", selected)|tojson }}' hx-swap="outerMorph">
{% call c.column_header(selected.computer.name, back="/computers") %}
  <span class="sub">{% if selected.system in c.os_icons %}<span class="os" title="{{ t.text("system." ~ selected.system) if t.has("system." ~ selected.system) else selected.system }}">{{ c.icon(c.os_icons[selected.system]) }}</span>{% endif %}<span x-show="queued" x-text='{{ t.text("computers.queue", {"queued": "{queued}"})|tojson }}.replace("{queued}", queued)'></span></span>
{% endcall %}
{% if permissions.COMPUTERS_SHARE in selected.actions %}
<div class="switch text">
  <button class="tab{% if not sharing %} on{% endif %}" type="button" hx-get="{{ base }}" hx-target="#main" hx-swap="innerHTML" hx-push-url="true">{{ t.text("computers.overview") }}</button>
  <button class="tab{% if sharing %} on{% endif %}" type="button" hx-get="{{ base }}?tab=sharing" hx-target="#main" hx-swap="innerHTML" hx-push-url="true">{{ t.text("profile_tab.sharing") }}</button>
</div>
{% endif %}
<div class="body">
{% if sharing %}
  {% include "shares.html" %}
{% else %}
  {# the commands that connect a computer just added, shown this once at the
     top of its page; the pane's refresh has no token to show, so the box
     keeps what it holds. the boxes marked to be skipped are named by their
     computer, so a morph onto another computer's page never takes one for
     its own #}
  <div id="connect-{{ ref(selected.computer.id) }}" hx-morph-skip>{% if enrolment is defined and enrolment %}{% include "enrolled.html" %}{% endif %}</div>
  {{ c.section_title(t.text("computers.agents")) }}
  {# the agents in a box of their own, the way to add one hanging off its corner #}
  <div class="roster">
    {% for agent in selected.agents %}
    {% set attrs %}x-data="agentStatus" data-agent='{{ dict(poll("agent-status", agent), labels=status_labels)|tojson }}'{% endset %}
    {{ c.list_item(agent.name, icons=c.agent_icons(agent, with_system=false), settings="/agents/" ~ ref(selected.computer.id) ~ "/" ~ ref(agent.id) ~ "/profile", status=agent.status, identity=agent.name, href="/agents/" ~ ref(selected.computer.id) ~ "/" ~ ref(agent.id), off=(agent.status == "offline"), live_status=true, attrs=attrs) }}
    {% endfor %}
    {% if not selected.agents %}{{ c.empty(t.text("computers.no_agents"), "users") }}{% endif %}
  </div>
  {% if permissions.AGENTS_CREATE in selected.actions %}<div class="roster-foot"><button class="add" type="button" hx-get="/computers/{{ ref(selected.computer.id) }}/agents/new" x-bind="opener" hx-target="#agent-new" hx-swap="outerHTML" title="{{ t.text("computers.new_agent") }}" aria-label="{{ t.text("computers.new_agent") }}" :disabled="!online"{% if not selected.online %} disabled{% endif %}>{{ c.icon("plus") }}</button></div>{% endif %}
  {# the question takes the button's place whole - a morph would leave a
     box marked to be skipped as it is - and the mark then keeps the pane's
     refresh from putting the button back #}
  {% if permissions.COMPUTERS_DELETE in selected.actions %}<div class="dialog danger" id="remove-{{ ref(selected.computer.id) }}" hx-morph-skip>
    <h3>{{ t.text("computers.remove") }}</h3>
    <p class="st">{{ t.text("computers.remove_hint") }}</p>
    <button class="btn danger" hx-get="/computers/{{ ref(selected.computer.id) }}/remove" hx-target="#remove-{{ ref(selected.computer.id) }}" hx-swap="outerHTML">{{ c.icon("trash-2") }} {{ t.text("computers.remove") }}</button>
  </div>{% endif %}
{% endif %}
</div>
</div>