{{- .Auth.ByMatchingAccountID 2 }}

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

{{- $acctID := .Identity.Account.AccountID }}

<section class="m-[1rem]">
	<h2>
		<div class="
			flex
			justify-start
			items-center
			gap-[1em]

			pb-[0.5em]
			border-b-[2px]
			border-sidebar-border
		">
			<div
				class="
					flex
					justify-center
					items-center
				"
				style="
					flex-basis: 4em;
					flex-shrink: 0;
				"
			>
				<img
					src="{{ .Identity.Claims.Picture }}"
					class="rounded-[50%] height-[3em]"
				/>
			</div>

			<div class="flex flex-col">
				<span class="font-display" style="word-break: break-word;">
					{{ .Identity.Claims.Name }}
				</span>

				<span style="word-break: break-word;">
					{{ or .Identity.Claims.Nickname .Identity.Claims.Subject }}
				</span>

			</div>

		</div>
	</h2>
</section>


<section
	id="shops-section"
	class="
		m-[1rem]
		pb-[1rem]
		border-b-[2px]
		border-sidebar-border
	"
>
	<details class="flex flex-col items-stretch">
		<summary class="list-none cursor-pointer self-center">
			{{-
				component "tutorial-tooltip"
					"AnchorTag" 				"h2"
					"AnchorID" 					"shops-button"
					"AnchorClickedEventName" 	"anchorClicked"
					"AnchorContent" 			"Shops"

					"AnchorClass" 				"bg-card my-[0.5em] px-[2em] py-[0.5em] rounded-lg"

					"PopoverID" 				"shops-popover"
					"PopoverContentIDPrefix" 	"shops-popover-content"
					"PopoverContents" 			(
						newHTMLSlice
							"Click <span class=\"font-bold italic\">Shops</span> to display all shops and platforms available"
							"Click <span class=\"font-bold italic\">Shops</span> to hide them again"
							"There you go!"
					)
			}}


			<!--h2
				class="bg-card my-[0.5em] px-[2em] py-[0.5em] rounded-lg"
				style="anchor-name: --shops-button;"
				_="
					on click
						set popover to the #shops-popover
						send shopsButtonClicked to #shops-popover
				"
			>
				Shops
			</h2-->
			<!--div
				popover="manual"
				id="shops-popover"
				class="
					border-[1px] border-sidebar-border rounded-lg
					bg-card
					p-[1em]
					animate-pulse
					max-w-[80vw]
					mt-[1.5em]
					open:grid
					cursor-default
				"
				style="
					position: fixed;
					position-anchor: --shops-button;
					position-area: bottom;

					grid-template-columns: 1fr max-content;
					grid-template-rows: max-content;
					gap: 1em;

					box-shadow: 2px 2px 2px 1px rgb(0 0 0 / 20%);

					transition-behavior: allow-discrete;
				"
				_="
					init
						call me.showPopover()
						set :shopButtonClicks to 0

					on click
						event.preventDefault()

					on shopsButtonClicked
						set :shopButtonClicks to :shopButtonClicks + 1
						if :shopButtonClicks is 1 then
							hide #shop-popover-msg-1
							show #shop-popover-msg-2
						else if :shopButtonClicks is 2 then
							hide #shop-popover-msg-2
							show #shop-popover-msg-3
						else if :shopButtonClicks is 3 then
							call me.hidePopover()
						end
				"
			>
				<span id="shop-popover-msg-1" style="grid-column: 1;">
					Click <span class="font-bold italic">Shops</span> to display all shops and platforms available
				</span>
				<span id="shop-popover-msg-2" style="grid-column: 1; display: none;">
					Click <span class="font-bold italic">Shops</span> to hide them again
				</span>
				<span id="shop-popover-msg-3" style="grid-column: 1; display: none;">
					There you go!
				</span>
				<button
					class="cursor-pointer"
					style="
						grid-column: 2;
						font-size: 2em;
						line-height: 0.5em;
					"
					_="
						on click
							set parent to the closest #shops-popover
							call parent.hidePopover()
					"
				>
					&#x00d7;
				</button>
			</div-->
		</summary>

		<ul class="list-none" hx-swap="morph">
			{{- range $i, $platform := .Accounts.GetOrderOfPlatformsOnAccountPage $acctID }}
				{{ component (printf "/accounts/%d/shops/list-items/%s" $acctID $platform) "OrderIndex" $i }}
			{{- end }}
		</ul>
	</details>
</section>