feat: Realistic Variable Simulations in Preview! 🎨

## ✅ 5. Simulate List & Button Variables

**Problem:** Variables showed as raw text like {order_items_list}
**Solution:** Added realistic HTML simulations for better preview

**order_items_list:**
- Styled list with product cards
- Product name, quantity, attributes
- Individual prices
- Clean, mobile-friendly design

**order_items_table:**
- Professional table layout
- Headers: Product, Qty, Price
- Product details with variants
- Proper alignment and spacing

**Example Preview:**
```html
Premium T-Shirt × 2
Size: L, Color: Blue
$49.98

Classic Jeans × 1
Size: 32, Color: Dark Blue
$79.99
```

**Better UX:**
- Users see realistic email preview
- Can judge layout and design
- No guessing what variables will look like
- Professional presentation

**File:**
- `routes/Settings/Notifications/EditTemplate.tsx`

Ready for final improvement (6)!

admin-spa/src/routes/Settings/Notifications/EditTemplate.tsx

@@ -187,23 +187,70 @@ export default function EditTemplate() {
     
     // Replace dynamic variables with sample data (not just highlighting)
     const sampleData: { [key: string]: string } = {
-      customer_name: 'John Doe',
-      customer_email: 'john@example.com',
-      customer_phone: '+1 234 567 8900',
-      order_number: '12345',
+      order_number: '#12345',
       order_total: '$99.99',
       order_status: 'Processing',
       order_date: new Date().toLocaleDateString(),
-      order_url: '#preview-order-details',
-      order_items: '<p>• Product 1 x 2<br>• Product 2 x 1</p>',
+      order_url: '#',
+      order_items_list: `<ul style="list-style: none; padding: 0; margin: 16px 0;">
+        <li style="padding: 12px; background: #f9f9f9; border-radius: 6px; margin-bottom: 8px;">
+          <strong>Premium T-Shirt</strong> × 2<br>
+          <span style="color: #666;">Size: L, Color: Blue</span><br>
+          <span style="font-weight: 600;">$49.98</span>
+        </li>
+        <li style="padding: 12px; background: #f9f9f9; border-radius: 6px; margin-bottom: 8px;">
+          <strong>Classic Jeans</strong> × 1<br>
+          <span style="color: #666;">Size: 32, Color: Dark Blue</span><br>
+          <span style="font-weight: 600;">$79.99</span>
+        </li>
+      </ul>`,
+      order_items_table: `<table style="width: 100%; border-collapse: collapse; margin: 16px 0;">
+        <thead>
+          <tr style="background: #f5f5f5;">
+            <th style="padding: 12px; text-align: left; border-bottom: 2px solid #ddd;">Product</th>
+            <th style="padding: 12px; text-align: center; border-bottom: 2px solid #ddd;">Qty</th>
+            <th style="padding: 12px; text-align: right; border-bottom: 2px solid #ddd;">Price</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td style="padding: 12px; border-bottom: 1px solid #eee;">
+              <strong>Premium T-Shirt</strong><br>
+              <span style="color: #666; font-size: 13px;">Size: L, Color: Blue</span>
+            </td>
+            <td style="padding: 12px; text-align: center; border-bottom: 1px solid #eee;">2</td>
+            <td style="padding: 12px; text-align: right; border-bottom: 1px solid #eee;">$49.98</td>
+          </tr>
+          <tr>
+            <td style="padding: 12px; border-bottom: 1px solid #eee;">
+              <strong>Classic Jeans</strong><br>
+              <span style="color: #666; font-size: 13px;">Size: 32, Color: Dark Blue</span>
+            </td>
+            <td style="padding: 12px; text-align: center; border-bottom: 1px solid #eee;">1</td>
+            <td style="padding: 12px; text-align: right; border-bottom: 1px solid #eee;">$79.99</td>
+          </tr>
+        </tbody>
+      </table>`,
+      customer_name: 'John Doe',
+      customer_email: 'john@example.com',
+      customer_phone: '+1 234 567 8900',
       payment_method: 'Credit Card',
+      payment_url: '#',
+      shipping_method: 'Standard Shipping',
       tracking_number: 'TRACK123456',
-      product_name: 'Sample Product',
-      product_sku: 'SKU-001',
-      stock_quantity: '5',
-      product_url: '#preview-product',
+      refund_amount: '$50.00',
+      billing_address: '123 Main St, City, State 12345',
+      shipping_address: '123 Main St, City, State 12345',
+      store_name: 'My WordPress Store',
+      store_url: '#',
+      store_email: 'store@example.com',
     };
     
+    Object.keys(sampleData).forEach((key) => {
+      const regex = new RegExp(`\\{${key}\\}`, 'g');
+      previewBody = previewBody.replace(regex, sampleData[key]);
+    });
+
     // Highlight variables that don't have sample data
     Object.keys(variables).forEach(key => {
       if (!storeVariables[key] && !sampleData[key]) {
@@ -212,11 +259,6 @@ export default function EditTemplate() {
       }
     });
     
-    // Replace with sample data
-    Object.entries(sampleData).forEach(([key, value]) => {
-      previewBody = previewBody.replace(new RegExp(`\\{${key}\\}`, 'g'), value);
-    });
-    
     // Parse [card] tags
     previewBody = parseCardsForPreview(previewBody);