{{- $acctID := .Identity.Account.AccountID }}

{{- $platform := .Platform }}
{{- if not $platform }}
	{{- $platform = .Request.URL.Query.Get "platform" }}
{{- end }}

{{- $shopID := .ShopID }}
{{- if not $shopID }}
	{{- $shopID = .Request.URL.Query.Get "shop-id" }}
{{- end }}


<label for="shop-selector">
	Select a Shop
</label>
<select
	id="shop-selector"
	hx-swap=""
	hx-get="/ui/accounts/{{$acctID}}/reports/mock"
	hx-vals="js:{
		platform: console.log(event.target.value.replace(/-.*/, '')) || event.target.value.replace(/-.*/, ''),
		'shop-id': console.log(event.target.value.replace(/[^-]*-/, '')) || event.target.value.replace(/[^-]*-/, ''),
	}"
	hx-push-url="true"
	hx-target="body"
>
{{- range $shop := .Accounts.GetMockShops $acctID }}
	{{- $isSelected := and (eq $platform $shop.Platform) (eq $shopID $shop.ShopID) }}
	<option
		value="{{ $shop.Platform }}-{{ $shop.ShopID }}"
		{{ if $isSelected }}selected{{end}}
	>
		{{ $shop.Name }}
	</option>
{{- end }}
</select>

<h3 class="m-[1em]">
	Platform: {{ $platform }}
</h3>

{{- $evts := "" }}
{{- if and $platform $shopID }}
	{{- $parsedPlatform := parsePlatform $platform }}
	{{- $evts = .Reports.GetRawShopEvents $acctID $parsedPlatform $shopID }}
{{- end }}

<table id="raw-event-table">
	<thead>
		<tr>
			<td>Time</td>
			{{/*<td>EventID</td>*/}}
			<td>Event</td>
		</tr>
	</thead>
	<tbody>
{{- if $evts }}
	{{- range $evt := $evts }}
		<tr>
			<td>{{$evt.EventTimestamp}}</td>
			{{/*<td>{{$evt.EventID}}</td>*/}}
			<td>{{prettyPrintJSON $evt.RawPayload}}</td>
		</tr>
	{{- end }}
{{- end }}

	</tbody>
</table>