package playersview

import "git.haelnorr.com/h/oslstats/internal/db"
import "fmt"

templ PlayerTeamsTab(teamInfos []*db.PlayerTeamInfo) {
	if len(teamInfos) == 0 {
		<div class="bg-surface0 border border-surface1 rounded-lg p-8 text-center">
			<p class="text-subtext0 text-lg">No team history yet.</p>
			<p class="text-subtext1 text-sm mt-2">This player has not been on any teams.</p>
		</div>
	} else {
		<div class="bg-surface0 border border-surface1 rounded-lg overflow-hidden">
			<div class="overflow-x-auto">
				<table class="w-full">
					<thead class="bg-mantle border-b border-surface1">
						<tr>
							<th class="px-4 py-3 text-left text-sm font-semibold text-text">Team</th>
							<th class="px-4 py-3 text-right text-sm font-semibold text-text">Seasons Played</th>
						</tr>
					</thead>
					<tbody class="divide-y divide-surface1">
						for _, info := range teamInfos {
							<tr class="hover:bg-surface1 transition-colors">
								<td class="px-4 py-3 text-sm">
									<a
										href={ templ.SafeURL(fmt.Sprintf("/teams/%d", info.Team.ID)) }
										class="text-blue hover:text-blue/80 transition"
									>
										<div class="flex items-center gap-3">
											if info.Team.Color != "" {
												<div
													class="w-4 h-4 rounded-full border border-surface1 shrink-0"
													style={ "background-color: " + templ.SafeCSS(info.Team.Color) }
												></div>
											}
											<span>{ info.Team.Name }</span>
										</div>
									</a>
								</td>
								<td class="px-4 py-3 text-sm text-subtext0 text-right">
									{ fmt.Sprint(info.SeasonsCount) }
								</td>
							</tr>
						}
					</tbody>
				</table>
			</div>
		</div>
	}
}