{{- .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>
	{{ componentBody "accounts/{acctID}/inventory/sync-table-v2" "dot" . }}

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

		{{/* 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 */}}
		{{ componentBody "button-dev"
			"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>

<section class="w-full flex flex-col items-center">
	<h3>
		Draft 1
	</h3>
	{{ componentBody "accounts/{acctID}/inventory/sync-table" "dot" . }}
</section>

<section class="flex justify-center mt-[1em]">
	{{ componentBody "accounts/{acctID}/inventory/sync-table/showcase-table" "dot" . }}
</section>

<section class="w-full flex justify-center mt-[1em]">
	{{ componentBody "button-dev"
		"HXGet" (printf "/api/accounts/%d/inventory/sync-table/new-row" $acctID)
		"HXTarget" "#inventory-table > tbody"
		"HXSwap" "beforeend"
		"Class" "mt-[1em] mb-[1em]"
		"Text" "Add Row"
	}}
</section>