saved mock listing

templates/pages/accounts/{acctID.int64}/platforms/{platform}/shops/mocks/{shopID}/index.html.tmpl

@@ -27,7 +27,7 @@
 		</h3>
 	</header>
 
-	<div class="grid grid-cols-[1fr_1fr]">
+	<div class="grid grid-cols-[1fr_1fr] gap-[1em] p-[1em]">
 		<form
 			id="new-listing-form"
 			hx-post={{ printf "/api/accounts/%d/platforms/amazon/shops/mocks/%s/listings" $acctID $shopID }}
@@ -37,7 +37,10 @@
 				grid-cols-[max-content_1fr]
 				grid-rows-[auto_auto_auto]
 				gap-[0.5em]
-				m-[0.5em]
+				p-[1em]
+				bg-card
+				h-fit
+				rounded-lg
 			"
 		>
 			<label for="name">
@@ -49,7 +52,7 @@
 				required
 				minlength="5"
 				placeholder="What's in a name..."
-				class="bg-card p-[0.25em]"
+				class="bg-accent p-[0.25em] rounded-sm"
 			/>
 			<label for="sku">
 				SKU: 
@@ -58,7 +61,7 @@
 				type="text"
 				name="sku"
 				required
-				class="bg-card p-[0.25em]"
+				class="bg-accent p-[0.25em] rounded-sm"
 			/>
 			<label for="description">
 				Description: 
@@ -69,7 +72,7 @@
 				required
 				minlength="10"
 				placeholder="Anything will do..."
-				class="bg-card p-[0.25em]"
+				class="bg-accent p-[0.25em] rounded-sm"
 			/>
 			{{ component "button"
 				"Text" "Save Listing"
@@ -77,16 +80,24 @@
 			}}
 		</form>
 
-		<ul>
-			<li>
-				Listing 1
-			</li>
-			<li>
-				Listing 2
-			</li>
-			<li>
-				Listing 3
+
+		<ul class="max-h-[50em] overflow-y-auto flex flex-col gap-[1em]">
+		{{- range $listing := .Accounts.ListMockListingsForShop $acctID $platform $shopID }}
+			<li class="p-[1em] bg-card rounded-lg">
+				<div>
+					Name: {{ $listing.Name }}
+				</div>
+				<div>
+					SKU: {{ $listing.SKU }}
+				</div>
+				<div>
+					Description: {{ $listing.Description }}
+				</div>
+				<div>
+					Count: {{ $listing.Count }}
+				</div>
 			</li>
+		{{- end }}
 		</ul>
 	</div>
 </section>