{% if views %}
<div class="panel table-wrap">
  <table class="t">
    <thead><tr><th>User</th><th>Machine</th><th>Laptop IP</th><th>State</th><th>Started</th><th>Duration</th><th>Traffic</th>{% if current_user.is_admin %}<th></th>{% endif %}</tr></thead>
    <tbody>
    {% for v in views %}
      <tr>
        <td>
          <div style="display:flex;align-items:center;gap:10px">
            <span class="avatar">{{ v.holder|initials }}</span>
            <div>{{ v.holder }}<small class="mono">{{ v.username }}</small></div>
          </div>
        </td>
        <td class="host"><a href="/machines/{{ v.machine_id }}">{{ v.hostname }}</a></td>
        <td class="mono">{{ v.laptop_ip }}{% if v.port_code %}<small>port {{ v.port_code }}</small>{% endif %}</td>
        <td>
          {% if v.state == 'armed' %}<span class="chip warn">Armed, {{ v.seconds_left }}s left</span>
          {% elif v.state == 'grace' %}<span class="chip warn">Reconnecting, {{ v.seconds_left }}s left</span>
          {% elif v.state == 'connecting' %}<span class="chip idle">Connecting</span>
          {% else %}<span class="chip info">Connected</span>{% endif %}
        </td>
        <td>{{ v.started_at|localtime('%H:%M:%S') }}</td>
        <td>{{ v.started_at|since }}</td>
        <td>{{ v.bytes_up|filesize }} up<small>{{ v.bytes_down|filesize }} down</small></td>
        {% if current_user.is_admin %}
        <td class="go"><button type="button" class="btn btn-ghost btn-sm" data-force="{{ v.machine_id }}" data-force-label="{{ v.holder }} on {{ v.hostname }}">Force disconnect</button></td>
        {% endif %}
      </tr>
    {% endfor %}
    </tbody>
  </table>
</div>
{% else %}
<div class="panel">
  <div class="empty">
    <span class="empty-mark">{{ icon('activity', 24) }}</span>
    <h2>Nobody is connected right now</h2>
    <p>Sessions appear here the moment someone clicks Connect.</p>
  </div>
</div>
{% endif %}