mock shop page: can delete listings

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

@@ -297,9 +297,12 @@
 					id="listing-{{$listing.ListingID}}"
 					class="
 						p-[1em]
-						grid grid-cols-[max-content_1fr] gap-x-[1em]
 						bg-card
 						rounded-lg
+
+						flex
+						flex-col
+						items-stretch
 					"
 					_="
 						on click
@@ -318,33 +321,50 @@
 							remove .border from me
 					"
 				>
-					<span>
-						Name:
-					</span>
-					<span class="listing-name">
-						{{ $listing.Name }}
-					</span>
+					<table class="mb-[0.5em]" style="display: table;">
+						<tr>
+							<th>
+								Name:
+							</th>
+							<td class="listing-name">
+								{{ $listing.Name }}
+							</td>
+						</tr>
 
-					<span>
-						SKU:
-					</span>
-					<span>
-						{{ $listing.SKU }}
-					</span>
+						<tr>
+							<th>
+								SKU:
+							</th>
+							<td>
+								{{ $listing.SKU }}
+							</td>
+						</tr>
 
-					<span>
-						Description:
-					</span>
-					<span>
-						{{ $listing.Description }}
-					</span>
+						<tr>
+							<th>
+								Description:
+							</th>
+							<td>
+								{{ $listing.Description }}
+							</td>
+						</tr>
 
-					<span>
-						Count:
-					</span>
-					<span>
-						{{ $listing.Count }}
-					</span>
+						<tr>
+							<th>
+								Count:
+							</th>
+							<td>
+								{{ $listing.Count }}
+							</td>
+						</tr>
+					</table>
+
+					{{ component "button"
+						"Title" "Delete Listing"
+						"Text" (rawHTML "&#128465;")
+						"HXDelete" (printf "/api/accounts/%d/platforms/amazon/shops/mocks/%s/listings/%s" $acctID $shopID $listing.ListingID)
+						"_" "on click event.preventDefault() then event.stopPropagation()"
+					}}
 				</li>
 			{{- end }}
 			</ul>