oslstats/internal/view/seasonsview/detail_page.templ

package seasonsview

import "git.haelnorr.com/h/oslstats/internal/db"
import "git.haelnorr.com/h/oslstats/internal/view/baseview"
import "time"
import "strconv"
import "git.haelnorr.com/h/oslstats/internal/permissions"
import "git.haelnorr.com/h/oslstats/internal/contexts"

templ DetailPage(season *db.Season) {
	@baseview.Layout(season.Name) {
		<div class="max-w-screen-2xl mx-auto px-4 py-8">
			@SeasonDetails(season)
		</div>
	}
}

templ SeasonDetails(season *db.Season) {
	{{
		permCache := contexts.Permissions(ctx)
		canEditSeason := permCache.HasPermission(permissions.SeasonsUpdate)
	}}
	<div class="bg-mantle border border-surface1 rounded-lg overflow-hidden">
		<!-- Header Section -->
		<div class="bg-surface0 border-b border-surface1 px-6 py-8">
			<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>
					<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 {
						<a
							href={ templ.SafeURL("/seasons/" + season.ShortName + "/edit") }
							class="rounded-lg px-4 py-2 hover:cursor-pointer text-center
              bg-blue hover:bg-blue/75 text-mantle transition"
						>
							Edit
						</a>
					}
					<a
						href="/seasons"
						class="rounded-lg px-4 py-2 hover:cursor-pointer text-center
                       bg-surface1 hover:bg-surface2 text-text transition"
					>
						Back to Seasons
					</a>
				</div>
			</div>
		</div>
		<!-- Information Grid -->
		<div class="grid grid-cols-1 md:grid-cols-2 gap-6 p-6">
			<!-- Regular Season Section -->
			<div class="bg-surface0 border border-surface1 rounded-lg p-6">
				<h2 class="text-2xl font-bold text-text mb-4 flex items-center gap-2">
					<span class="text-blue">●</span>
					Regular Season
				</h2>
				<div class="space-y-3">
					<div class="flex justify-between items-center">
						<span class="text-subtext0">Start Date:</span>
						<span class="text-text font-semibold">
							{ formatDateLong(season.StartDate) }
						</span>
					</div>
					<div class="flex justify-between items-center">
						<span class="text-subtext0">End Date:</span>
						<span class="text-text font-semibold">
							if !season.EndDate.IsZero() {
								{ formatDateLong(season.EndDate.Time) }
							} else {
								<span class="text-subtext1 italic">Not set</span>
							}
						</span>
					</div>
					<div class="flex justify-between items-center">
						<span class="text-subtext0">Duration:</span>
						<span class="text-text font-semibold">
							if !season.EndDate.IsZero() {
								{ formatDuration(season.StartDate, season.EndDate.Time) }
							} else {
								<span class="text-subtext1 italic">Ongoing</span>
							}
						</span>
					</div>
				</div>
			</div>
			<!-- Finals Section -->
			<div class="bg-surface0 border border-surface1 rounded-lg p-6">
				<h2 class="text-2xl font-bold text-text mb-4 flex items-center gap-2">
					<span class="text-yellow">★</span>
					Finals
				</h2>
				<div class="space-y-3">
					<div class="flex justify-between items-center">
						<span class="text-subtext0">Start Date:</span>
						<span class="text-text font-semibold">
							if !season.FinalsStartDate.IsZero() {
								{ formatDateLong(season.FinalsStartDate.Time) }
							} else {
								<span class="text-subtext1 italic">Not set</span>
							}
						</span>
					</div>
					<div class="flex justify-between items-center">
						<span class="text-subtext0">End Date:</span>
						<span class="text-text font-semibold">
							if !season.FinalsEndDate.IsZero() {
								{ formatDateLong(season.FinalsEndDate.Time) }
							} else {
								<span class="text-subtext1 italic">Not set</span>
							}
						</span>
					</div>
					<div class="flex justify-between items-center">
						<span class="text-subtext0">Duration:</span>
						<span class="text-text font-semibold">
							if !season.FinalsStartDate.IsZero() && !season.FinalsEndDate.IsZero() {
								{ formatDuration(season.FinalsStartDate.Time, season.FinalsEndDate.Time) }
							} else {
								<span class="text-subtext1 italic">Not scheduled</span>
							}
						</span>
					</div>
				</div>
			</div>
		</div>
		<!-- 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">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>
}

func formatDateLong(t time.Time) string {
	return t.Format("January 2, 2006")
}

func formatDuration(start, end time.Time) string {
	days := int(end.Sub(start).Hours()/24) + 1
	if days == 1 {
		return "1 day"
	} else if days < 7 {
		return strconv.Itoa(days) + " days"
	} else if days < 30 {
		weeks := days / 7
		if weeks == 1 {
			return "1 week"
		}
		return strconv.Itoa(weeks) + " weeks"
	} else if days < 365 {
		months := days / 30
		if months == 1 {
			return "1 month"
		}
		return strconv.Itoa(months) + " months"
	} else {
		years := days / 365
		if years == 1 {
			return "1 year"
		}
		return strconv.Itoa(years) + " years"
	}
}

templ SlapVersionBadge(version string) {
	switch version {
		case "rebound":
			<span class="inline-block bg-green px-3 py-1 rounded-full text-sm font-semibold text-mantle">
				Rebound
			</span>
		case "slapshot1":
			<span class="inline-block bg-red px-3 py-1 rounded-full text-sm font-semibold text-mantle">
				Slapshot 1
			</span>
	}
}