mock shop sync group listing draft page

templates/pages/accounts/{acctID.int64}/inventory/index.html.tmpl

@@ -4,7 +4,7 @@
 {{- $stores := .Accounts.GetShops $acctID -}}
 
 
-{{- define "title" }} Inventory++ {{ end }}
+{{- define "title" }} Manage Inventory ⋅ Inventory++ {{ end }}
 
 <h1 class="text-center mb-[0.5em]">Inventory</h1>
 

templates/pages/accounts/{acctID.int64}/inventory/mock.html.tmpl

@@ -4,22 +4,70 @@
 {{- $stores := .Accounts.GetShops $acctID -}}
 
 
-{{- define "title" }} Inventory++ {{ end }}
+{{- define "title" }} Manage Mock Inventory ⋅ Inventory++ {{ end }}
 
-<h1 class="text-center mb-[0.5em]">Inventory</h1>
 
-<h2 class="text-center mb-[0.5em]">Synced Listings</h2>
+<section class="py-[2em] flex flex-col items-center">
+	<details
+		class="
+			group
 
-<section class="w-full flex flex-col items-center">
-	<h3 class="mb-[1.25rem]">
-		Create a Sync Group
-	</h3>
-	{{/*
-	{{ component (printf "accounts/%d/inventory/sync-groups/draft/table" $acctID) }}
+			flex
+			flex-col
+			items-center
 
-	<div>
-		{{ component (printf "accounts/%d/inventory/sync-groups/draft/table/add-listing-button" $acctID) }}
-		{{ component (printf "accounts/%d/inventory/sync-groups/draft/table/save-sync-group-button" $acctID) }}
-	</div>
-	*/}}
+			{{/* TODO: make custom class for all this */}}
+			details-content:opacity-[0]
+			open:details-content:opacity-[1]
+
+			details-content:transform-[translate(0px,-2em)]
+			open:details-content:transform-[translate(0px,0px)]
+
+			details-content:border-transparent
+			open:details-content:border-dotted
+			open:details-content:border-x-[0px]
+			open:details-content:border-x-transparent
+			open:details-content:border-b-[0px]
+			open:details-content:border-b-transparent
+			open:details-content:border-t-background
+			open:details-content:border-t-[0.25rem]
+			details-content:outline-transparent
+
+			details-content:transition-[opacity_transform]
+		"
+		hx-preserve
+		open
+	>
+
+		<summary
+			class="
+				flex
+				items-center
+				gap-[1em]
+				list-none
+				p-[1em]
+				mb-[1em]
+				cursor-pointer
+				bg-accent
+				rounded-lg
+
+				after:content-['+']
+				group-open:after:content-['-']
+				after:font-bold
+				after:text-[2em]
+				after:leading-[1em]
+			"
+		>
+			<h2 class="inline-block">
+				New Sync Group
+			</h2>
+		</summary>
+
+		{{ component (printf "accounts/%d/inventory/sync-groups/mock/draft/table" $acctID) }}
+
+		<div class="flex justify-center gap-[0.5em]">
+			{{ component (printf "accounts/%d/inventory/sync-groups/mock/draft/table/add-listing-button" $acctID) }}
+			{{ component (printf "accounts/%d/inventory/sync-groups/mock/draft/table/save-sync-group-button" $acctID) }}
+		</div>
+	</details>
 </section>