{{- .Auth.ByMatchingAccountID 2 }}

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


{{- define "title" }} Inventory++ {{ end }}

<h1 class="text-center mb-[0.5em]">Inventory</h1>

<h2 class="text-center mb-[0.5em]">Synced Listings</h2>

<section class="w-full flex flex-col items-center">
	<h3>
		Create a Sync Group
	</h3>
	<h4>
		(Draft 2)
	</h4>
	{{ component "accounts/{acctID}/inventory/sync-groups/draft/table" "dot" . }}

	<div>
		{{ component "button"
			"HXPost" (printf "/api/accounts/%d/inventory/sync-groups/draft/listings" $acctID)
			"HXTarget" "#accounts-acct-id-inventory-sync-groups-draft-table"
			"HXSwap" "outerHTML"
			"Class" "mt-[1em] mb-[1em]"
			"Text" "Add Listing"
			"_" `
				on click
					send rowUpdated to the first <tbody/> in #accounts-acct-id-inventory-sync-groups-draft-table
			`
		}}

		{{/* TODO: enable the button when all listings are filled and there are at least two listings */}}
		{{/* TODO: save the listings as a sync group on click */}}
		{{ component "button"
			"ID" "create-sync-group-button"
			"HXPost" (printf "/api/accounts/%d/sync-groups" $acctID)
			"Class" "mt-[1em] mb-[1em]"
			"Text" "Save Sync Group"
			"Disabled" true
			"_" `
				on setDisabled(disabled)
					if disabled then
						add @disabled to me
					else
						remove @disabled from me
					end
			`
		}}
	</div>
</section>