package capture

import "gitea.henriburau.de/haw-lan/cod4watcher/models"
import "gitea.henriburau.de/haw-lan/cod4watcher/views/layouts"
import "gitea.henriburau.de/haw-lan/cod4watcher/views/components"
import "fmt"
import "net/url"

templ Capture(capture *models.Capture, table models.ResultTable) {
	@layouts.Base() {
		<div class="flex flex-col">
			<div class="flex">
				<div>
					<div class="block font-bold text-lg">
						{ capture.Name }
					</div>
					@components.ServerAddress(capture.Host, capture.Port)
					<div
						class="my-3 w-60"
						hx-get={ fmt.Sprintf("/server/status?host=%s&port=%s", url.QueryEscape(capture.Host), url.QueryEscape(capture.Port)) }
						hx-trigger="load, every 20s"
					>
						Loading Server status...
					</div>
				</div>
				<div class="flex w-full justify-around items-center gap-5">
					if len(table.Rows) >= 1 {
						@Medal("1. Platz", table.Rows[0].Name, "text-yellow-400")
					}
					if len(table.Rows) >= 2 {
						@Medal("2. Platz", table.Rows[1].Name, "text-gray-500")
					}
					if len(table.Rows) >= 3 {
						@Medal("3. Platz", table.Rows[2].Name, "text-amber-700")
					}
				</div>
			</div>
			<div hx-get={ fmt.Sprintf("/captures/%d/table", capture.ID) } hx-trigger="every 10s">
				@components.CaptureTable(table)
			</div>
		</div>
	}
}

templ Medal(placement, name, color string) {
	<div class="flex flex-col gap-2">
		<i class={ "fa-solid", "fa-medal","text-3xl", color }></i>
		<span>
			{ placement } { name }
		</span>
	</div>
}