{% if tenants %}
<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">Tenant / User</th>
      <th class="px-5 py-3">Credentials</th>
      <th class="px-5 py-3">Live Devices</th>
      <th class="px-5 py-3">Created</th>
      <th class="px-5 py-3">Actions</th>
    </tr>
  </thead>
  <tbody class="divide-y divide-gray-100">
    {% for tenant in tenants %}
    <tr class="hover:bg-gray-50">
      <td class="px-5 py-3">
        <div class="text-sm font-medium text-gray-900">{{ tenant.name }}</div>
        <div class="text-xs text-gray-400">device-connect.{{ tenant.name }}.&gt;</div>
      </td>
      <td class="px-5 py-3 text-sm text-gray-600">{{ tenant.cred_count }}</td>
      <td class="px-5 py-3">
        {% if tenant.online > 0 %}
        <span class="inline-flex items-center text-sm text-green-700">
          <span class="w-1.5 h-1.5 bg-green-500 rounded-full mr-1 pulse-dot"></span>
          {{ tenant.online }} online, {{ tenant.total }} registered
        </span>
        {% elif tenant.total > 0 %}
        <span class="text-sm text-gray-500">{{ tenant.total }} registered</span>
        {% else %}
        <span class="text-sm text-gray-400">—</span>
        {% endif %}
      </td>
      <td class="px-5 py-3 text-sm text-gray-400">{{ tenant.created_at | default("—", true) }}</td>
      <td class="px-5 py-3">
        <a href="/admin/tenants/{{ tenant.name }}"
           class="text-sm text-indigo-600 hover:text-indigo-800 font-medium">View as User</a>
      </td>
    </tr>
    {% endfor %}
  </tbody>
</table>
{% else %}
<div class="px-5 py-8 text-center text-gray-400 text-sm">
  No tenants yet. Users will appear here when they sign up.
</div>
{% endif %}