{{define "hx_users"}}
<div class="bg-white rounded-lg shadow-md overflow-hidden">
  <table class="min-w-full divide-y divide-gray-200">
    <thead class="bg-gray-50">
      <tr>
        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Username</th>
        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Roles</th>
        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Created</th>
        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
      </tr>
    </thead>
    <tbody class="bg-white divide-y divide-gray-200">
      {{range .Users}}
      <tr>
        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">{{.Username}}</td>
        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
          {{range .Roles}}
            <span class="inline-block bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded mr-1">{{.Name}}</span>
          {{else}}
            <span class="text-gray-400">No roles</span>
          {{end}}
        </td>
        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{.CreatedAt}}</td>
        <td class="px-6 py-4 whitespace-nowrap text-sm">
          <button hx-post="/admin/users/{{.ID}}/delete" 
                  hx-confirm="Are you sure you want to delete user {{.Username}}?"
                  hx-target="#users-list" 
                  hx-swap="outerHTML"
                  class="text-red-600 hover:text-red-900">Delete</button>
        </td>
      </tr>
      {{else}}
      <tr>
        <td colspan="4" class="px-6 py-4 text-center text-gray-500">No users found</td>
      </tr>
      {{end}}
    </tbody>
  </table>
</div>
{{end}}