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>
}