<form hx-post="/jump" hx-swap="outerHTML" class="space-y-4">
	<div class="grid grid-cols-2 gap-4">
		<!-- Year Selection -->
		<div>
			<label for="jump-year" class="block text-sm font-medium text-slate-700 mb-1">Jahr</label>
			<select id="jump-year" name="year" class="w-full px-3 py-2 border {{ if .YearError }}border-red-300{{ else }}border-slate-300{{ end }} rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
				{{ range $year := .AvailableYears }}
					<option value="{{ $year }}" {{ if eq $year $.CurrentYear }}selected{{ end }}>{{ $year }}</option>
				{{ end }}
			</select>
			{{ if .YearError }}
				<div class="text-red-600 text-sm mt-1">{{ .YearError }}</div>
			{{ end }}
		</div>

		<!-- Page Input -->
		<div>
			<label for="jump-page" class="block text-sm font-medium text-slate-700 mb-1">Seite</label>
			<input type="number" id="jump-page" name="page" min="1" placeholder="z.B. 42" value="{{ .PageValue }}" class="w-full px-3 py-2 border {{ if .PageError }}border-red-300{{ else }}border-slate-300{{ end }} rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
			{{ if .PageError }}
				<div class="text-red-600 text-sm mt-1">{{ .PageError }}</div>
			{{ end }}
		</div>
	</div>

	<!-- Submit Button -->
	<div class="text-center">
		<button type="submit" class="inline-flex items-center px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-md shadow-sm transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
			<i class="ri-arrow-right-line mr-2"></i>
			Zur Seite springen
		</button>
	</div>
</form>