package page

import "git.haelnorr.com/h/oslstats/internal/view/layout"

// Page content for the test notification page
templ Test() {
	@layout.Global("Notification Test") {
		<div class="flex items-center justify-center min-h-[calc(100vh-200px)]">
			<div class="w-full max-w-md px-4">
				<!-- Title -->
				<h1 class="text-4xl font-bold text-center text-text mb-8">
					Notification Test
				</h1>
				<!-- Form Card -->
				<div class="bg-surface0 rounded-lg shadow-lg p-6 border border-overlay0">
					<form hx-post="/test" hx-swap="none" class="flex flex-col gap-4">
						<!-- Notification Type -->
						<div class="flex flex-col gap-2">
							<label for="type" class="text-sm font-semibold text-subtext1">
								Notification Type
							</label>
							<select
								name="type"
								id="type"
								class="bg-base text-text border border-overlay0 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-mauve"
							>
								<option value="success">Success Toast</option>
								<option value="info">Info Toast</option>
								<option value="warn">Warning Toast</option>
								<!-- <option value="error">Error Modal</option> -->
							</select>
						</div>
						<!-- Target Input -->
						<div class="flex flex-col gap-2">
							<label for="target" class="text-sm font-semibold text-subtext1">
								Title
							</label>
							<input
								type="text"
								name="target"
								id="target"
								placeholder="Enter target ID"
								class="bg-base text-text border border-overlay0 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-mauve"
							/>
						</div>
						<!-- Title Input -->
						<div class="flex flex-col gap-2">
							<label for="title" class="text-sm font-semibold text-subtext1">
								Title
							</label>
							<input
								type="text"
								name="title"
								id="title"
								placeholder="Enter notification title"
								class="bg-base text-text border border-overlay0 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-mauve"
							/>
						</div>
						<!-- Message Input -->
						<div class="flex flex-col gap-2">
							<label for="message" class="text-sm font-semibold text-subtext1">
								Message
							</label>
							<input
								type="text"
								name="message"
								id="message"
								placeholder="Enter notification message"
								class="bg-base text-text border border-overlay0 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-mauve"
							/>
						</div>
						<!-- Submit Button -->
						<button
							type="submit"
							class="mt-2 bg-mauve text-crust font-semibold px-6 py-3 rounded-lg hover:bg-mauve/75 transition"
						>
							Send Notification
						</button>
					</form>
				</div>
			</div>
		</div>
	}
}