From ce3ab8bcbce7315748d7c9713edcadcbad8f709a Mon Sep 17 00:00:00 2001
From: John O'Keefe <jrokeefe@protonmail.com>
Date: Mon, 8 Jun 2026 21:19:06 -0400
Subject: [PATCH] Fix invalid templ conditional syntax in metadata editor modal

The Manga Type and Reading Direction select options used invalid inline
if syntax: 'if cond { selected }' which is not valid templ. Replaced
with the correct templ attribute syntax: selected={ boolExpression }
which properly renders the selected attribute when true and omits it
when false.

Also add for/id attributes to link labels to their select elements
for accessibility (manga_type and reading_direction).

Affected lines: book_detail_modals.templ:478-496
---
 templates/book_detail_modals.templ | 24 ++++++++++++------------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/templates/book_detail_modals.templ b/templates/book_detail_modals.templ
index 3584ed1..8fd49ee 100644
--- a/templates/book_detail_modals.templ
+++ b/templates/book_detail_modals.templ
@@ -475,25 +475,25 @@ templ MetadataEditorModal(book handlers.MediaDetail) {
 						</button>
 						<div x-show="openSections.comic" x-transition class="p-4 space-y-3" style="background-color: var(--bg-primary);">
 							<div>
-								<label class="block text-sm font-medium mb-1" style="color: var(--text-secondary);">Manga Type</label>
-								<select name="manga_type"
+								<label for="manga_type" class="block text-sm font-medium mb-1" style="color: var(--text-secondary);">Manga Type</label>
+								<select id="manga_type" name="manga_type"
 									class="w-full px-3 py-2 rounded-lg border text-sm"
 									style="background-color: var(--bg-secondary); border-color: var(--border); color: var(--text-primary);">
-									<option value="unknown" if textToString(book.MangaType) == "unknown" { selected } >Unknown</option>
-									<option value="no" if textToString(book.MangaType) == "no" { selected }>No</option>
-									<option value="yes" if textToString(book.MangaType) == "yes" { selected }>Yes</option>
-									<option value="yes_and_right_to_left" if textToString(book.MangaType) == "yes_and_right_to_left" { selected }>Yes (Right to Left)</option>
+									<option value="unknown" selected={ textToString(book.MangaType) == "unknown" }>Unknown</option>
+									<option value="no" selected={ textToString(book.MangaType) == "no" }>No</option>
+									<option value="yes" selected={ textToString(book.MangaType) == "yes" }>Yes</option>
+									<option value="yes_and_right_to_left" selected={ textToString(book.MangaType) == "yes_and_right_to_left" }>Yes (Right to Left)</option>
 								</select>
 							</div>
 							<div>
-								<label class="block text-sm font-medium mb-1" style="color: var(--text-secondary);">Reading Direction</label>
-								<select name="reading_direction"
+								<label for="reading_direction" class="block text-sm font-medium mb-1" style="color: var(--text-secondary);">Reading Direction</label>
+								<select id="reading_direction" name="reading_direction"
 									class="w-full px-3 py-2 rounded-lg border text-sm"
 									style="background-color: var(--bg-secondary); border-color: var(--border); color: var(--text-primary);">
-									<option value="auto" if textToString(book.ReadingDirection) == "auto" { selected }>Auto</option>
-									<option value="ltr" if textToString(book.ReadingDirection) == "ltr" { selected }>Left to Right</option>
-									<option value="rtl" if textToString(book.ReadingDirection) == "rtl" { selected }>Right to Left</option>
-									<option value="vertical" if textToString(book.ReadingDirection) == "vertical" { selected }>Vertical</option>
+									<option value="auto" selected={ textToString(book.ReadingDirection) == "auto" }>Auto</option>
+									<option value="ltr" selected={ textToString(book.ReadingDirection) == "ltr" }>Left to Right</option>
+									<option value="rtl" selected={ textToString(book.ReadingDirection) == "rtl" }>Right to Left</option>
+									<option value="vertical" selected={ textToString(book.ReadingDirection) == "vertical" }>Vertical</option>
 								</select>
 							</div>
 							<div>