Adds interactive variable highlighting in preview

Enhances message and email previews by adding hover-based variable highlighting

Implements interactive feature that:
- Adds data attributes to preview elements
- Creates hover effects for variables
- Provides visual feedback when selecting message variables

wwwroot/poc-indstillinger.html

@@ -953,9 +953,14 @@
     }
 
     swp-variable-tag:hover {
-      background: color-mix(in srgb, var(--color-teal) 10%, transparent);
       border-color: var(--color-teal);
       color: var(--color-teal);
+      cursor: pointer;
+    }
+
+    swp-message-preview .highlight.active {
+      background: color-mix(in srgb, var(--color-teal) 35%, transparent);
+      box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-teal) 20%, transparent);
     }
 
     swp-variable-tag i {
@@ -975,11 +980,9 @@
     }
 
     swp-message-preview .highlight {
-      background: color-mix(in srgb, var(--color-teal) 20%, transparent);
       padding: 1px 4px;
       border-radius: 3px;
-      color: var(--color-teal);
+      transition: all 150ms ease;
-      font-weight: 500;
     }
 
     swp-preview-meta {
@@ -1239,11 +1242,16 @@
       color: var(--color-text-secondary);
     }
 
-    /* Highlight in email preview - subtle background only */
+    /* Highlight in email preview - only on hover */
     swp-email-preview .editable {
-      background: rgba(0, 137, 123, 0.12);
       padding: 1px 3px;
       border-radius: 2px;
+      transition: all 150ms ease;
+    }
+
+    swp-email-preview .editable.active {
+      background: rgba(0, 137, 123, 0.35);
+      box-shadow: 0 0 0 2px rgba(0, 137, 123, 0.2);
     }
   </style>
 </head>
@@ -1972,13 +1980,13 @@ Vil du ændre din tid? {booking_link}</swp-message-editor>
       <swp-message-section>
         <swp-message-section-title>Forhåndsvisning</swp-message-section-title>
         <swp-message-preview id="messagePreview">
-          Hej <span class="highlight">Anna Jensen</span>!<br><br>
+          Hej <span class="highlight" data-var="{kunde_navn}">Anna Jensen</span>!<br><br>
           Din tid er bekræftet:<br>
-          <span class="highlight">Dameklip + Føn</span><br>
+          <span class="highlight" data-var="{behandling}">Dameklip + Føn</span><br>
-          <span class="highlight">Torsdag d. 2. januar</span> kl. <span class="highlight">14:30</span><br><br>
+          <span class="highlight" data-var="{dato}">Torsdag d. 2. januar</span> kl. <span class="highlight" data-var="{tid}">14:30</span><br><br>
-          Hos <span class="highlight">Maria</span><br>
+          Hos <span class="highlight" data-var="{medarbejder}">Maria</span><br>
-          <span class="highlight">Salon Beauty</span>, <span class="highlight">Hovedgaden 123</span><br><br>
+          <span class="highlight" data-var="{firma_navn}">Salon Beauty</span>, <span class="highlight" data-var="{firma_adresse}">Hovedgaden 123</span><br><br>
-          Vil du ændre din tid? <span class="highlight">book.plantempus.dk/x7k2</span>
+          Vil du ændre din tid? <span class="highlight" data-var="{booking_link}">book.plantempus.dk/x7k2</span>
         </swp-message-preview>
         <swp-preview-meta>
           <span><i class="ph ph-chat-text"></i> 312 tegn</span>
@@ -2072,26 +2080,26 @@ Vil du ændre din tid? {booking_link}</swp-message-editor>
             </swp-email-header>
 
             <swp-email-body>
-              <swp-email-greeting id="emailPreviewGreeting">Hej <span class="editable">Anna</span>,</swp-email-greeting>
+              <swp-email-greeting id="emailPreviewGreeting">Hej <span class="editable" data-var="{kunde_navn}">Anna</span>,</swp-email-greeting>
 
               <swp-email-text id="emailPreviewBody">Vi glæder os til at se dig! Her er detaljerne for din aftale.</swp-email-text>
 
               <swp-email-appointment-card>
                 <swp-email-appointment-row>
                   <i class="ph ph-scissors"></i>
-                  <span><strong class="editable">Dameklip + Føn</strong></span>
+                  <span><strong class="editable" data-var="{behandling}">Dameklip + Føn</strong></span>
                 </swp-email-appointment-row>
                 <swp-email-appointment-row>
                   <i class="ph ph-calendar"></i>
-                  <span><span class="editable">Torsdag d. 2. januar 2025</span></span>
+                  <span><span class="editable" data-var="{dato}">Torsdag d. 2. januar 2025</span></span>
                 </swp-email-appointment-row>
                 <swp-email-appointment-row>
                   <i class="ph ph-clock"></i>
-                  <span>Kl. <span class="editable">14:30</span> – <span class="editable">15:15</span></span>
+                  <span>Kl. <span class="editable" data-var="{tid}">14:30</span> – <span class="editable" data-var="{tid}">15:15</span></span>
                 </swp-email-appointment-row>
                 <swp-email-appointment-row>
                   <i class="ph ph-user-circle"></i>
-                  <span>Hos <strong class="editable">Maria</strong></span>
+                  <span>Hos <strong class="editable" data-var="{medarbejder}">Maria</strong></span>
                 </swp-email-appointment-row>
                 <swp-email-appointment-row>
                   <i class="ph ph-map-pin"></i>
@@ -2302,6 +2310,42 @@ Vil du ændre din tid? {booking_link}</swp-message-editor>
         }
         editor.textContent += varText;
       });
+
+      // Highlight preview on hover
+      tag.addEventListener('mouseenter', () => {
+        const varName = tag.dataset.var;
+        const preview = document.getElementById('messagePreview');
+        preview.querySelectorAll(`.highlight[data-var="${varName}"]`).forEach(span => {
+          span.classList.add('active');
+        });
+      });
+
+      tag.addEventListener('mouseleave', () => {
+        const preview = document.getElementById('messagePreview');
+        preview.querySelectorAll('.highlight.active').forEach(span => {
+          span.classList.remove('active');
+        });
+      });
+    });
+
+    // ==========================================
+    // HIGHLIGHT EMAIL PREVIEW ON HOVER
+    // ==========================================
+    document.querySelectorAll('#emailDrawer swp-variable-tag').forEach(tag => {
+      tag.addEventListener('mouseenter', () => {
+        const varName = tag.dataset.var;
+        const preview = document.querySelector('swp-email-preview');
+        preview.querySelectorAll(`.editable[data-var="${varName}"]`).forEach(span => {
+          span.classList.add('active');
+        });
+      });
+
+      tag.addEventListener('mouseleave', () => {
+        const preview = document.querySelector('swp-email-preview');
+        preview.querySelectorAll('.editable.active').forEach(span => {
+          span.classList.remove('active');
+        });
+      });
     });
 
     // ==========================================