{# Счётчики-двери: каждый — фильтр машин ниже (второй клик снимает, «все»
   сбрасывает; javascript — в overview.html). Сумм часов по компании тут нет
   намеренно: «8 часов на троих» не вопрос главной, часы каждого — в его
   карточке и в «Неделе по сотрудникам» (решение владельца 18.08).

   Точка у цифры — тот же язык, что у пилюль состояния на карточках машин:
   зелёная пульсирует у работающих (как live-точка в шапке и штриховка «идёт
   сейчас»), красная — у недоступных, серая — у тихих. Пустая корзина гаснет:
   глаз сравнивает живые цифры, а не читает четыре одинаковые плитки. #}
{# Блок сворачивается, как остальные (просьба владельца 19.08): обёртка-карточка
   без своей рамки. В свёрнутом виде те же счётчики строкой пилюль, и они
   остаются кликабельными фильтрами. #}
{# Пустая корзина не показывается вовсе (чистка 06.09): «перерыв 0» и
   «недоступны 0» занимали четверть первого экрана, чтобы сообщить, что
   рассказывать нечего. Нечего — значит молчим; корзина вернётся с первой
   машиной в ней. #}
{# С 08.09 (владелец: «сверху всё в виде карточек, если событий нет — 0»)
   четыре карточки стоят ВСЕГДА, пустая корзина показывает ноль: строка
   карточек не должна менять состав от часа к часу. Карточки — двери-фильтры,
   как и раньше: клик оставляет внизу только машины этой корзины. #}
{% set t = card.data %}
<div class="card herowrap" data-fold="counters">
<div class="hero4">
  <button class="card hero" type="button" data-filter="all">
    <div class="hn">{{ tr('всего машин') }}</div>
    <div class="hk">{{ t.total }}</div>
    <div class="hs">{{ tr('на связи') }} {{ t.live }} · {{ tr('сегодня работали {n}').format(n=t.worked_today) }}</div>
  </button>
  <button class="card hero {{ 'zero' if not t.n.work }}" type="button" data-filter="work">
    <div class="hn">{{ tr('сейчас работают') }}</div>
    <div class="hk"><i class="hdot" aria-hidden="true"></i>{{ t.n.work }}</div>
    <div class="hs">{% if t.waiting_now %}{{ tr('из них ждут машину: {n}').format(n=t.waiting_now) }}{% elif not t.n.work %}{{ tr('ввода нет ни на одной') }}{% endif %}</div>
  </button>
  <button class="card hero {{ 'zero' if not t.n.quiet }}" type="button" data-filter="quiet">
    <div class="hn">{{ tr('перерыв') }}</div>
    <div class="hk"><i class="hdot" aria-hidden="true"></i>{{ t.n.quiet }}</div>
    <div class="hs">{{ tr('на связи, но ввода нет') }}</div>
  </button>
  <button class="card hero {{ 'zero' if not (t.n.off + t.n.pause) }}" type="button" data-filter="off">
    <div class="hn">{{ tr('недоступны') }}</div>
    <div class="hk"><i class="hdot" aria-hidden="true"></i>{{ t.n.off + t.n.pause }}</div>
    <div class="hs">{% if t.n.pause %}{{ tr('из них на паузе: {n}').format(n=t.n.pause) }}{% elif t.n.off %}{{ tr('агент не выходит на связь') }}{% else %}{{ tr('все на связи') }}{% endif %}</div>
  </button>
</div>
<span class="heropills">
  <button type="button" data-filter="all">{{ tr('все') }} <b>{{ t.total }}</b></button>
  <button type="button" class="{{ 'zero' if not t.n.work }}" data-filter="work"><i class="hdot" aria-hidden="true"></i>{{ tr('работают') }} <b>{{ t.n.work }}</b></button>
  <button type="button" class="{{ 'zero' if not t.n.quiet }}" data-filter="quiet"><i class="hdot" aria-hidden="true"></i>{{ tr('перерыв') }} <b>{{ t.n.quiet }}</b></button>
  <button type="button" class="{{ 'zero' if not (t.n.off + t.n.pause) }}" data-filter="off"><i class="hdot" aria-hidden="true"></i>{{ tr('недоступны') }} <b>{{ t.n.off + t.n.pause }}</b></button>
</span>
</div>