{{- .Auth.ByMatchingAccountID 2 }}

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


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


<section class="py-[2em] flex flex-col items-center">
	<details
		class="
			group

			flex
			flex-col
			items-center

			{{/* TODO: make custom class for all this */}}
			details-content:opacity-[0]
			open:details-content:opacity-[1]

			details-content:transform-[translate(0px,-2em)]
			open:details-content:transform-[translate(0px,0px)]

			details-content:border-transparent
			open:details-content:border-dotted
			open:details-content:border-x-[0px]
			open:details-content:border-x-transparent
			open:details-content:border-b-[0px]
			open:details-content:border-b-transparent
			open:details-content:border-t-background
			open:details-content:border-t-[0.25rem]
			details-content:outline-transparent

			details-content:transition-[opacity_transform]
		"
		hx-preserve
		open
	>

		<summary
			class="
				flex
				items-center
				gap-[1em]
				list-none
				p-[1em]
				mb-[1em]
				cursor-pointer
				bg-accent
				rounded-lg

				after:content-['+']
				group-open:after:content-['-']
				after:font-bold
				after:text-[2em]
				after:leading-[1em]
			"
		>
			<h2 class="inline-block">
				New Sync Group
			</h2>
		</summary>

		{{ component (printf "accounts/%d/inventory/sync-groups/mock/draft/table" $acctID) }}

		<div class="flex justify-center gap-[0.5em]">
			{{ 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>
	</details>
</section>