package adminview

templ RoleCreateForm() {
	<!-- Modal Overlay -->
	<div
		class="fixed inset-0 bg-crust/80 flex items-center justify-center z-50"
		@click.self="document.getElementById('role-modal').innerHTML = ''"
	>
		<div class="bg-surface0 border border-surface1 rounded-lg w-full max-w-md p-6">
			<div class="flex justify-between items-center mb-4">
				<h2 class="text-xl font-bold text-text">Create New Role</h2>
				<button
					class="text-subtext0 hover:text-text transition"
					@click="document.getElementById('role-modal').innerHTML = ''"
				>
					<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
						<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
					</svg>
				</button>
			</div>
			<form
				hx-post="/admin/roles/create"
				hx-target="#admin-content"
				hx-swap="innerHTML"
			>
				<div class="space-y-4">
					<!-- Name Field -->
					<div>
						<label class="block text-sm font-semibold text-text mb-1" for="name">
							Name (lowercase, no spaces)
						</label>
						<input
							type="text"
							id="name"
							name="name"
							required
							pattern="[a-z0-9_-]+"
							class="w-full px-3 py-2 bg-mantle border border-surface1 rounded text-text focus:outline-none focus:border-blue"
							placeholder="e.g., moderator"
						/>
						<p class="text-xs text-subtext0 mt-1">Used internally, must be unique</p>
					</div>
					<!-- Display Name Field -->
					<div>
						<label class="block text-sm font-semibold text-text mb-1" for="display_name">
							Display Name
						</label>
						<input
							type="text"
							id="display_name"
							name="display_name"
							required
							class="w-full px-3 py-2 bg-mantle border border-surface1 rounded text-text focus:outline-none focus:border-blue"
							placeholder="e.g., Moderator"
						/>
						<p class="text-xs text-subtext0 mt-1">Human-readable name shown in UI</p>
					</div>
					<!-- Description Field -->
					<div>
						<label class="block text-sm font-semibold text-text mb-1" for="description">
							Description
						</label>
						<textarea
							id="description"
							name="description"
							rows="3"
							class="w-full px-3 py-2 bg-mantle border border-surface1 rounded text-text focus:outline-none focus:border-blue resize-none"
							placeholder="Brief description of this role's purpose"
						></textarea>
					</div>
					<!-- Action Buttons -->
					<div class="flex justify-end space-x-2 pt-2">
						<button
							type="button"
							class="px-4 py-2 bg-surface1 text-text rounded hover:bg-surface2 transition"
							@click="document.getElementById('role-modal').innerHTML = ''"
						>
							Cancel
						</button>
						<button
							type="submit"
							class="px-4 py-2 bg-blue text-mantle rounded font-semibold hover:bg-sky transition"
						>
							Create Role
						</button>
					</div>
				</div>
			</form>
		</div>
	</div>
}