{{define "users"}}
{{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">User 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 User</h2>
    <form hx-post="/admin/users/create" hx-target="#users-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="username" class="block text-sm font-medium text-gray-700 mb-1">Username</label>
          <input type="text" id="username" name="username" required
                 class="w-full px-3 py-2 border border-gray-300 rounded-md">
        </div>
        <div>
          <label for="password" class="block text-sm font-medium text-gray-700 mb-1">Password</label>
          <input type="password" id="password" name="password" required
                 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 User
      </button>
    </form>
  </div>

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