stubbed updating of saved mock listing

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

@@ -29,7 +29,7 @@
 
 	<div class="grid grid-cols-[1fr_1fr] gap-[1em] p-[1em]">
 		<form
-			id="new-listing-form"
+			id="edit-listing-form"
 			hx-post={{ printf "/api/accounts/%d/platforms/amazon/shops/mocks/%s/listings" $acctID $shopID }}
 			hx-swap="none"
 			class="
@@ -42,6 +42,19 @@
 				h-fit
 				rounded-lg
 			"
+			_="
+				on editListing(
+					listingID,
+					name,
+					sku,
+					description
+				)
+					set the value of the first <input[name='name']/> in me to name
+					set the value of the first <input[name='sku']/> in me to sku
+					set the value of the first <input[name='description']/> in me to description
+					remove .hidden from <button#save-as-new-listing-button/>
+					remove @disabled from <button#save-as-new-listing-button/>
+			"
 		>
 			<label for="name">
 				Name: 
@@ -77,25 +90,70 @@
 			{{ component "button"
 				"Text" "Save Listing"
 				"Class" "self-center p-[1em] col-span-2"
+				"_" "on click send reset() to <li/> in next <ul/>"
+			}}
+			{{ component "button"
+				"Text" "Save As New Listing"
+				"Class" "self-center p-[1em] col-span-2 hidden"
+				"ID" "save-as-new-listing-button"
+				"Disabled" true
+				"_" "on click event.preventDefault() then send reset() to <li/> in next <ul/>"
 			}}
 		</form>
 
-
 		<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
+				class="
+					p-[1em]
+					grid grid-cols-[max-content_1fr] gap-x-[1em]
+					bg-card
+					rounded-lg
+				"
+				_="
+					on click
+						send reset() to <li/> in the closest <ul/>
+						add .border-foreground to me
+						add .border to me
+						send editListing(
+							listingID: '{{$listing.ListingID}}',
+							name: '{{$listing.Name}}',
+							sku: '{{$listing.SKU}}',
+							description: '{{$listing.Description}}'
+						) to #edit-listing-form
+
+					on reset
+						remove .border-foreground from me
+						remove .border from me
+				"
+			>
+				<span>
+					Name:
+				</span>
+				<span>
+					{{ $listing.Name }}
+				</span>
+
+				<span>
+					SKU:
+				</span>
+				<span>
+					{{ $listing.SKU }}
+				</span>
+
+				<span>
+					Description:
+				</span>
+				<span>
+					{{ $listing.Description }}
+				</span>
+
+				<span>
+					Count:
+				</span>
+				<span>
+					{{ $listing.Count }}
+				</span>
 			</li>
 		{{- end }}
 		</ul>