{{- .Auth.ByMatchingAccountID 2 }}

{{- $acctID := .Identity.Account.AccountID }}
{{- $stores := .Accounts.GetShops $acctID -}}


{{- define "title" }} Manage Mock Inventory ⋅ Inventory++ {{ end }}

{{- define "header-accordion-header" }}
	<h2 class="inline-block">
		New Sync Group
	</h2>
{{- end }}

{{- define "header-accordion-body" }}
	{{- $acctID := .Identity.Account.AccountID }}
	{{ component (printf "accounts/%d/inventory/sync-groups/mock/draft/table" $acctID) }}

	<form
		hx-post="{{ (printf "/api/accounts/%d/inventory/sync-groups/mock" $acctID) }}"
	>
		<label class="block text-center mt-[1em]">
			Name:
			<input
				type="text"
				name="name"
				class="bg-accent p-[0.25em] rounded-sm"
				placeholder="New Sync Group"
				required
			/>
		</label>

		<div class="flex justify-center gap-[0.5em] mt-[1em]">
			{{ component (printf "accounts/%d/inventory/sync-groups/mock/draft/table/add-listing-button" $acctID) }}
			{{ component (printf "accounts/%d/inventory/sync-groups/mock/draft/table/save-sync-group-button" $acctID) }}
		</div>
	</form>
{{- end }}

{{- define "sync-group-accordion-header" }}
	<h3 class="text-center">
		{{ .Group.Name }}
	</h3>
{{- end }}

{{- define "sync-group-accordion-body" }}
	{{- $acctID := .Identity.Account.AccountID }}
	<table>
		<thead>
			<tr>
				<th>
					Name
				</th>
				<th>
					SKU
				</th>
				<th>
					Description
				</th>
				<th>
					Count
				</th>
			</tr>
		</thead>
		<tbody>
		{{- $dot := . }}
		{{- range $listing := .Group.Listings }}
			<tr>
				{{- $val := $dot.Accounts.GetMockListing $acctID $listing.Platform $listing.ShopID $listing.ListingID }}
				<td>
					{{ $val.Name }}
				</td>
				<td>
					{{ $val.SKU }}
				</td>
				<td>
					{{ $val.Description }}
				</td>
				<td>
					{{ $val.Count }}
				</td>
			</tr>
		{{- end }}
		</tbody>
	</table>

	{{- component "button"
		"Class" "mt-[1em]"
		"Text" "Delete Group"
		"HXDelete" (printf "/api/accounts/%d/inventory/sync-groups/mock/%d" $acctID .Group.SyncGroupID)
		"HXSwap" "none"
	}}
{{- end }}


<section
	id="new-mock-sync-group"
	class="
		flex flex-col items-stretch

		py-[1em]
	"
>
	{{ component "accordion"
		"Open" true
		"Class"	`
			mx-[1em]
			mb-[1em]
		`
		"#accordion-header"	"header-accordion-header"
		"#accordion-body"	"header-accordion-body"
	}}

	<ul
		id="existing-mock-sync-groups-list"
		class="flex flex-col gap-[1em]"
		hx-get="{{ printf "/ui/accounts/%d/inventory/mock" $acctID }}"
		hx-select="#existing-mock-sync-groups-list"
		hx-swap="morph"
		hx-trigger="{{ printf "sse:accounts_%d_inventory_sync-groups_mock,sse:accounts_%d_inventory_mock" $acctID $acctID }}"
	>

	{{- range $grp := .Accounts.ListMockSyncGroups $acctID }}
		<li
			id="sync-group-{{$grp.SyncGroupID}}"
			class="
				mx-[1em]
			"
		>
			{{ component "accordion"
				"GroupName"			"sync-group"
				"Group"				$grp
				"#accordion-header"	"sync-group-accordion-header"
				"#accordion-body"	"sync-group-accordion-body"
			}}
		</li>
	{{- end }}
	</ul>



</section>