From 0d42a35cb87e477a9f46a79a5447ffeb68bef185 Mon Sep 17 00:00:00 2001
From: cclohmar <claus.lohmar@lohmar.co.uk>
Date: Wed, 3 Jun 2026 08:09:31 +0000
Subject: [PATCH] refactor: remove duplicate edit from event page, add delete
 to edit form

- Event page now shows read-only metadata only (no edit/delete buttons)
- Edit works from dashboard (Edit button on event cards)
- Delete added to the edit form as a button alongside Save/Cancel
- htmx.trigger #delete div in the edit form fragment
---
 internal/handlers/events.go   | 11 +++++--
 templates/event_expenses.html | 58 ++++-------------------------------
 2 files changed, 14 insertions(+), 55 deletions(-)

diff --git a/internal/handlers/events.go b/internal/handlers/events.go
index 47d4c55..13f23a6 100644
--- a/internal/handlers/events.go
+++ b/internal/handlers/events.go
@@ -316,10 +316,15 @@ func (h *EventHandler) EditEvent(w http.ResponseWriter, r *http.Request) {
 			</div>
 		</div>
 		<button type="submit" class="btn btn-primary btn-block">Save Changes</button>
-		<button type="button" class="btn btn-secondary btn-block" style="margin-top: 0.5rem;"
-				onclick="document.getElementById('create-event-form').innerHTML='';document.getElementById('create-event-form').classList.add('hidden')">Cancel</button>
+		<div style="display:flex; gap:0.5rem; margin-top:0.5rem;">
+			<button type="button" class="btn btn-secondary" style="flex:1; text-align:center;"
+					onclick="document.getElementById('create-event-form').innerHTML='';document.getElementById('create-event-form').classList.add('hidden')">Cancel</button>
+			<button type="button" class="btn btn-secondary" style="flex:1; text-align:center; color:#fca5a5; border-color:#7f1d1d;"
+					onclick="if(confirm('Delete this event and all its receipts?')){htmx.trigger('#delete-event-%s','click')}">Delete</button>
+			<div hx-delete="/events/%s" hx-target="body" hx-push-url="true" id="delete-event-%s" style="display:none"></div>
+		</div>
 	</form>
-</div>`, event.ID, template.HTMLEscapeString(event.Name), template.HTMLEscapeString(event.BaseCurrency), template.HTMLEscapeString(rcptCur), sampleClm)
+</div>`, event.ID, template.HTMLEscapeString(event.Name), template.HTMLEscapeString(event.BaseCurrency), template.HTMLEscapeString(rcptCur), sampleClm, event.ID, event.ID, event.ID)
 }
 
 // ---------------------------------------------------------------------------
diff --git a/templates/event_expenses.html b/templates/event_expenses.html
index 7952a9a..2b9f36f 100644
--- a/templates/event_expenses.html
+++ b/templates/event_expenses.html
@@ -20,62 +20,16 @@
         </header>
 
         <main class="main-content">
-            <!-- Event Metadata -->
+            <!-- Event Metadata (read-only — edit via dashboard) -->
             <div style="background: var(--color-card); border: 1px solid var(--color-border); border-radius: 0.5rem; padding: 1rem; margin-bottom: 1rem;">
-                <div style="display: flex; justify-content: space-between; align-items: flex-start;">
-                    <div style="font-size: 0.75rem; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.5rem;">Event Details</div>
-                    <div style="display: flex; gap: 0.5rem;">
-                        <button id="edit-toggle-btn" class="btn btn-secondary btn-sm" onclick="toggleEdit()" style="font-size: 0.75rem;">🔒 Edit</button>
-                        <button class="btn btn-secondary btn-sm" style="font-size: 0.75rem; color: #fca5a5; border-color: #7f1d1d;"
-                                onclick="if(confirm('Delete this event and all its receipts?')){htmx.trigger('#delete-event','click')}">🗑️</button>
-                        <div hx-delete="/events/{{.Event.ID}}" hx-target="body" hx-push-url="true" id="delete-event" style="display:none"></div>
-                    </div>
+                <div style="font-size: 0.75rem; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.5rem;">Event Details</div>
+                <div class="form-row" style="margin:0;">
+                    <div style="flex:2; font-size:0.9rem; color:var(--color-text);">{{.Event.Name}}</div>
+                    <div style="flex:1; font-size:0.9rem; color:var(--color-text);">{{.Event.BaseCurrency}}</div>
+                    <div style="flex:1; font-size:0.9rem; color:var(--color-text-muted);">{{printf "%.6f" .Event.ExchangeRate}}</div>
                 </div>
-                <form id="event-meta-form" hx-put="/events/{{.Event.ID}}" hx-target="body" hx-push-url="true">
-                    <div class="form-row">
-                        <div class="form-group" style="flex:2">
-                            <label class="form-label">Event</label>
-                            <input type="text" name="name" value="{{.Event.Name}}" readonly
-                                   style="width:100%; padding:0.5rem; font-size:0.9rem; background:transparent; border:1px solid transparent; border-radius:0.375rem; color:var(--color-text);">
-                        </div>
-                        <div class="form-group" style="flex:1">
-                            <label class="form-label">Claim Currency</label>
-                            <input type="text" name="base_currency" value="{{.Event.BaseCurrency}}" readonly maxlength="3"
-                                   style="width:100%; padding:0.5rem; font-size:0.9rem; background:transparent; border:1px solid transparent; border-radius:0.375rem; color:var(--color-text); text-transform:uppercase;">
-                        </div>
-                        <div class="form-group" style="flex:1">
-                            <label class="form-label">Rate</label>
-                            <input type="text" name="exchange_rate" value="{{printf "%.6f" .Event.ExchangeRate}}" readonly
-                                   style="width:100%; padding:0.5rem; font-size:0.9rem; background:transparent; border:1px solid transparent; border-radius:0.375rem; color:var(--color-text-muted);">
-                        </div>
-                    </div>
-                </form>
             </div>
 
-            <script>
-            function toggleEdit() {
-                var inputs = document.querySelectorAll('#event-meta-form input');
-                var btn = document.getElementById('edit-toggle-btn');
-                var isEditing = btn.textContent.includes('Unlock');
-                inputs.forEach(function(inp) {
-                    inp.readOnly = isEditing;
-                    if (isEditing) {
-                        inp.style.background = 'transparent';
-                        inp.style.borderColor = 'transparent';
-                        inp.style.color = 'var(--color-text)';
-                    } else {
-                        inp.style.background = 'var(--color-card)';
-                        inp.style.borderColor = 'var(--color-border)';
-                        inp.style.color = 'var(--color-text)';
-                    }
-                });
-                btn.textContent = isEditing ? '🔒 Edit' : '🔓 Save';
-                if (!isEditing) {
-                    htmx.trigger('#event-meta-form', 'submit');
-                }
-            }
-            </script>
-
             <!-- Receipt List -->
             <div id="expense-list">
                 <h3 style="margin-bottom: 1rem; font-size: 1rem; font-weight: 600;">