From ef5c807c27f82cfb0c0b8254608650eb089dcf06 Mon Sep 17 00:00:00 2001
From: Scott Idem <stidem@gmail.com>
Date: Wed, 8 Apr 2026 13:29:11 -0400
Subject: [PATCH] chore(badges): tidy badge template form grouping and advanced
 cfg_json

---
 .../ae_comp__badge_template_form.svelte       | 157 ++++++++++--------
 1 file changed, 85 insertions(+), 72 deletions(-)

diff --git a/src/routes/events/[event_id]/(badges)/templates/ae_comp__badge_template_form.svelte b/src/routes/events/[event_id]/(badges)/templates/ae_comp__badge_template_form.svelte
index 82ab6873..404ae276 100644
--- a/src/routes/events/[event_id]/(badges)/templates/ae_comp__badge_template_form.svelte
+++ b/src/routes/events/[event_id]/(badges)/templates/ae_comp__badge_template_form.svelte
@@ -252,82 +252,95 @@ function handle_cancel() {
 <form onsubmit={prevent_default(handle_submit)} class="space-y-4 p-4">
     <h3 class="h3">{template_id ? 'Edit' : 'Create New'} Badge Template</h3>
 
-    <label class="label">
-        <span>Template Name</span>
-        <input type="text" bind:value={name} class="input" required />
-    </label>
+    <section class="space-y-3">
+        <h4 class="font-semibold">General</h4>
+        <label class="label">
+            <span>Template Name</span>
+            <input type="text" bind:value={name} class="input" required />
+        </label>
+        <label class="label">
+            <span>Background Image Path (URL) — full-badge background, replaces header</span>
+            <input type="text" bind:value={background_image_path} class="input" />
+        </label>
+        {#if background_image_path}
+            <p class="text-xs text-amber-600 dark:text-amber-400">
+                ⚠ When a background image is set, the header path and logo/text header are hidden on the badge front — the background image covers the full badge.
+            </p>
+        {/if}
+    </section>
 
-    <label class="label">
-        <span>Background Image Path (URL) — full-badge background, replaces header</span>
-        <input type="text" bind:value={background_image_path} class="input" />
-    </label>
-    {#if background_image_path}
-        <p class="text-xs text-amber-600 dark:text-amber-400">
-            ⚠ When a background image is set, the header path and logo/text header are hidden on the badge front — the background image covers the full badge.
-        </p>
-    {/if}
+    <section class="space-y-3">
+        <h4 class="font-semibold">Header & Branding</h4>
+        <label class="label">
+            <span>Header Path (URL) — top banner image (used when no background image)</span>
+            <input type="text" bind:value={header_path} class="input" />
+        </label>
+        <label class="label">
+            <span>Logo Path (URL, if no Header Path)</span>
+            <input type="text" bind:value={logo_path} class="input" />
+        </label>
+        <label class="label">
+            <span>Header Row 1 Text (HTML allowed)</span>
+            <textarea bind:value={header_row_1} class="textarea" rows="2"
+            ></textarea>
+        </label>
+        <label class="label">
+            <span>Header Row 2 Text (HTML allowed)</span>
+            <textarea bind:value={header_row_2} class="textarea" rows="2"
+            ></textarea>
+        </label>
+        <label class="label">
+            <span>Secondary Header Path (URL, back of badge)</span>
+            <input type="text" bind:value={secondary_header_path} class="input" />
+        </label>
+    </section>
 
-    <label class="label">
-        <span>Header Path (URL) — top banner image (used when no background image)</span>
-        <input type="text" bind:value={header_path} class="input" />
-    </label>
-    <label class="label">
-        <span>Logo Path (URL, if no Header Path)</span>
-        <input type="text" bind:value={logo_path} class="input" />
-    </label>
-    <label class="label">
-        <span>Header Row 1 Text (HTML allowed)</span>
-        <textarea bind:value={header_row_1} class="textarea" rows="2"
-        ></textarea>
-    </label>
-    <label class="label">
-        <span>Header Row 2 Text (HTML allowed)</span>
-        <textarea bind:value={header_row_2} class="textarea" rows="2"
-        ></textarea>
-    </label>
-    <label class="label">
-        <span>Secondary Header Path (URL, back of badge)</span>
-        <input type="text" bind:value={secondary_header_path} class="input" />
-    </label>
+    <section class="space-y-3">
+        <h4 class="font-semibold">Footer</h4>
+        <label class="label">
+            <span>Footer Text (HTML allowed)</span>
+            <textarea bind:value={footer_text} class="textarea" rows="2"></textarea>
+        </label>
+    </section>
 
-    <label class="label">
-        <span>Footer Text (HTML allowed)</span>
-        <textarea bind:value={footer_text} class="textarea" rows="2"></textarea>
-    </label>
+    <section class="space-y-3">
+        <h4 class="font-semibold">QR & Wireless</h4>
+        <label class="label flex items-center gap-2">
+            <input type="checkbox" bind:checked={show_qr_front} class="checkbox" />
+            <span>Show QR Code on Front</span>
+        </label>
+        <label class="label flex items-center gap-2">
+            <input type="checkbox" bind:checked={show_qr_back} class="checkbox" />
+            <span>Show QR Code on Back</span>
+        </label>
+        <label class="label">
+            <span>Wireless SSID</span>
+            <input type="text" bind:value={wireless_ssid} class="input" />
+        </label>
+        <label class="label">
+            <span>Wireless Password</span>
+            <input type="text" bind:value={wireless_password} class="input" />
+        </label>
+    </section>
 
-    <label class="label flex items-center gap-2">
-        <input type="checkbox" bind:checked={show_qr_front} class="checkbox" />
-        <span>Show QR Code on Front</span>
-    </label>
-    <label class="label flex items-center gap-2">
-        <input type="checkbox" bind:checked={show_qr_back} class="checkbox" />
-        <span>Show QR Code on Back</span>
-    </label>
-
-    <label class="label">
-        <span>Wireless SSID</span>
-        <input type="text" bind:value={wireless_ssid} class="input" />
-    </label>
-    <label class="label">
-        <span>Wireless Password</span>
-        <input type="text" bind:value={wireless_password} class="input" />
-    </label>
-
-    <label class="label">
-        <span>Ticket 1 Text (HTML allowed)</span>
-        <textarea bind:value={ticket_1_text} class="textarea" rows="2"
-        ></textarea>
-    </label>
-    <label class="label">
-        <span>Ticket 2 Text (HTML allowed)</span>
-        <textarea bind:value={ticket_2_text} class="textarea" rows="2"
-        ></textarea>
-    </label>
-    <label class="label">
-        <span>Ticket 3 Text (HTML allowed)</span>
-        <textarea bind:value={ticket_3_text} class="textarea" rows="2"
-        ></textarea>
-    </label>
+    <section class="space-y-3">
+        <h4 class="font-semibold">Tickets</h4>
+        <label class="label">
+            <span>Ticket 1 Text (HTML allowed)</span>
+            <textarea bind:value={ticket_1_text} class="textarea" rows="2"
+            ></textarea>
+        </label>
+        <label class="label">
+            <span>Ticket 2 Text (HTML allowed)</span>
+            <textarea bind:value={ticket_2_text} class="textarea" rows="2"
+            ></textarea>
+        </label>
+        <label class="label">
+            <span>Ticket 3 Text (HTML allowed)</span>
+            <textarea bind:value={ticket_3_text} class="textarea" rows="2"
+            ></textarea>
+        </label>
+    </section>
 
     <section class="border-t pt-3">
         <button type="button" class="text-sm text-surface-500" onclick={() => (advanced_open = !advanced_open)}>