bookhoard/templates/admin_users.templ

package templates

templ AdminUsers(currentUser User, users []User, adminCount int) {
	<!DOCTYPE html>
	<html lang="en">
		<head>
			<meta charset="UTF-8"/>
			<title>Users - Bookhoard Admin</title>
			<script src="/static/htmx.min.js"></script>
			<link href="/static/style.css" rel="stylesheet"/>
			<link rel="icon" type="image/svg+xml" href="/static/favicon.svg"/>
		</head>
		<body class="theme-{ currentUser.Theme }">
		@Header(currentUser, "/admin/users")
		<!-- Modal Container (populated by HTMX) -->
		<div id="modal-container"></div>
		<main class="p-8">
			<div class="max-w-5xl">
				<div class="mb-8">
							<div class="flex items-center gap-3 mb-1">
								<span class="grid place-items-center h-10 w-10 rounded-xl" style="background-color: var(--accent-muted); color: var(--accent);">
									@Icon("users", "h-5 w-5")
								</span>
								<h1 class="text-2xl font-bold tracking-tight" style="color: var(--text-primary)">User Management</h1>
							</div>
							<p class="text-sm" style="color: var(--text-secondary)">Manage user accounts and permissions</p>
						</div>
						<!-- Create User (admins create accounts even when
						     self-service registration is disabled) -->
						<div class="card p-6 mb-6">
							<div class="flex items-center gap-2 mb-4">
								@Icon("user", "h-4 w-4")
								<h2 class="text-sm font-semibold uppercase tracking-wide" style="color: var(--text-primary)">Create User</h2>
							</div>
							<form hx-post="/api/auth/users" hx-target="#create-user-result" hx-swap="innerHTML" class="grid grid-cols-1 md:grid-cols-3 gap-4">
								<div>
									<label class="text-xs block mb-1" style="color: var(--text-secondary)">Username *</label>
									<input type="text" name="username" required minlength="3" maxlength="50" class="input w-full"/>
								</div>
								<div>
									<label class="text-xs block mb-1" style="color: var(--text-secondary)">Email *</label>
									<input type="email" name="email" required class="input w-full"/>
								</div>
								<div>
									<label class="text-xs block mb-1" style="color: var(--text-secondary)">Password *</label>
									<input type="password" name="password" required class="input w-full"/>
								</div>
								<div>
									<label class="text-xs block mb-1" style="color: var(--text-secondary)">First name</label>
									<input type="text" name="first_name" class="input w-full"/>
								</div>
								<div>
									<label class="text-xs block mb-1" style="color: var(--text-secondary)">Last name</label>
									<input type="text" name="last_name" class="input w-full"/>
								</div>
								<div>
									<label class="text-xs block mb-1" style="color: var(--text-secondary)">Role</label>
									<select name="role" class="input w-full">
										<option value="user" selected>User</option>
										<option value="admin">Admin</option>
									</select>
								</div>
								<div class="md:col-span-3">
									<button type="submit" class="btn btn-primary text-sm px-4 py-2">Create User</button>
								</div>
							</form>
							<div id="create-user-result" class="text-sm mt-3"></div>
						</div>
						<!-- Users Table -->
						<div class="card overflow-hidden">
							<table class="w-full">
								<thead style="background-color: var(--bg-primary)">
									<tr>
										<th class="px-6 py-3 text-left text-xs font-semibold uppercase tracking-wide" style="color: var(--text-secondary)">Username</th>
										<th class="px-6 py-3 text-left text-xs font-semibold uppercase tracking-wide" style="color: var(--text-secondary)">Email</th>
										<th class="px-6 py-3 text-left text-xs font-semibold uppercase tracking-wide" style="color: var(--text-secondary)">Role</th>
										<th class="px-6 py-3 text-left text-xs font-semibold uppercase tracking-wide" style="color: var(--text-secondary)">Created</th>
										<th class="px-6 py-3 text-right text-xs font-semibold uppercase tracking-wide" style="color: var(--text-secondary)">Actions</th>
									</tr>
								</thead>
								<tbody class="divide-y" style="divide-color: var(--border)">
									for _, user := range users {
										<tr id={ "user-" + user.ID } class="transition-colors hover:bg-surface-hover">
											<!-- Username -->
											<td class="px-6 py-4 whitespace-nowrap">
												<div class="flex items-center gap-2">
													<span class="grid place-items-center h-8 w-8 rounded-full shrink-0" style="background-color: var(--accent-muted); color: var(--accent);">
														@Icon("user", "h-4 w-4")
													</span>
													<div>
														<div class="text-sm font-medium" style="color: var(--text-primary)">{ user.Username }</div>
														if user.ID == currentUser.ID {
															<span class="badge" style="background-color: var(--accent-muted); color: var(--accent);">You</span>
														}
													</div>
												</div>
											</td>
											<!-- Email -->
											<td class="px-6 py-4 whitespace-nowrap">
												<div class="text-sm" style="color: var(--text-primary)">{ user.Email }</div>
											</td>
											<!-- Role Toggle (with last-admin protection) -->
											<td class="px-6 py-4 whitespace-nowrap">
												if user.Role == "admin" && adminCount == 1 {
													<!-- Last admin - disabled -->
													<div class="relative">
														<select
															disabled
															class="input w-auto py-1 pr-7 text-xs opacity-50 cursor-not-allowed"
															title="Cannot demote the last admin"
														>
															<option value="user">User</option>
															<option value="admin" selected>Admin</option>
														</select>
													</div>
												} else {
													<select
														hx-put={ "/api/auth/profile/" + user.ID }
														hx-target={ "#role-result-" + user.ID }
														hx-swap="innerHTML"
														hx-trigger="change"
														name="role"
														class="input w-auto py-1 pr-7 text-xs"
													>
														<option value="user" selected?={ user.Role == "user" }>User</option>
														<option value="admin" selected?={ user.Role == "admin" }>Admin</option>
													</select>
													<div id={ "role-result-" + user.ID } class="text-xs mt-1"></div>
												}
											</td>
											<!-- Created -->
											<td class="px-6 py-4 whitespace-nowrap">
												<div class="text-sm" style="color: var(--text-secondary)">{ FormatInTimezone(user.CreatedAt, currentUser.Timezone) }</div>
											</td>
											<!-- Actions -->
											<td class="px-6 py-4 whitespace-nowrap text-right">
												<div class="inline-flex items-center gap-1">
													<button
														hx-get={ "/admin/users/" + user.ID + "/profile-modal" }
														hx-target="#modal-container"
														hx-swap="innerHTML"
														class="btn btn-secondary text-xs px-2.5 py-1"
													>
														@Icon("edit", "h-4 w-4")
														Edit
													</button>
													if user.Role == "admin" && adminCount == 1 {
														<button
															disabled
															class="btn btn-danger text-xs px-2.5 py-1"
															title="Cannot delete the last admin"
														>
															@Icon("trash", "h-4 w-4")
															Delete
														</button>
													} else {
														<button
															hx-delete={ "/api/auth/profile/" + user.ID }
															hx-target={ "#user-" + user.ID }
															hx-swap="outerHTML swap:0.5s"
															hx-confirm="Are you sure you want to delete this user? This action cannot be undone."
															class="btn btn-danger text-xs px-2.5 py-1"
														>
															@Icon("trash", "h-4 w-4")
															Delete
														</button>
													}
												</div>
											</td>
										</tr>
									}
								</tbody>
							</table>
						</div>
			</div>
		</main>
	</body>
	</html>
}