{{ define "devices-table" }}
{{ range .Devices }}
<tr id="device-{{ .ID }}">
    <td><span class="truncate inline-block max-w-xs align-middle" title="{{ .Name }}">{{ .Name }}</span></td>
    <td class="font-mono text-sm"><span class="truncate inline-block max-w-48 align-middle" title="{{ .IPAddress }}">{{ if .IPAddress }}{{ .IPAddress }}{{ else }}Unknown{{ end }}</span></td>
    <td>{{ formatDate .CreatedAt }}</td>
    <td>{{ if isZeroTime .LastUsed }}Never{{ else }}{{ formatDate .LastUsed }}{{ end }}</td>
    <td>
        <button class="btn btn-ghost btn-sm text-error"
                hx-delete="/api/devices/{{ .ID }}"
                hx-target="#device-{{ .ID }}"
                hx-swap="delete"
                hx-confirm="Revoke access for {{ .Name }}?"
                aria-label="Revoke access for {{ .Name }}">
            {{ icon "trash-2" "size-4" }}
        </button>
    </td>
</tr>
{{ else }}
<tr><td colspan="5" class="text-center text-base-content/60">No authorized devices yet. Follow the setup instructions above!</td></tr>
{{ end }}
{{ end }}