{{- $dot := or .dot . }}
{{- .Auth.ByMatchingAccountID 2 }}



{{- $acctID := 0 }}
{{- if $dot.Identity }}
	{{- $acctID = $dot.Identity.Account.AccountID }}
{{- else if .PathParams }}
	{{- $acctID = $dot.PathParams.acctID | parseInt64 }}
{{- else }}
	{{- $acctID = $dot.AccountID }}
{{- end }}
{{- $stores := $dot.Accounts.GetShops $acctID -}}


<table id="inventory-table-2" class="max-w-full overflow-x-auto">
	<thead>
		<tr>
			<th>
				Shop
			</th>
			<th>
				Listing
			</th>
			<th>
				SKU
			</th>
			<th>
				Description
			</th>
			<th>
				
			</th>
		</tr>
	</thead>
	<tbody
		_="
			init
				set element allRowsFilledOut to false
				set element numRows to 0

			def checkIfAllRowsAreFilledOut()
				set rows to my children
				set element allRowsFilledOut to true
				set element numRows to rows.length
				for row in rows
					set filledOut to row.dataset.filledOut is 'true'
					if not filledOut then
						set element allRowsFilledOut to false
						break
					end
				end
			end

			on rowUpdated
				checkIfAllRowsAreFilledOut()
				send setDisabled(disabled: not allRowsFilledOut or numRows < 2) to #create-sync-group-button
		"
	>
		{{- $listings := $dot.Accounts.GetSyncGroupListingDrafts $acctID }}
		{{- range $listing := $listings }}
			{{- componentBody "accounts/{acctID}/inventory/sync-groups/draft/listings/{orderIndex}"
				"dot" ($dot | addPathParam "orderIndex" $listing.OrderIndex)
			}}
		{{- end }}
	</tbody>
	<tfoot>
		<tr>
			<th>
				Shop
			</th>
			<th>
				Listing
			</th>
			<th>
				SKU
			</th>
			<th>
				Description
			</th>
			<th>
				
			</th>
		</tr>
	</tfoot>
</table>