{% import "components.html" as c with context %}
<div class="col list">
  {% call c.column_header(t.text("computers.title")) %}
    <button class="btn icon" hx-get="/computers/new" hx-target="#enrol" hx-swap="outerHTML" title="{{ t.text("computers.add") }}" aria-label="{{ t.text("computers.add") }}">{{ c.icon("plus") }}</button>
  {% endcall %}
  {% include "computer_list.html" %}
</div>
<div class="col wide" id="computer-detail">
  {% if selected %}{% include "computer_detail.html" %}{% endif %}
</div>
<div id="enrol" hidden></div>
<div id="agent-new" hidden></div>
{# what the dialog shows at once while the computer is asked what it can run #}