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

		<ul class="list-none">
			{{- define "shop-list-entry" }}
				{{/* .Platform, .AccountID */}}
			<li class="my-[1rem] rounded-lg bg-accent">
				<details class="group">
					<summary class="
						list-none
						p-[1em]
						after:content-['+']
						group-open:after:content-['-']
						after:float-right
						after:font-bold
						after:text-[2em]
						after:leading-[1em]
						cursor-pointer
						group-open:border-b-background
						group-open:border-b-[0.25rem]
						border-dotted
					">
						<h3 class="inline-block">{{.Platform}}</h3>
					</summary>

					<div class="p-[1em] text-center">
						{{- $pathSegment := lowerCamelCase .Platform }}
						{{-
							component
							(printf "/accounts/%d/shops/link-sections/%s" .AccountID $pathSegment)
						}}
					</div>
				</details>
			</li>
			{{- end }}
			{{- template "shop-list-entry" (props "Platform" "Amazon" "AccountID" $acctID) }}
			{{- template "shop-list-entry" (props "Platform" "Big Cartel" "AccountID" $acctID) }}
			{{- template "shop-list-entry" (props "Platform" "eBay" "AccountID" $acctID) }}
			{{- template "shop-list-entry" (props "Platform" "Etsy" "AccountID" $acctID) }}
			{{- template "shop-list-entry" (props "Platform" "Ecwid" "AccountID" $acctID) }}
			{{- template "shop-list-entry" (props "Platform" "Shopify" "AccountID" $acctID) }}
			{{- template "shop-list-entry" (props "Platform" "Square Online" "AccountID" $acctID) }}
			{{- template "shop-list-entry" (props "Platform" "Squarespace" "AccountID" $acctID) }}
			{{- template "shop-list-entry" (props "Platform" "Tiktok" "AccountID" $acctID) }}
			{{- template "shop-list-entry" (props "Platform" "Walmart Marketplace" "AccountID" $acctID) }}
			{{- template "shop-list-entry" (props "Platform" "Wix" "AccountID" $acctID) }}
			{{- template "shop-list-entry" (props "Platform" "Woo Commerce" "AccountID" $acctID) }}
			{{- template "shop-list-entry" (props "Platform" "Zoho" "AccountID" $acctID) }}
		</ul>
	</details>
</section>