added leagues

2026-02-10 23:32:48 +11:00
parent ac5e38d82b
commit 2a3f4e4861
28 changed files with 1544 additions and 89 deletions
--- a/internal/view/baseview/layout.templ
+++ b/internal/view/baseview/layout.templ
@@ -37,6 +37,7 @@ templ Layout(title string) {
 		>
 			@popup.ErrorModalContainer()
 			@popup.ToastContainer()
+			@popup.ConfirmModal()
 			<div
 				id="main-content"
 				class="flex flex-col h-screen justify-between"
--- a/internal/view/baseview/navbar.templ
+++ b/internal/view/baseview/navbar.templ
@@ -20,6 +20,7 @@ type ProfileItem struct {
 func getNavItems() []NavItem {
 	return []NavItem{
 		{Name: "Seasons", Href: "/seasons"},
+		{Name: "Leagues", Href: "/leagues"},
 	}
 }

--- a/internal/view/datepicker/datepicker.templ
+++ b/internal/view/datepicker/datepicker.templ
@@ -41,6 +41,7 @@ templ DatePickerWithDefault(id, name, label, placeholder string, required bool,
 					showPicker: false,
 					selectedDate: defaultValue || "",
 					displayDate: defaultValue || "",
+					lastValidDate: defaultValue || "",
 					tempYear: new Date().getFullYear(),
 					tempMonth: new Date().getMonth(),
 					months: [
@@ -81,6 +82,7 @@ templ DatePickerWithDefault(id, name, label, placeholder string, required bool,
 						const y = this.tempYear;
 						this.displayDate = d + "/" + m + "/" + y;
 						this.selectedDate = this.displayDate;
+						this.lastValidDate = this.displayDate;
 						this.$refs.dateInput.value = this.displayDate;
 						this.showPicker = false;
 						// Manually trigger input event so Alpine.js @input handler fires
@@ -112,11 +114,107 @@ templ DatePickerWithDefault(id, name, label, placeholder string, required bool,
 							this.tempYear === today.getFullYear()
 						);
 					},
+					handleInput(event) {
+						let value = event.target.value;
+						const oldValue = this.displayDate;
+						
+						// Remove non-numeric characters except /
+						value = value.replace(/[^\d/]/g, '');
+						
+						// Handle backspace - if user deletes a slash, delete the number before it too
+						if (value.length < oldValue.length) {
+							// User is deleting
+							if (oldValue.charAt(value.length) === '/' && value.charAt(value.length - 1) !== '/') {
+								// They just deleted a slash, remove the digit before it
+								value = value.substring(0, value.length - 1);
+							}
+						} else {
+							// Auto-insert slashes when typing forward
+							if (value.length === 2 && !value.includes('/')) {
+								value = value + '/';
+							} else if (value.length === 5 && value.split('/').length === 2) {
+								value = value + '/';
+							}
+						}
+						
+						// Limit to DD/MM/YYYY format (10 characters)
+						if (value.length > 10) {
+							value = value.substring(0, 10);
+						}
+						
+						this.displayDate = value;
+						event.target.value = value;
+						
+						// Validate complete date
+						if (value.length === 10) {
+							const parts = value.split('/');
+							if (parts.length === 3) {
+								const day = parseInt(parts[0]);
+								const month = parseInt(parts[1]);
+								const year = parseInt(parts[2]);
+								
+								// Basic validation
+								if (month >= 1 && month <= 12 && day >= 1 && day <= 31 && year >= 2001 && year <= 2051) {
+									this.selectedDate = value;
+									this.lastValidDate = value;
+									this.tempYear = year;
+									this.tempMonth = month - 1;
+								}
+							}
+						}
+					},
+					handleBackspace(event) {
+						const input = event.target;
+						const cursorPos = input.selectionStart;
+						const value = input.value;
+						
+						// Check if we're about to delete a slash at position 2 or 5
+						if (cursorPos === 3 && value.charAt(2) === '/') {
+							// Delete both the slash and the character before it
+							event.preventDefault();
+							const newValue = value.substring(0, 1) + value.substring(3);
+							this.displayDate = newValue;
+							input.value = newValue;
+							this.$nextTick(() => {
+								input.setSelectionRange(1, 1);
+							});
+						} else if (cursorPos === 6 && value.charAt(5) === '/') {
+							// Delete both the slash and the character before it
+							event.preventDefault();
+							const newValue = value.substring(0, 4) + value.substring(6);
+							this.displayDate = newValue;
+							input.value = newValue;
+							this.$nextTick(() => {
+								input.setSelectionRange(4, 4);
+							});
+						}
+						// Otherwise, let default backspace behavior work
+					},
+					isValidDate(dateString) {
+						if (!dateString || dateString.length !== 10) return false;
+						const parts = dateString.split('/');
+						if (parts.length !== 3) return false;
+						
+						const day = parseInt(parts[0]);
+						const month = parseInt(parts[1]);
+						const year = parseInt(parts[2]);
+						
+						// Check ranges
+						if (month < 1 || month > 12) return false;
+						if (year < 2001 || year > 2051) return false;
+						if (day < 1 || day > 31) return false;
+						
+						// Check valid day for month
+						const daysInMonth = new Date(year, month, 0).getDate();
+						if (day > daysInMonth) return false;
+						
+						return true;
+					},
 				};
 			}
 		</script>
 		<label for={ id } class="block text-sm font-medium mb-2">{ label }</label>
-		<div class="relative">
+		<div class="relative" x-ref="datePickerContainer">
 			<input
 				type="text"
 				id={ id }
@@ -125,20 +223,23 @@ templ DatePickerWithDefault(id, name, label, placeholder string, required bool,
 				class="py-3 px-4 pr-10 block w-full rounded-lg text-sm bg-base border-2 border-overlay0 focus:border-blue outline-none"
 				placeholder={ placeholder }
 				pattern="\d{2}/\d{2}/\d{4}"
+				inputmode="numeric"
 				if required {
 					required
 				}
-				readonly
 				x-model="displayDate"
-				@click="showPicker = !showPicker"
+				@input="handleInput($event)"
+				@focus="showPicker = true"
+				@keydown.backspace="handleBackspace($event)"
+				@keydown.enter.prevent="if (isValidDate(displayDate)) { lastValidDate = displayDate; } else { displayDate = lastValidDate; $event.target.value = lastValidDate; } $event.target.blur(); showPicker = false;"
 				if onChange != "" {
-					@input={ onChange }
+					@input.debounce.500ms={ onChange }
 				}
 			/>
 			<button
 				type="button"
 				class="absolute right-3 top-1/2 -translate-y-1/2 text-subtext0 hover:text-text"
-				@click="showPicker = !showPicker"
+				@click="showPicker = !showPicker; if(showPicker) { $refs.dateInput.focus(); }"
 			>
 				<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
 					<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
@@ -148,7 +249,7 @@ templ DatePickerWithDefault(id, name, label, placeholder string, required bool,
 			<div
 				x-show="showPicker"
 				x-cloak
-				@click.away="showPicker = false"
+				@click.outside="if(!$refs.datePickerContainer.contains($event.target)) { showPicker = false }"
 				class="absolute z-50 mt-2 bg-mantle border-2 border-surface1 rounded-lg shadow-lg p-4 w-80"
 			>
 				<!-- Month/Year Navigation -->
--- a/internal/view/leaguesview/list_page.templ
+++ b/internal/view/leaguesview/list_page.templ
@@ -0,0 +1,73 @@
+package leaguesview
+
+import "git.haelnorr.com/h/oslstats/internal/db"
+import "git.haelnorr.com/h/oslstats/internal/view/baseview"
+import "git.haelnorr.com/h/oslstats/internal/contexts"
+import "git.haelnorr.com/h/oslstats/internal/permissions"
+import "fmt"
+
+templ ListPage(leagues []*db.League) {
+	@baseview.Layout("Leagues") {
+		<div class="max-w-screen-2xl mx-auto px-2">
+			@LeaguesList(leagues)
+		</div>
+	}
+}
+
+templ LeaguesList(leagues []*db.League) {
+	{{
+		permCache := contexts.Permissions(ctx)
+		canAddLeague := permCache.HasPermission(permissions.LeaguesCreate)
+	}}
+	<div id="leagues-list-container">
+		<!-- Header with title -->
+		<div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 mb-6 px-4">
+			<div class="flex gap-4 items-center">
+				<span class="text-3xl font-bold">Leagues</span>
+				if canAddLeague {
+					<a
+						href="/leagues/new"
+						class="rounded-lg px-2 py-1 hover:cursor-pointer text-center text-sm
+              bg-green hover:bg-green/75 text-mantle transition"
+					>Add league</a>
+				}
+			</div>
+		</div>
+		
+		<!-- Results section -->
+		if len(leagues) == 0 {
+			<div class="bg-mantle border border-surface1 rounded-lg p-8 text-center">
+				<p class="text-subtext0 text-lg">No leagues found</p>
+			</div>
+		} else {
+			<!-- Card grid -->
+			<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+				for _, l := range leagues {
+					<a
+						class="bg-mantle border border-surface1 rounded-lg p-6 hover:bg-surface0 transition-colors"
+						href={ fmt.Sprintf("/leagues/%s", l.ShortName) }
+					>
+						<!-- Header: Name -->
+						<div class="flex justify-between items-start mb-3">
+							<h3 class="text-xl font-bold text-text">{ l.Name }</h3>
+						</div>
+						
+						<!-- Info Row: Short Name -->
+						<div class="flex items-center gap-3 text-sm mb-3">
+							<span class="px-2 py-1 bg-surface1 rounded text-subtext0 font-mono">
+								{ l.ShortName }
+							</span>
+						</div>
+						
+						<!-- Description -->
+						if l.Description != "" {
+							<p class="text-subtext0 text-sm line-clamp-2">
+								{ l.Description }
+							</p>
+						}
+					</a>
+				}
+			</div>
+		}
+	</div>
+}
--- a/internal/view/leaguesview/new_form.templ
+++ b/internal/view/leaguesview/new_form.templ
@@ -0,0 +1,174 @@
+package leaguesview
+
+templ NewForm() {
+	<form
+		hx-post="/leagues/new"
+		hx-swap="none"
+		x-data={ templ.JSFuncCall("newLeagueFormData").CallInline }
+		@submit="handleSubmit()"
+		@htmx:after-request="if(submitTimeout) clearTimeout(submitTimeout); const redirect = $event.detail.xhr.getResponseHeader('HX-Redirect'); if(redirect) return; if(!$event.detail.successful) { isSubmitting=false; buttonText='Create League'; generalError='An error occurred. Please try again.'; }"
+	>
+		<script>
+			function newLeagueFormData() {
+				return {
+					canSubmit: false,
+					buttonText: "Create League",
+					// Name validation state
+					nameError: "",
+					nameIsChecking: false,
+					nameIsUnique: false,
+					nameIsEmpty: true,
+					// Short name validation state
+					shortNameError: "",
+					shortNameIsChecking: false,
+					shortNameIsUnique: false,
+					shortNameIsEmpty: true,
+					// Form state
+					isSubmitting: false,
+					generalError: "",
+					submitTimeout: null,
+					// Reset name errors
+					resetNameErr() {
+						this.nameError = "";
+						this.nameIsChecking = false;
+						this.nameIsUnique = false;
+					},
+					// Reset short name errors
+					resetShortNameErr() {
+						this.shortNameError = "";
+						this.shortNameIsChecking = false;
+						this.shortNameIsUnique = false;
+					},
+					// Check if form can be submitted
+					updateCanSubmit() {
+						this.canSubmit =
+							!this.nameIsEmpty &&
+							this.nameIsUnique &&
+							!this.nameIsChecking &&
+							!this.shortNameIsEmpty &&
+							this.shortNameIsUnique &&
+							!this.shortNameIsChecking;
+					},
+					// Handle form submission
+					handleSubmit() {
+						this.isSubmitting = true;
+						this.buttonText = "Creating...";
+						this.generalError = "";
+						// Set timeout for 10 seconds
+						this.submitTimeout = setTimeout(() => {
+							this.isSubmitting = false;
+							this.buttonText = "Create League";
+							this.generalError = "Request timed out. Please try again.";
+						}, 10000);
+					},
+				};
+			}
+		</script>
+		<div class="grid gap-y-5">
+			<!-- Name Field -->
+			<div>
+				<label for="name" class="block text-sm font-medium mb-2">League Name</label>
+				<div class="relative">
+					<input
+						type="text"
+						id="name"
+						name="name"
+						maxlength="50"
+						x-bind:class="{
+							'py-3 px-4 block w-full rounded-lg text-sm bg-base disabled:opacity-50 disabled:pointer-events-none border-2 outline-none': true,
+							'border-overlay0 focus:border-blue': !nameIsUnique && !nameError,
+							'border-green focus:border-green': nameIsUnique && !nameIsChecking && !nameError,
+							'border-red focus:border-red': nameError && !nameIsChecking && !isSubmitting
+						}"
+						required
+						placeholder="e.g. Pro League"
+						@input="resetNameErr(); nameIsEmpty = $el.value.trim() === ''; if(nameIsEmpty) { nameError='League name is required'; nameIsUnique=false; } updateCanSubmit();"
+						hx-post="/htmx/isleaguenameunique"
+						hx-trigger="input changed delay:500ms"
+						hx-swap="none"
+						@htmx:before-request="if($el.value.trim() === '') { nameIsEmpty=true; return; } nameIsEmpty=false; nameIsChecking=true; nameIsUnique=false; nameError=''; updateCanSubmit();"
+						@htmx:after-request="nameIsChecking=false; if($event.detail.successful) { nameIsUnique=true; } else if($event.detail.xhr.status === 409) { nameError='This league name is already taken'; nameIsUnique=false; } updateCanSubmit();"
+					/>
+					<p class="text-xs text-subtext1 mt-1">Maximum 50 characters</p>
+				</div>
+				<p
+					class="text-center text-xs text-red mt-2"
+					x-show="nameError && !isSubmitting"
+					x-cloak
+					x-text="nameError"
+				></p>
+			</div>
+			<!-- Short Name Field -->
+			<div>
+				<label for="short_name" class="block text-sm font-medium mb-2">Short Name</label>
+				<div class="relative">
+					<input
+						type="text"
+						id="short_name"
+						name="short_name"
+						maxlength="10"
+						x-bind:class="{
+							'py-3 px-4 block w-full rounded-lg text-sm bg-base disabled:opacity-50 disabled:pointer-events-none border-2 outline-none': true,
+							'border-overlay0 focus:border-blue': !shortNameIsUnique && !shortNameError,
+							'border-green focus:border-green': shortNameIsUnique && !shortNameIsChecking && !shortNameError,
+							'border-red focus:border-red': shortNameError && !shortNameIsChecking && !isSubmitting
+						}"
+						required
+						placeholder="e.g. PL"
+						@input="
+							resetShortNameErr();
+							shortNameIsEmpty = $el.value.trim() === '';
+							if(shortNameIsEmpty) {
+								shortNameError='Short name is required';
+								shortNameIsUnique=false;
+							}
+							updateCanSubmit();
+						"
+						hx-post="/htmx/isleagueshortnameunique"
+						hx-trigger="input changed delay:500ms"
+						hx-swap="none"
+						@htmx:before-request="if($el.value.trim() === '') { shortNameIsEmpty=true; return; } shortNameIsEmpty=false; shortNameIsChecking=true; shortNameIsUnique=false; shortNameError=''; updateCanSubmit();"
+						@htmx:after-request="shortNameIsChecking=false; if($event.detail.successful) { shortNameIsUnique=true; } else if($event.detail.xhr.status === 409) { shortNameError='This short name is already taken'; shortNameIsUnique=false; } updateCanSubmit();"
+					/>
+					<p class="text-xs text-subtext1 mt-1">Maximum 10 characters</p>
+				</div>
+				<p
+					class="text-center text-xs text-red mt-2"
+					x-show="shortNameError && !isSubmitting"
+					x-cloak
+					x-text="shortNameError"
+				></p>
+			</div>
+			<!-- Description Field (Optional) -->
+			<div>
+				<label for="description" class="block text-sm font-medium mb-2">Description (Optional)</label>
+				<textarea
+					id="description"
+					name="description"
+					rows="3"
+					maxlength="500"
+					class="py-3 px-4 block w-full rounded-lg text-sm bg-base border-2 border-overlay0 focus:border-blue outline-none resize-none"
+					placeholder="e.g. The top tier league for competitive play"
+				></textarea>
+				<p class="text-xs text-subtext1 mt-1">Maximum 500 characters</p>
+			</div>
+			<!-- General Error Message -->
+			<p
+				class="text-center text-sm text-red"
+				x-show="generalError"
+				x-cloak
+				x-text="generalError"
+			></p>
+			<!-- Submit Button -->
+			<button
+				x-bind:disabled="!canSubmit || isSubmitting"
+				x-text="buttonText"
+				type="submit"
+				class="w-full py-3 px-4 inline-flex justify-center items-center 
+                    gap-x-2 rounded-lg border border-transparent transition font-semibold
+                    bg-blue hover:bg-blue/75 text-mantle hover:cursor-pointer
+                    disabled:bg-blue/40 disabled:cursor-not-allowed"
+			></button>
+		</div>
+	</form>
+}
--- a/internal/view/leaguesview/new_page.templ
+++ b/internal/view/leaguesview/new_page.templ
@@ -0,0 +1,23 @@
+package leaguesview
+
+import "git.haelnorr.com/h/oslstats/internal/view/baseview"
+
+templ NewPage() {
+	@baseview.Layout("New League") {
+		<div class="max-w-5xl mx-auto px-4 py-8">
+			<div class="bg-mantle border border-surface1 rounded-xl">
+				<div class="p-6 sm:p-8">
+					<div class="text-center mb-8">
+						<h1 class="text-3xl font-bold text-text">Create New League</h1>
+						<p class="mt-2 text-sm text-subtext0">
+							Add a new league to the system. Name and short name are required.
+						</p>
+					</div>
+					<div class="max-w-md mx-auto">
+						@NewForm()
+					</div>
+				</div>
+			</div>
+		</div>
+	}
+}
--- a/internal/view/popup/confirm_modal.templ
+++ b/internal/view/popup/confirm_modal.templ
@@ -0,0 +1,94 @@
+package popup
+
+// ConfirmModal provides a reusable confirmation modal for delete/remove actions
+templ ConfirmModal() {
+	<div
+		x-data="{ 
+			open: false, 
+			title: '', 
+			message: '', 
+			confirmAction: null,
+			show(title, message, action) {
+				this.title = title;
+				this.message = message;
+				this.confirmAction = action;
+				this.open = true;
+			},
+			confirm() {
+				if (this.confirmAction) {
+					this.confirmAction();
+				}
+				this.open = false;
+			},
+			cancel() {
+				this.open = false;
+			}
+		}"
+		@confirm-action.window="show($event.detail.title, $event.detail.message, $event.detail.action)"
+		x-show="open"
+		x-cloak
+		class="fixed inset-0 z-50 overflow-y-auto"
+		aria-labelledby="modal-title"
+		role="dialog"
+		aria-modal="true"
+	>
+		<!-- Background overlay -->
+		<div
+			x-show="open"
+			x-transition:enter="ease-out duration-300"
+			x-transition:enter-start="opacity-0"
+			x-transition:enter-end="opacity-100"
+			x-transition:leave="ease-in duration-200"
+			x-transition:leave-start="opacity-100"
+			x-transition:leave-end="opacity-0"
+			class="fixed inset-0 bg-base/75 transition-opacity"
+			@click="cancel()"
+		></div>
+		<!-- Modal panel -->
+		<div class="flex min-h-full items-center justify-center p-4">
+			<div
+				x-show="open"
+				x-transition:enter="ease-out duration-300"
+				x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+				x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100"
+				x-transition:leave="ease-in duration-200"
+				x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100"
+				x-transition:leave-end="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+				class="relative transform overflow-hidden rounded-lg bg-mantle border-2 border-surface1 shadow-xl transition-all sm:w-full sm:max-w-lg"
+				@click.stop
+			>
+				<div class="bg-mantle px-4 pb-4 pt-5 sm:p-6 sm:pb-4">
+					<div class="sm:flex sm:items-start">
+						<div class="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-red/10 sm:mx-0 sm:h-10 sm:w-10">
+							<svg class="h-6 w-6 text-red" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+								<path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z"></path>
+							</svg>
+						</div>
+						<div class="mt-3 text-center sm:ml-4 sm:mt-0 sm:text-left">
+							<h3 class="text-lg font-semibold leading-6 text-text" id="modal-title" x-text="title"></h3>
+							<div class="mt-2">
+								<p class="text-sm text-subtext0" x-text="message"></p>
+							</div>
+						</div>
+					</div>
+				</div>
+				<div class="bg-surface0 px-4 py-3 sm:flex sm:flex-row-reverse sm:px-6 gap-2">
+					<button
+						type="button"
+						@click="confirm()"
+						class="inline-flex w-full justify-center rounded-lg bg-red px-4 py-2 text-sm font-semibold text-mantle shadow-sm hover:bg-red/75 hover:cursor-pointer transition sm:w-auto"
+					>
+						Confirm
+					</button>
+					<button
+						type="button"
+						@click="cancel()"
+						class="mt-3 inline-flex w-full justify-center rounded-lg bg-surface1 px-4 py-2 text-sm font-semibold text-text shadow-sm hover:bg-surface2 hover:cursor-pointer transition sm:mt-0 sm:w-auto"
+					>
+						Cancel
+					</button>
+				</div>
+			</div>
+		</div>
+	</div>
+}
--- a/internal/view/seasonsview/detail_page.templ
+++ b/internal/view/seasonsview/detail_page.templ
@@ -26,9 +26,13 @@ templ SeasonDetails(season *db.Season) {
 			<div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
 				<div>
 					<h1 class="text-4xl font-bold text-text mb-2">{ season.Name }</h1>
-					<span class="inline-block bg-blue px-3 py-1 rounded-full text-sm font-semibold text-mantle">
-						{ season.ShortName }
-					</span>
+					<div class="flex items-center gap-2 flex-wrap">
+						<span class="inline-block bg-blue px-3 py-1 rounded-full text-sm font-semibold text-mantle">
+							{ season.ShortName }
+						</span>
+						@SlapVersionBadge(season.SlapVersion)
+						@StatusBadge(season, false, false)
+					</div>
 				</div>
 				<div class="flex gap-2">
 					if canEditSeason {
@@ -127,13 +131,25 @@ templ SeasonDetails(season *db.Season) {
 				</div>
 			</div>
 		</div>
-		<!-- Status Section -->
+		<!-- Leagues Section -->
 		<div class="px-6 pb-6">
 			<div class="bg-surface0 border border-surface1 rounded-lg p-6">
-				<h2 class="text-2xl font-bold text-text mb-4">Status</h2>
-				<div class="flex items-center gap-3">
-					@StatusBadge(season, false, false)
-				</div>
+				<h2 class="text-2xl font-bold text-text mb-4">Leagues</h2>
+				if len(season.Leagues) == 0 {
+					<p class="text-subtext0 text-sm">No leagues assigned to this season.</p>
+				} else {
+					<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-3">
+						for _, league := range season.Leagues {
+							<a
+								href={ templ.SafeURL("/seasons/" + season.ShortName + "/leagues/" + league.ShortName) }
+								class="bg-mantle border border-surface1 rounded-lg p-4 hover:bg-surface1 transition-colors"
+							>
+								<h3 class="font-semibold text-text mb-1">{ league.Name }</h3>
+								<span class="text-xs text-subtext0 font-mono">{ league.ShortName }</span>
+							</a>
+						}
+					</div>
+				}
 			</div>
 		</div>
 	</div>
@@ -169,3 +185,15 @@ func formatDuration(start, end time.Time) string {
 		return strconv.Itoa(years) + " years"
 	}
 }
+
+templ SlapVersionBadge(version string) {
+	if version == "rebound" {
+		<span class="inline-block bg-green px-3 py-1 rounded-full text-sm font-semibold text-mantle">
+			Rebound
+		</span>
+	} else if version == "slapshot1" {
+		<span class="inline-block bg-red px-3 py-1 rounded-full text-sm font-semibold text-mantle">
+			Slapshot 1
+		</span>
+	}
+}
--- a/internal/view/seasonsview/edit_form.templ
+++ b/internal/view/seasonsview/edit_form.templ
@@ -4,7 +4,7 @@ import "git.haelnorr.com/h/oslstats/internal/view/datepicker"
 import "git.haelnorr.com/h/oslstats/internal/db"
 import "time"

-templ EditForm(season *db.Season) {
+templ EditForm(season *db.Season, allLeagues []*db.League) {
 	{{
 		// Format dates for display (DD/MM/YYYY)
 		startDateStr := formatDateInput(season.StartDate)
@@ -86,9 +86,20 @@ templ EditForm(season *db.Season) {
 				<div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
 					<div>
 						<h1 class="text-4xl font-bold text-text mb-2">Edit { season.Name }</h1>
-						<span class="inline-block bg-blue px-3 py-1 rounded-full text-sm font-semibold text-mantle">
-							{ season.ShortName }
-						</span>
+						<div class="flex items-center gap-2">
+							<span class="inline-block bg-blue px-3 py-1 rounded-full text-sm font-semibold text-mantle">
+								{ season.ShortName }
+							</span>
+							<select
+								id="slap_version"
+								name="slap_version"
+								class="py-1 pl-3 pr-2 rounded-full text-sm bg-base border-2 border-overlay0 focus:border-blue outline-none"
+								required
+							>
+								<option value="rebound" selected?={ season.SlapVersion == "rebound" }>Rebound</option>
+								<option value="slapshot1" selected?={ season.SlapVersion == "slapshot1" }>Slapshot 1</option>
+							</select>
+						</div>
 					</div>
 					<div class="flex gap-2">
 						<button
@@ -158,6 +169,8 @@ templ EditForm(season *db.Season) {
 					</div>
 				</div>
 			</div>
+			<!-- Leagues Section -->
+			@LeaguesSection(season, allLeagues)
 			<!-- General Error Message -->
 			<div
 				class="px-6 pb-6"
--- a/internal/view/seasonsview/edit_page.templ
+++ b/internal/view/seasonsview/edit_page.templ
@@ -3,10 +3,10 @@ package seasonsview
 import "git.haelnorr.com/h/oslstats/internal/view/baseview"
 import "git.haelnorr.com/h/oslstats/internal/db"

-templ EditPage(season *db.Season) {
+templ EditPage(season *db.Season, allLeagues []*db.League) {
 	@baseview.Layout("Edit " + season.Name) {
 		<div class="max-w-screen-2xl mx-auto px-4 py-8">
-			@EditForm(season)
+			@EditForm(season, allLeagues)
 		</div>
 	}
 }
--- a/internal/view/seasonsview/leagues_section.templ
+++ b/internal/view/seasonsview/leagues_section.templ
@@ -0,0 +1,88 @@
+package seasonsview
+
+import "git.haelnorr.com/h/oslstats/internal/db"
+import "git.haelnorr.com/h/oslstats/internal/contexts"
+import "git.haelnorr.com/h/oslstats/internal/permissions"
+
+templ LeaguesSection(season *db.Season, allLeagues []*db.League) {
+	{{
+		permCache := contexts.Permissions(ctx)
+		canAddLeague := permCache.HasPermission(permissions.SeasonsAddLeague)
+		canRemoveLeague := permCache.HasPermission(permissions.SeasonsRemoveLeague)
+		
+		// Create a map of assigned league IDs for quick lookup
+		assignedLeagueIDs := make(map[int]bool)
+		for _, league := range season.Leagues {
+			assignedLeagueIDs[league.ID] = true
+		}
+	}}
+	if canAddLeague || canRemoveLeague {
+		<div
+			id="leagues-section"
+			class="px-6 pb-6"
+		>
+			<div class="bg-surface0 border border-surface1 rounded-lg p-6">
+				<h2 class="text-2xl font-bold text-text mb-4">Leagues</h2>
+				<!-- Currently Assigned Leagues -->
+				if len(season.Leagues) > 0 {
+					<div class="mb-4">
+						<h3 class="text-sm font-medium text-subtext0 mb-2">Currently Assigned</h3>
+						<div class="flex flex-wrap gap-2">
+							for _, league := range season.Leagues {
+								<div class="flex items-center gap-2 bg-mantle border border-surface1 rounded-lg px-3 py-2">
+									<span class="text-sm text-text">{ league.Name }</span>
+									<span class="text-xs text-subtext0 font-mono">({ league.ShortName })</span>
+									if canRemoveLeague {
+										<button
+											type="button"
+											@click={ "window.dispatchEvent(new CustomEvent('confirm-action', { detail: { title: 'Remove League', message: 'Are you sure you want to remove " + league.Name + " from this season?', action: () => htmx.ajax('DELETE', '/seasons/" + season.ShortName + "/leagues/" + league.ShortName + "', { target: '#leagues-section', swap: 'outerHTML' }) } }))" }
+											class="text-red hover:text-red/75 hover:cursor-pointer ml-1"
+										>
+											<svg class="w-4 h-4" 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>
+							}
+						</div>
+					</div>
+				}
+				<!-- Available Leagues to Add -->
+				if canAddLeague && len(allLeagues) > 0 {
+					{{
+						// Filter out already assigned leagues
+						availableLeagues := []*db.League{}
+						for _, league := range allLeagues {
+							if !assignedLeagueIDs[league.ID] {
+								availableLeagues = append(availableLeagues, league)
+							}
+						}
+					}}
+					if len(availableLeagues) > 0 {
+						<div>
+							<h3 class="text-sm font-medium text-subtext0 mb-2">Add League</h3>
+							<div class="flex flex-wrap gap-2">
+								for _, league := range availableLeagues {
+									<button
+										type="button"
+										hx-post={ "/seasons/" + season.ShortName + "/leagues/" + league.ShortName }
+										hx-target="#leagues-section"
+										hx-swap="outerHTML"
+										class="flex items-center gap-2 bg-surface1 hover:bg-surface2 border border-overlay0 rounded-lg px-3 py-2 transition hover:cursor-pointer"
+									>
+										<span class="text-sm text-text">{ league.Name }</span>
+										<span class="text-xs text-subtext0 font-mono">({ league.ShortName })</span>
+										<svg class="w-4 h-4 text-green" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+											<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path>
+										</svg>
+									</button>
+								}
+							</div>
+						</div>
+					}
+				}
+			</div>
+		</div>
+	}
+}
--- a/internal/view/seasonsview/list_page.templ
+++ b/internal/view/seasonsview/list_page.templ
@@ -83,7 +83,7 @@ templ SeasonsList(seasons *db.List[db.Season]) {
 				<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
 					for _, s := range seasons.Items {
 						<a
-							class="bg-mantle border border-surface1 rounded-lg p-6 hover:bg-surface0 transition-colors"
+							class="bg-mantle border border-surface1 rounded-lg p-6 hover:bg-surface0 transition-colors flex flex-col"
 							href={ fmt.Sprintf("/seasons/%s", s.ShortName) }
 						>
 							<!-- Header: Name + Status Badge -->
@@ -91,14 +91,45 @@ templ SeasonsList(seasons *db.List[db.Season]) {
 								<h3 class="text-xl font-bold text-text">{ s.Name }</h3>
 								@StatusBadge(s, true, true)
 							</div>
-							<!-- Info Row: Short Name + Start Date -->
-							<div class="flex items-center gap-3 text-sm">
+							<!-- Info Row: Short Name + Slap Version -->
+							<div class="flex items-center gap-2 text-sm mb-3 flex-wrap">
 								<span class="px-2 py-1 bg-surface1 rounded text-subtext0 font-mono">
 									{ s.ShortName }
 								</span>
-								<span class="text-subtext0">
+								@SlapVersionBadge(s.SlapVersion)
+							</div>
+							<!-- Leagues -->
+							if len(s.Leagues) > 0 {
+								<div class="flex flex-wrap gap-1 mb-2">
+									for _, league := range s.Leagues {
+										<span class="px-2 py-0.5 bg-surface0 border border-surface1 rounded text-xs text-subtext0">
+											{ league.ShortName }
+										</span>
+									}
+								</div>
+							}
+							<!-- Date Info -->
+							{{
+								now := time.Now()
+							}}
+							<div class="text-xs text-subtext1 mt-auto">
+								if now.Before(s.StartDate) {
+									Starts: { formatDate(s.StartDate) }
+								} else if !s.FinalsStartDate.IsZero() {
+									// Finals are scheduled
+									if !s.FinalsEndDate.IsZero() && now.After(s.FinalsEndDate.Time) {
+										Completed: { formatDate(s.FinalsEndDate.Time) }
+									} else if now.After(s.FinalsStartDate.Time) {
+										Finals Started: { formatDate(s.FinalsStartDate.Time) }
+									} else {
+										Finals Start: { formatDate(s.FinalsStartDate.Time) }
+									}
+								} else if !s.EndDate.IsZero() && now.After(s.EndDate.Time) {
+									// No finals scheduled and regular season ended
+									Completed: { formatDate(s.EndDate.Time) }
+								} else {
 									Started: { formatDate(s.StartDate) }
-								</span>
+								}
 							</div>
 						</a>
 					}
--- a/internal/view/seasonsview/new_form.templ
+++ b/internal/view/seasonsview/new_form.templ
@@ -50,22 +50,27 @@ templ NewForm() {
 					},
 					// Check if form can be submitted
 					updateCanSubmit() {
-						this.canSubmit = !this.nameIsEmpty && this.nameIsUnique && !this.nameIsChecking &&
-							!this.shortNameIsEmpty && this.shortNameIsUnique && !this.shortNameIsChecking &&
+						this.canSubmit =
+							!this.nameIsEmpty &&
+							this.nameIsUnique &&
+							!this.nameIsChecking &&
+							!this.shortNameIsEmpty &&
+							this.shortNameIsUnique &&
+							!this.shortNameIsChecking &&
 							!this.dateIsEmpty;
 					},
 					// Handle form submission
 					handleSubmit() {
 						this.isSubmitting = true;
-						this.buttonText = 'Creating...';
-						this.generalError = '';
+						this.buttonText = "Creating...";
+						this.generalError = "";
 						// Set timeout for 10 seconds
 						this.submitTimeout = setTimeout(() => {
 							this.isSubmitting = false;
-							this.buttonText = 'Create Season';
-							this.generalError = 'Request timed out. Please try again.';
+							this.buttonText = "Create Season";
+							this.generalError = "Request timed out. Please try again.";
 						}, 10000);
-					}
+					},
 				};
 			}
 		</script>
@@ -147,6 +152,20 @@ templ NewForm() {
 					x-text="shortNameError"
 				></p>
 			</div>
+			<!-- Slap Version Field -->
+			<div>
+				<label for="slap_version" class="block text-sm font-medium mb-2">Slap Version</label>
+				<select
+					id="slap_version"
+					name="slap_version"
+					class="py-3 px-4 block w-full rounded-lg text-sm bg-base border-2 border-overlay0 focus:border-blue outline-none"
+					required
+				>
+					<option value="rebound" selected>Rebound</option>
+					<option value="slapshot1">Slapshot 1</option>
+				</select>
+				<p class="text-xs text-subtext1 mt-1">Select the game version for this season</p>
+			</div>
 			<!-- Start Date Field -->
 			@datepicker.DatePicker("start_date", "start_date", "Start Date", "DD/MM/YYYY", true, "dateIsEmpty = $el.value === ''; resetDateErr(); if(dateIsEmpty) { dateError='Start date is required'; } updateCanSubmit();")
 			<p
@@ -168,7 +187,7 @@ templ NewForm() {
 				x-text="buttonText"
 				type="submit"
 				class="w-full py-3 px-4 inline-flex justify-center items-center 
-                    gap-x-2 rounded-lg border border-transparent transition text-base font-semibold
+                    gap-x-2 rounded-lg border border-transparent transition font-semibold
                    bg-blue hover:bg-blue/75 text-mantle hover:cursor-pointer
                    disabled:bg-blue/40 disabled:cursor-not-allowed"
 			></button>
--- a/internal/view/seasonsview/status_badge.templ
+++ b/internal/view/seasonsview/status_badge.templ
@@ -12,60 +12,54 @@ templ StatusBadge(season *db.Season, compact bool, useShortLabels bool) {
 	{{
 		now := time.Now()
 		status := ""
-		statusColor := ""
 		statusBg := ""
 		
 		// Determine status based on dates
 		if now.Before(season.StartDate) {
 			status = "Upcoming"
-			statusColor = "text-blue"
-			statusBg = "bg-blue/10 border-blue"
-		} else if !season.EndDate.IsZero() && now.After(season.EndDate.Time) {
-			status = "Completed"
-			statusColor = "text-green"
-			statusBg = "bg-green/10 border-green"
-		} else if !season.FinalsStartDate.IsZero() && now.After(season.FinalsStartDate.Time) {
+			statusBg = "bg-blue"
+		} else if !season.FinalsStartDate.IsZero() {
+			// Finals are scheduled
 			if !season.FinalsEndDate.IsZero() && now.After(season.FinalsEndDate.Time) {
+				// Finals have ended
 				status = "Completed"
-				statusColor = "text-green"
-				statusBg = "bg-green/10 border-green"
-			} else {
+				statusBg = "bg-teal"
+			} else if now.After(season.FinalsStartDate.Time) {
+				// Finals are in progress
 				if useShortLabels {
 					status = "Finals"
 				} else {
 					status = "Finals in Progress"
 				}
-				statusColor = "text-yellow"
-				statusBg = "bg-yellow/10 border-yellow"
+				statusBg = "bg-yellow"
+			} else if !season.EndDate.IsZero() && now.After(season.EndDate.Time) {
+				// Regular season ended, finals upcoming
+				status = "Finals Soon"
+				statusBg = "bg-peach"
+			} else {
+				// Regular season active, finals scheduled for later
+				if useShortLabels {
+					status = "Active"
+				} else {
+					status = "In Progress"
+				}
+				statusBg = "bg-green"
 			}
+		} else if !season.EndDate.IsZero() && now.After(season.EndDate.Time) {
+			// No finals scheduled and regular season ended
+			status = "Completed"
+			statusBg = "bg-teal"
 		} else {
+			// Regular season active, no finals scheduled
 			if useShortLabels {
 				status = "Active"
 			} else {
 				status = "In Progress"
 			}
-			statusColor = "text-green"
-			statusBg = "bg-green/10 border-green"
-		}
-		
-		// Determine size classes
-		var sizeClasses string
-		var textSize string
-		var iconSize string
-		if compact {
-			sizeClasses = "px-2 py-1"
-			textSize = "text-xs"
-			iconSize = "text-sm"
-		} else {
-			sizeClasses = "px-4 py-2"
-			textSize = "text-lg"
-			iconSize = "text-2xl"
+			statusBg = "bg-green"
 		}
 	}}
-	<div class={ "rounded-lg border-2 inline-flex items-center gap-2 " + sizeClasses + " " + statusBg }>
-		if !compact {
-			<span class={ iconSize + " " + statusColor }>●</span>
-		}
-		<span class={ textSize + " font-semibold " + statusColor }>{ status }</span>
-	</div>
+	<span class={ "inline-block px-3 py-1 rounded-full text-sm font-semibold text-mantle " + statusBg }>
+		{ status }
+	</span>
 }