Clientside delete thread button

web/views/board.templ

@@ -69,7 +69,8 @@ templ ThreadsCatalog(previews []CatalogThreadPreview, catalogContext CatalogCont
 		for _, preview := range previews {
 			{{ replyCount := strconv.FormatInt(int64(preview.ReplyCount), 10) }}
 			{{ ipCount := strconv.FormatInt(int64(preview.IpCount), 10) }}
-			<div class="catalog-preview">
+			{{ elThreadId := fmt.Sprintf("thread-%d", preview.ThreadId) }}
+			<div id={ elThreadId } class="catalog-preview">
 				<a href={ templ.URL(preview.ThreadURL) }>
 					<img
 						loading="lazy"
@@ -78,20 +79,42 @@ templ ThreadsCatalog(previews []CatalogThreadPreview, catalogContext CatalogCont
 				preview.ThumbPath) }
 					/>
 				</a>
-				<strong class="catalog-preview-counts">R: { replyCount } / I: { ipCount }</strong>
+				<strong class="catalog-preview-counts">
+					R: { replyCount } / I: { ipCount }
+					if catalogContext.IsAdmin {
+						<span
+							id={ fmt.Sprintf("%s-admintoggle", elThreadId) }
+							class="link-button"
+							style="font-size:10px;margin-left:5px;"
+							_={ fmt.Sprintf(`on click call #%s-dialog.showModal()`, elThreadId) }
+						>
+							M
+						</span>
+					}
+				</strong>
 				<h1>
 					<a href={ templ.URL(preview.ThreadURL) } class="catalog-preview-link">{ preview.Subject }</a>
 				</h1>
 				<p>
 					@templ.Raw(util.EnrichPost(preview.Body))
 				</p>
-				if catalogContext.IsAdmin {
+				<dialog
+					id={ elThreadId + "-dialog" }
+					class="admin-dialog"
+				>
+					<h1>{ elThreadId }</h1>
 					<button
+						class="link-button"
 						hx-delete={ fmt.Sprintf("/admin/%s/threads/%d", catalogContext.BoardSlug, preview.ThreadId) }
 						hx-swap="none"
 						_="on htmx:afterRequest trigger refreshPosts on body"
-					>X</button>
-				}
+						hx-confirm="Are you sure you wish to delete this thread?"
+					>Delete</button>
+					<button
+						class="admin-dialog-close-btn link-button"
+						_={ fmt.Sprintf("on click call #%s-dialog.close()", elThreadId) }
+					>Close</button>
+				</dialog>
 			</div>
 		}
 	</div>