{{define "roles"}}
{{template "base" .}}
{{define "content"}}
<div class="container mx-auto p-4">
  <div class="flex justify-between items-center mb-6">
    <h1 class="text-3xl font-bold">Role Management</h1>
    <a href="/dashboard" class="text-blue-600 hover:underline">← Back to Dashboard</a>
  </div>

  <div class="bg-white rounded-lg shadow-md p-6 mb-6">
    <h2 class="text-xl font-semibold mb-4">Create New Role</h2>
    <form hx-post="/admin/roles/create" hx-target="#roles-list" hx-swap="outerHTML" hx-trigger="submit" hx-on::after-request="this.reset()">
      <div class="grid grid-cols-2 gap-4 mb-4">
        <div>
          <label for="name" class="block text-sm font-medium text-gray-700 mb-1">Role Name</label>
          <input type="text" id="name" name="name" required
                 class="w-full px-3 py-2 border border-gray-300 rounded-md">
        </div>
        <div>
          <label for="description" class="block text-sm font-medium text-gray-700 mb-1">Description</label>
          <input type="text" id="description" name="description"
                 class="w-full px-3 py-2 border border-gray-300 rounded-md">
        </div>
      </div>
      <button type="submit" class="bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700">
        Create Role
      </button>
    </form>
  </div>

  <div id="roles-list" hx-get="/admin/hx/roles" hx-trigger="load">
    <div class="text-center py-8 text-gray-500">Loading roles...</div>
  </div>
</div>
{{end}}
{{end}}