{{ componentBody "nav_bar" }}

{{ $storeID := .Request.URL.Query.Get "store-id" }}

<h1>Reports</h1>

<main>
	<select
		_='
			on change
				make a URL from window.location.href called currentURL
				set currentQuery to searchParams of currentURL
				set storeID to event.target.value
				js(currentQuery, storeID) currentQuery.set("store-id", storeID) end
				set search of currentURL to currentQuery.toString()
				set window.location to currentURL
		'
	>
		{{ if not $storeID }}
		<option selected disabled>
			choose a store
		</option>
		{{ end }}
		<option {{ if eq $storeID "test-store-1" }}selected{{ end }} >
			test-store-1
		</option>
		<option {{ if eq $storeID "test-store-2" }}selected{{ end }} >
			test-store-2
		</option>
		<option {{ if eq $storeID "test-store-3" }}selected{{ end }} >
			test-store-3
		</option>
	</select>

	{{- if $storeID }}
		<section
			style="
				display: grid;
				grid-template-columns: auto auto auto 1fr;
				column-gap: 1em;
				row-gap: 0.5em;
				margin: 1em 0;
			"
		>
			<div style="border-bottom: solid black 1px;">
				Date
			</div>
			<div style="border-bottom: solid black 1px;">
				Time
			</div>
			<div style="border-bottom: solid black 1px;">
				ID
			</div>
			<div style="border-bottom: solid black 1px;">
				Payload
			</div>
			{{ $events := .RawEvents.LoadEventsForStore "etsy" $storeID }}
			{{ range $e := $events }}
				<div>
					{{ printf "%d/%02d/%02d" $e.EventTimestamp.Year $e.EventTimestamp.Month $e.EventTimestamp.Day }}
				</div>
				<div>
					{{ $suffix := "am" }}
					{{ $ts := $e.EventTimestamp }}
					{{- $hr := $ts.Hour }}
					{{- if eq $hr 0 }}
						{{- $hr = 12 }}
					{{- else if eq $hr 12 }}
						{{- $suffix = "pm" }}
					{{- else if gt $hr 12 }}
						{{- $hr = subInt $hr 12 }}
						{{- $suffix = "pm" }}
					{{- end }}

					{{- $hrColorHex := multInt $hr 10 | subInt (subInt 256 128) | printf "%02x" }}
					{{- $minColorHex := multInt $ts.Minute 2 | subInt (subInt 256 128) | printf "%02x" }}
					{{- $secColorHex := multInt $ts.Second 2 | subInt (subInt 256 128) | printf "%02x" }}
					<span style="color: #{{ $hrColorHex }}{{ $hrColorHex }}{{ $hrColorHex }};">{{ printf "%02d" $hr }}</span>:<span style="color: #{{ $minColorHex }}{{ $minColorHex }}{{ $minColorHex }};">{{ printf "%02d" $ts.Minute }}</span>:<span style="color: #{{ $secColorHex }}{{ $secColorHex }}{{ $secColorHex }};">{{ printf "%02d" $ts.Second }}</span>{{ printf " %s" $suffix }}
				</div>
				<div>
					{{ $e.EventID }}
				</div>
				<div>
					{{ prettyPrintJSON $e.Payload }}
				</div>
			{{ end }}
		</section>
	{{- end }}
</main>