{% comment %}
One kind of port on one device, or across the rack: how many are in use and how many are left.
The bar is the quick read; the numbers are the answer.
{% endcomment %}
<div class="lens-alloc__row">
  <div class="lens-alloc__head">
    <span class="lens-alloc__label">{{ group.label }}</span>
    <span class="lens-alloc__count">
      <strong>{{ group.free }}</strong> free of {{ group.total }}
    </span>
  </div>
  <div class="lens-alloc__bar" role="img"
       aria-label="{{ group.connected }} of {{ group.total }} {{ group.label|lower }} connected">
    <span class="lens-alloc__fill lens-alloc__fill--{{ group.kind }}" style="width: {{ group.percent|floatformat:1 }}%;"></span>
  </div>
</div>