{{- .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 }}

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

		py-[1em]
	"
>
	{{ component "accordion"
		"Name" "sync-group-page"
		"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 }}
		{{ component (printf "accounts/%d/inventory/sync-groups/mock/%d/list-item" $acctID $grp.SyncGroupID)
			"SyncGroup" $grp
		}}
	{{- end }}
	</ul>
</section>