{% extends "server/base.html" %}
{% import "computers/macros.html" as m %}
{# the overview's stalls: a section of its own, a card a computer under its awning #}
{% block root %} class="stalls-page"{% endblock %}
{% block top %}{% endblock %}
{% block title %}{{ t.text("computers.stalls") }}{% endblock %}
{% block head %}<link rel="stylesheet" href="{{ asset('computers.css') }}">{% endblock %}
{% block body %}
<section id="stalls" data-topic="computers.list" data-seen='{{ state | tojson }}' hx-get="/ui/computers/stall" hx-trigger="bazaar:change" hx-select="#stalls" hx-target="#stalls" hx-swap="outerHTML">
  <div class="section-title"><h2>{{ t.text("computers.stalls") }}</h2><span class="sub">{{ t.text("computers.stalls.counted", {"total": total, "away": away}) if away else t.text("computers.stalls.total", {"total": total}) }}</span><a class="more" href="/computers" target="_top">{{ t.text("computers.all") }}{% include "computers/icons/chevron-right.svg" %}</a></div>
  {% if rows %}
  <div class="stalls">
    {% for row in rows %}
    <a class="card stall stall-{{ row.computer.name | tint }}{% if not row.online %} away{% endif %}" href="/computers" target="_top">
      {{ m.awning(ref(row.computer.id)) }}
      <div class="stall-hd">{{ m.os(row.host) }}<div><div class="name">{{ row.computer.name }}</div><div class="meta">{% if row.host %}{{ row.host.name }} · {{ row.host.version }}{% else %}—{% endif %}</div></div><div class="right"><span class="online{% if not row.online %} off{% endif %}">{% if row.online %}{{ t.text("computers.online") }}{% elif row.seen_ms %}{{ t.text("computers.away_for", {"lasting": row.seen_ms | lasting}) }}{% else %}{{ t.text("computers.offline") }}{% endif %}</span></div></div>
    </a>
    {% endfor %}
  </div>
  {% else %}
  <p class="empty">{{ t.text("computers.none") }}</p>
  {% endif %}
</section>
{% endblock %}