{% if devices %}
<table class="w-full">
  <thead>
    <tr class="text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
      <th class="px-5 py-3">Device ID</th>
      <th class="px-5 py-3">Type</th>
      <th class="px-5 py-3">Status</th>
      <th class="px-5 py-3">Location</th>
      <th class="px-5 py-3">Last Seen</th>
    </tr>
  </thead>
  <tbody class="divide-y divide-gray-100">
    {% for device in devices %}{% include "devices/_device_row_pair.html" %}{% endfor %}
  </tbody>
</table>

{% else %}
<div class="px-5 py-8 text-center">
  <svg class="mx-auto h-10 w-10 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2z"/>
  </svg>
  <p class="mt-2 text-sm text-gray-500">No devices registered yet</p>
  <p class="text-xs text-gray-400 mt-1">Devices will appear here as they connect to the network</p>
</div>
{% endif %}

{# Out-of-band card refresh: each htmx swap of #live-devices also
   updates the header counters in place, so they don't freeze at the
   value captured during the initial dashboard render. #}
<span id="online-count" hx-swap-oob="innerHTML">{{ online_count }}</span>
<span id="registered-count" hx-swap-oob="innerHTML">{{ registered_count }}</span>
<span id="creds-count" hx-swap-oob="innerHTML">{{ creds_count }}</span>