oslstats/internal/view/seasonsview/list_page.templ

package seasonsview

import "git.haelnorr.com/h/oslstats/internal/db"
import "git.haelnorr.com/h/oslstats/internal/view/baseview"
import "git.haelnorr.com/h/oslstats/internal/view/pagination"
import "git.haelnorr.com/h/oslstats/internal/view/sort"
import "fmt"
import "time"
import "github.com/uptrace/bun"
import "git.haelnorr.com/h/oslstats/internal/contexts"
import "git.haelnorr.com/h/oslstats/internal/permissions"

templ ListPage(seasons *db.List[db.Season]) {
	@baseview.Layout("Seasons") {
		<!-- Flatpickr CSS -->
		<link rel="stylesheet" href="/static/vendored/flatpickr@4.6.13.min.css"/>
		<link rel="stylesheet" href="/static/css/flatpickr-catppuccin.css"/>
		<!-- Flatpickr JS -->
		<script src="/static/vendored/flatpickr@4.6.13.min.js"></script>
		<div class="max-w-screen-2xl mx-auto px-2">
			@SeasonsList(seasons)
			@NewSeasonModal()
		</div>
	}
}

templ SeasonsList(seasons *db.List[db.Season]) {
	{{
		permCache := contexts.Permissions(ctx)
		canAddSeason := permCache.HasPermission(permissions.SeasonsCreate)
		sortOpts := []db.OrderOpts{
			{
				Order:   bun.OrderDesc,
				OrderBy: "start_date",
				Label:   "Start Date (Newest First)",
			},
			{
				Order:   bun.OrderAsc,
				OrderBy: "start_date",
				Label:   "Start Date (Oldest First)",
			},
			{
				Order:   bun.OrderAsc,
				OrderBy: "name",
				Label:   "Name (A-Z)",
			},
			{
				Order:   bun.OrderDesc,
				OrderBy: "name",
				Label:   "Name (Z-A)",
			},
		}
	}}
	<div id="seasons-list-container">
		<form
			id="seasons-form"
			hx-target="#seasons-list-container"
			hx-swap="outerHTML"
			hx-push-url="true"
			x-data={ templ.JSFuncCall("paginateData", 
        "seasons-form",
        "/seasons",
				seasons.PageOpts.Page, 
				seasons.PageOpts.PerPage, 
				seasons.PageOpts.Order, 
				seasons.PageOpts.OrderBy).CallInline }
		>
			<!-- Header with title and sort controls -->
			<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">Seasons</span>
				if canAddSeason {
					<button
						type="button"
						@click="$dispatch('open-new-season-modal')"
						class="rounded-lg px-2 py-1 hover:cursor-pointer text-center text-sm
              bg-green hover:bg-green/75 text-mantle transition"
					>Add season</button>
				}
				</div>
				@sort.Dropdown(seasons.PageOpts, sortOpts)
			</div>
			<!-- Results section -->
			if len(seasons.Items) == 0 {
				<div class="bg-mantle border border-surface1 rounded-lg p-8 text-center">
					<p class="text-subtext0 text-lg">No seasons found</p>
				</div>
			} else {
				<!-- Card grid -->
				<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 flex flex-col"
							href={ fmt.Sprintf("/seasons/%s", s.ShortName) }
						>
							<!-- Header: Name + Status Badge -->
							<div class="flex justify-between items-start mb-3">
								<h3 class="text-xl font-bold text-text">{ s.Name }</h3>
								@StatusBadge(s, true, true)
							</div>
							<!-- 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>
								@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 -->
						{{
							listStatus := s.GetStatus()
						}}
						<div class="text-xs text-subtext1 mt-auto">
							switch listStatus {
								case db.StatusUpcoming:
									Starts: { formatDate(s.StartDate) }
								case db.StatusCompleted:
									if !s.FinalsEndDate.IsZero() {
										Completed: { formatDate(s.FinalsEndDate.Time) }
									} else if !s.EndDate.IsZero() {
										Completed: { formatDate(s.EndDate.Time) }
									}
								case db.StatusFinals:
									Finals Started: { formatDate(s.FinalsStartDate.Time) }
								case db.StatusFinalsSoon:
									Finals Start: { formatDate(s.FinalsStartDate.Time) }
								default:
									Started: { formatDate(s.StartDate) }
							}
						</div>
						</a>
					}
				</div>
				<!-- Pagination controls -->
				@pagination.Pagination(seasons.PageOpts, seasons.Total)
			}
		</form>
		<script src="/static/js/pagination.js"></script>
	</div>
}

func formatDate(t time.Time) string {
	return t.Format("02/01/2006") // DD/MM/YYYY
}