From c2dfefcc1e8a369d1557e2cfe52c5daa3df7156e Mon Sep 17 00:00:00 2001
From: Deeman <hendriknote@gmail.com>
Date: Sat, 28 Feb 2026 21:37:35 +0100
Subject: [PATCH] fix(affiliate): fire preview on page load so edit form shows
 card immediately

hx-trigger="load, input from:..." fires the preview POST as soon as the page
opens, so editing an existing product shows its card without needing to
touch any field first.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../padelnomics/admin/templates/admin/affiliate_form.html | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/web/src/padelnomics/admin/templates/admin/affiliate_form.html b/web/src/padelnomics/admin/templates/admin/affiliate_form.html
index b17c7d3..97b958a 100644
--- a/web/src/padelnomics/admin/templates/admin/affiliate_form.html
+++ b/web/src/padelnomics/admin/templates/admin/affiliate_form.html
@@ -39,10 +39,10 @@ document.addEventListener('DOMContentLoaded', function() {
   <div style="display:grid;grid-template-columns:1fr 380px;gap:2rem;align-items:start" class="affiliate-form-grid">
 
     {# ── Left: form ── #}
-    {# Invisible trigger: fires preview on any input change, includes the whole form #}
+    {# Invisible trigger: fires preview on page load + any input change #}
     <div hx-post="{{ url_for('admin.affiliate_preview') }}"
          hx-target="#product-preview"
-         hx-trigger="input from:#affiliate-form delay:600ms"
+         hx-trigger="load, input from:#affiliate-form delay:600ms"
          hx-include="#affiliate-form"
          hx-push-url="false">
     </div>
@@ -204,9 +204,7 @@ document.addEventListener('DOMContentLoaded', function() {
     <div style="position:sticky;top:1.5rem;">
       <div class="text-xs font-semibold text-slate mb-2" style="text-transform:uppercase;letter-spacing:.06em;">Preview</div>
       <div id="product-preview" style="border:1px solid #E2E8F0;border-radius:12px;padding:1rem;background:#F8FAFC;min-height:180px;">
-        <p class="text-slate text-sm" style="text-align:center;margin-top:2rem;">
-          Fill in the form to see a live preview.
-        </p>
+        <p style="color:#94A3B8;font-size:.875rem;text-align:center;margin-top:2rem;">Loading preview…</p>
       </div>
     </div>