{{- .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" open>
		<summary class="list-none cursor-pointer self-center">
			<h2 class="bg-card my-[0.5em] px-[2em] py-[0.5em] rounded-lg">
				Shops
			</h2>
		</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>