{{define "hx_roles"}}
<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">Role Name</th>
        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Description</th>
        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Permissions</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 .Roles}}
      <tr>
        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">{{.Name}}</td>
        <td class="px-6 py-4 text-sm text-gray-500">{{.Description}}</td>
        <td class="px-6 py-4 text-sm text-gray-500">
          {{range .Permissions}}
            <span class="inline-block bg-green-100 text-green-800 text-xs px-2 py-1 rounded mr-1 mb-1">{{.Name}}</span>
          {{else}}
            <span class="text-gray-400">No permissions</span>
          {{end}}
        </td>
        <td class="px-6 py-4 whitespace-nowrap text-sm">
          <button hx-post="/admin/roles/{{.ID}}/delete" 
                  hx-confirm="Are you sure you want to delete role {{.Name}}?"
                  hx-target="#roles-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 roles found</td>
      </tr>
      {{end}}
    </tbody>
  </table>
</div>
{{end}}