Refactors customer detail and list page components

Enhances UI/UX with more dynamic toggle sliders
Improves tag management and interaction
Updates marketing consent toggles with new design

Adds more interactive customer information display

wwwroot/poc-customer-list.html

@@ -603,6 +603,11 @@
       text-decoration: underline;
     }
 
+    swp-customer-header-contact swp-customer-tags {
+      margin-top: 4px;
+      justify-content: flex-end;
+    }
+
     /* Fact Boxes */
     swp-fact-boxes {
       display: grid;
@@ -721,35 +726,53 @@
       color: var(--color-text);
     }
 
-    swp-toggle {
+    swp-toggle-slider {
-      width: 44px;
+      display: flex;
-      height: 24px;
-      background: var(--color-border);
-      border-radius: 12px;
       position: relative;
-      cursor: pointer;
+      background: var(--color-background);
-      transition: background 200ms ease;
+      border-radius: 6px;
+      padding: 3px;
+      gap: 0;
     }
 
-    swp-toggle::after {
+    swp-toggle-slider::before {
       content: '';
       position: absolute;
-      top: 2px;
+      top: 3px;
-      left: 2px;
+      left: 3px;
-      width: 20px;
+      width: calc(50% - 3px);
-      height: 20px;
+      height: calc(100% - 6px);
-      background: white;
+      background: color-mix(in srgb, var(--color-green) 18%, white);
-      border-radius: 50%;
+      border-radius: 4px;
-      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+      transition: transform 200ms ease, background 200ms ease;
-      transition: transform 200ms ease;
+      z-index: 0;
     }
 
-    swp-toggle.active {
+    swp-toggle-slider[data-value="no"]::before {
-      background: var(--color-teal);
+      transform: translateX(100%);
+      background: color-mix(in srgb, var(--color-red) 18%, white);
     }
 
-    swp-toggle.active::after {
+    swp-toggle-option {
-      transform: translateX(20px);
+      position: relative;
+      z-index: 1;
+      padding: 5px 16px;
+      font-size: 12px;
+      font-weight: 500;
+      color: var(--color-text-secondary);
+      cursor: pointer;
+      transition: color 200ms ease;
+      user-select: none;
+    }
+
+    swp-toggle-slider[data-value="yes"] swp-toggle-option:first-child {
+      color: var(--color-green);
+      font-weight: 600;
+    }
+
+    swp-toggle-slider[data-value="no"] swp-toggle-option:last-child {
+      color: var(--color-red);
+      font-weight: 600;
     }
 
     /* Profile Boxes */
@@ -1154,6 +1177,7 @@
             <swp-customer-header-contact>
               <a href="tel:+4523456789" id="cardPhoneLink">+45 23 45 67 89</a>
               <a href="mailto:sofie@email.dk" id="cardEmailLink">sofie@email.dk</a>
+              <swp-customer-tags id="cardTags"></swp-customer-tags>
             </swp-customer-header-contact>
           </swp-customer-header-top>
         </swp-customer-header-info>
@@ -1207,11 +1231,17 @@
         <swp-marketing-section>
           <swp-toggle-row>
             <swp-toggle-label>Email marketing</swp-toggle-label>
-            <swp-toggle id="toggleEmail" class="active" onclick="this.classList.toggle('active')"></swp-toggle>
+            <swp-toggle-slider id="toggleEmail" data-value="yes">
+              <swp-toggle-option>Ja</swp-toggle-option>
+              <swp-toggle-option>Nej</swp-toggle-option>
+            </swp-toggle-slider>
           </swp-toggle-row>
           <swp-toggle-row>
             <swp-toggle-label>SMS marketing</swp-toggle-label>
-            <swp-toggle id="toggleSms" onclick="this.classList.toggle('active')"></swp-toggle>
+            <swp-toggle-slider id="toggleSms" data-value="no">
+              <swp-toggle-option>Ja</swp-toggle-option>
+              <swp-toggle-option>Nej</swp-toggle-option>
+            </swp-toggle-slider>
           </swp-toggle-row>
         </swp-marketing-section>
       </div>
@@ -1482,6 +1512,19 @@
       document.getElementById('editPhone').value = phone;
       document.getElementById('editEmail').value = email;
 
+      // Update tags
+      const tags = row.dataset.tags || '';
+      const cardTags = document.getElementById('cardTags');
+      cardTags.innerHTML = '';
+      if (tags) {
+        tags.split(',').forEach(tag => {
+          const tagEl = document.createElement('swp-tag');
+          tagEl.className = tag.trim();
+          tagEl.textContent = tag.trim().charAt(0).toUpperCase() + tag.trim().slice(1);
+          cardTags.appendChild(tagEl);
+        });
+      }
+
       // Open panel
       cardOverlay.classList.add('open');
       customerCard.classList.add('open');
@@ -1508,6 +1551,18 @@
       if (e.key === 'Escape') closeCustomerCard();
     });
 
+    // ==========================================
+    // TOGGLE SLIDER (Ja/Nej)
+    // ==========================================
+    document.querySelectorAll('swp-toggle-slider').forEach(slider => {
+      const options = slider.querySelectorAll('swp-toggle-option');
+      options.forEach((option, index) => {
+        option.addEventListener('click', () => {
+          slider.dataset.value = index === 0 ? 'yes' : 'no';
+        });
+      });
+    });
+
     // Chart initialization
     let chartInitialized = false;
     function initCustomerChart() {