From 4306e591a6b41be2e4b7123ed55998de6c580bb3 Mon Sep 17 00:00:00 2001
From: Ubuntu <ubuntu@spurrinai-backend.blr.cloudtopiaa.com>
Date: Tue, 9 Sep 2025 21:54:57 +0530
Subject: [PATCH] V1.0.2-beta

---
 .../propertyTemplateSelector.html             |   30 +-
 .../propertyTemplateSelector.js               | 1607 ++++++++---------
 2 files changed, 795 insertions(+), 842 deletions(-)

diff --git a/force-app/main/default/lwc/propertyTemplateSelector/propertyTemplateSelector.html b/force-app/main/default/lwc/propertyTemplateSelector/propertyTemplateSelector.html
index b5595ec..2cf65f4 100644
--- a/force-app/main/default/lwc/propertyTemplateSelector/propertyTemplateSelector.html
+++ b/force-app/main/default/lwc/propertyTemplateSelector/propertyTemplateSelector.html
@@ -33,19 +33,19 @@
         <!-- Step Progress Stepper -->
         <div class="step-stepper-container">
             <div class="step-stepper">
-                <div class="step-item" data-step="1" onclick={goToStep}>
+                <div class="step-item" data-step="1" >
                     <div class="step-circle {step1NavClass}" style={step1NavStyle}>
                         <span class="step-number">1</span>
                     </div>
                 </div>
                 <div class="step-connector"></div>
-                <div class="step-item" data-step="2" onclick={goToStep}>
+                <div class="step-item" data-step="2" >
                     <div class="step-circle {step2NavClass}" style={step2NavStyle}>
                         <span class="step-number">2</span>
                     </div>
                 </div>
                 <div class="step-connector"></div>
-                <div class="step-item" data-step="3" onclick={goToStep}>
+                <div class="step-item" data-step="3" >
                     <div class="step-circle {step3NavClass}" style={step3NavStyle}>
                         <span class="step-number">3</span>
                     </div>
@@ -98,7 +98,7 @@
                                 <h1 class="property-name" style="color: white !important;">Modern Villa</h1>
                                 <p class="property-address" style="color: white !important;">123 Luxury Lane, Prestige City, PC 45678</p>
                                 <div class="hero-details">
-                                    <div class="price" style="color: white !important;">$2,500,000</div>
+                                    <div class="price" style="color: white !important;">AED 2,500,000</div>
                                     <div class="stats">
                                         <span class="stat-item" style="color: white !important;"><i class="fa-solid fa-bed"></i> 4 Beds</span>
                                         <span class="stat-item" style="color: white !important;"><i class="fa-solid fa-bath"></i> 3 Baths</span>
@@ -777,8 +777,7 @@
                 <!-- Image Review Section -->
                 <template if:true={selectedPropertyId}>
                     <div class="image-review-section">
-                        <h3>Property Image</h3>
-                        <p>Review and select images for your brochure</p>
+                        <h3>Property Images</h3>
 
                         <!-- Offering Type Display -->
                         <div class="offering-type-display">
@@ -795,6 +794,11 @@
                                     <img src={currentImage.url} alt={currentImage.title} class="property-image-step2" />
                                 </div>
                             </template>
+                            <template if:false={currentImage}>
+                                <div class="no-image-message">
+                                    <p>No images found</p>
+                                </div>
+                            </template>
                         </div>
 
                         <!-- Navigation Controls -->
@@ -1074,6 +1078,12 @@
                 <div class="editor-right">
                     <!-- Page Size and PDF Generation Header -->
                     <div class="template-header-area">
+                        <!-- New Back Button -->
+                        <div class="header-left-actions">
+                            <button class="btn btn-secondary" onclick={previousStep} title="Back">
+                                ← Back
+                            </button>
+                        </div>
                         <!-- Page Size Options -->
                         <div class="page-size-section">
                             <label class="page-size-label">Page Size:</label>
@@ -1108,7 +1118,7 @@
                     <!-- Viewport Toolbar - Removed for cleaner interface -->
 
                     <!-- PDF Viewport -->
-                    <div class={pdfViewportClass}>
+                    <div class={pdfViewportClass} style="display:flex; justify-content:center; align-items:flex-start;">
                         <div class="pdf-canvas" style={pdfCanvasStyle} data-page-size={selectedPageSize}>
                             <!-- Pages will be dynamically generated here -->
                             <template if:true={previewPages}>
@@ -1132,9 +1142,9 @@
                             </template>
                         </div>
                         <template if:false={hasPropertyImages}>
-                            <div class="floating-placeholder">
-                                <div class="placeholder-badge">Default</div>
-                                <div class="placeholder-bubble">
+                            <div class="floating-placeholder" data-preview-only="true" style="position: absolute; bottom: 12px; left: 12px; display: flex; align-items: center; gap: 8px; z-index: 2000; pointer-events: none;">
+                                <div class="placeholder-badge" style="background: #111; color: #fff; font-size: 11px; padding: 2px 8px; border-radius: 999px; box-shadow: 0 1px 2px rgba(0,0,0,0.2);">Default</div>
+                                <div class="placeholder-bubble" style="background: #fff; color: #111; font-size: 12px; padding: 6px 10px; border-radius: 8px; box-shadow: 0 6px 18px rgba(0,0,0,0.15); border: 1px solid rgba(0,0,0,0.06);">
                                     No property images were found. Using template defaults.
                                 </div>
                             </div>
diff --git a/force-app/main/default/lwc/propertyTemplateSelector/propertyTemplateSelector.js b/force-app/main/default/lwc/propertyTemplateSelector/propertyTemplateSelector.js
index ae60515..680609b 100644
--- a/force-app/main/default/lwc/propertyTemplateSelector/propertyTemplateSelector.js
+++ b/force-app/main/default/lwc/propertyTemplateSelector/propertyTemplateSelector.js
@@ -189,7 +189,6 @@ export default class PropertyTemplateSelector extends LightningElement {
 
   // Category selection tracking
   @track initialCategorySelected = false;
-
   // Template Save/Load Variables
   @track showSaveDialog = false;
   @track showLoadDialog = false;
@@ -391,7 +390,6 @@ export default class PropertyTemplateSelector extends LightningElement {
   get step1Class() {
     return this.currentStep === 1 ? "step-content active" : "step-content";
   }
-
   get step2Class() {
     return this.currentStep === 2 ? "step-content active" : "step-content";
   }
@@ -614,7 +612,7 @@ export default class PropertyTemplateSelector extends LightningElement {
 
   get pdfCanvasStyle() {
     const scale = this.zoom || 1;
-    return `transform: scale(${scale}) !important;`;
+    return `transform: scale(${scale}) !important; transform-origin: top center !important; margin: 0 auto;`;
   }
 
   zoomIn() {
@@ -952,7 +950,6 @@ export default class PropertyTemplateSelector extends LightningElement {
 
     return result;
   }
-
   goToStep(event) {
     const step = parseInt(event.currentTarget.dataset.step);
     this.currentStep = step;
@@ -1134,7 +1131,6 @@ export default class PropertyTemplateSelector extends LightningElement {
       });
     }
   }
-
   // Helper function to safely get property values with validation
   getPropertyValue(property, fieldPath, defaultValue = "N/A") {
     try {
@@ -1324,6 +1320,9 @@ export default class PropertyTemplateSelector extends LightningElement {
     if (!this.selectedPropertyId) {
       this.realPropertyImages = [];
       this.initialCategorySelected = false; // Reset flag when no property selected
+      this.currentImage = null;
+      this.totalImages = 0;
+      this.currentImageIndex = 0;
       return;
     }
 
@@ -1360,9 +1359,19 @@ export default class PropertyTemplateSelector extends LightningElement {
             }
           });
         }, 100);
+      } else {
+        // No images found for this property
+        this.currentImage = null;
+        this.totalImages = 0;
+        this.currentImageIndex = 0;
+        this.selectedCategory = "None";
+        this.initialCategorySelected = false;
       }
     } catch (error) {
       this.realPropertyImages = [];
+      this.currentImage = null;
+      this.totalImages = 0;
+      this.currentImageIndex = 0;
     }
   }
 
@@ -1497,6 +1506,10 @@ export default class PropertyTemplateSelector extends LightningElement {
     const tempDiv = document.createElement("div");
     tempDiv.innerHTML = htmlContent;
 
+    // Remove preview-only UI like no-image placeholders
+    const previewOnly = tempDiv.querySelectorAll('[data-preview-only="true"], .floating-placeholder, .placeholder-badge, .placeholder-bubble');
+    previewOnly.forEach((el) => el.remove());
+
     // Ensure list styling is preserved in output
     const lists = tempDiv.querySelectorAll("ul, ol");
     lists.forEach((list) => {
@@ -2223,28 +2236,84 @@ export default class PropertyTemplateSelector extends LightningElement {
         return this.createBlankTemplate();
     }
   }
-
   // Format description for PDF generation
   formatDescriptionForPDF(description) {
     if (!description || description.trim() === "") {
-      return "Property description not available.";
+      return "<p>Property description not available.</p>";
     }
 
-    // Clean up the description
-    let formattedDescription = description.trim();
+    const raw = String(description).trim();
 
-    // Ensure proper paragraph breaks
-    formattedDescription = formattedDescription.replace(/\n\s*\n/g, "</p><p>");
-
-    // Wrap in paragraph tags if not already wrapped
-    if (!formattedDescription.startsWith("<p>")) {
-      formattedDescription = "<p>" + formattedDescription + "</p>";
+    // If the description already contains HTML tags, trust it and return as-is
+    if (/[<][a-zA-Z][^>]*>/.test(raw)) {
+      return raw;
     }
 
-    // Ensure proper spacing between paragraphs
-    formattedDescription = formattedDescription.replace(/<\/p><p>/g, "</p><p>");
+    const escapeHtml = (str) =>
+      str
+        .replace(/&/g, "&amp;")
+        .replace(/</g, "&lt;")
+        .replace(/>/g, "&gt;")
+        .replace(/\"/g, "&quot;")
+        .replace(/'/g, "&#39;");
 
-    return formattedDescription;
+    const lines = raw.replace(/\r\n?/g, "\n").split("\n");
+
+    const bulletRe = /^\s*(?:[-*•]|\u2022)\s+(.*)$/; // -,*,• bullets
+    const numberedRe = /^\s*(\d+)[\.)]\s+(.*)$/; // 1. or 1)
+
+    let htmlParts = [];
+    let listType = null; // 'ul' | 'ol'
+    let listBuffer = [];
+
+    const flushList = () => {
+      if (!listType || listBuffer.length === 0) return;
+      htmlParts.push(
+        `<${listType}>` +
+          listBuffer.map((item) => `<li>${escapeHtml(item)}</li>`).join("") +
+          `</${listType}>`
+      );
+      listType = null;
+      listBuffer = [];
+    };
+
+    for (const line of lines) {
+      const trimmed = line.trim();
+      if (trimmed === "") {
+        flushList();
+        continue;
+      }
+
+      const bulletMatch = trimmed.match(bulletRe);
+      const numberMatch = trimmed.match(numberedRe);
+
+      if (bulletMatch) {
+        const content = bulletMatch[1];
+        if (listType !== "ul") {
+          flushList();
+          listType = "ul";
+        }
+        listBuffer.push(content);
+        continue;
+      }
+
+      if (numberMatch) {
+        const content = numberMatch[2];
+        if (listType !== "ol") {
+          flushList();
+          listType = "ol";
+        }
+        listBuffer.push(content);
+        continue;
+      }
+
+      // Normal paragraph
+      flushList();
+      htmlParts.push(`<p>${escapeHtml(trimmed)}</p>`);
+    }
+
+    flushList();
+    return htmlParts.join("");
   }
 
   // Generate amenities HTML from property data
@@ -2307,6 +2376,55 @@ export default class PropertyTemplateSelector extends LightningElement {
       .join("");
   }
 
+  // Generate amenity list items (<li>) for list-based templates
+  generateAmenitiesListItems(data) {
+    const amenities = [];
+
+    const amenityFields = [
+      "amenities",
+      "features",
+      "facilities",
+      "amenitiesList",
+      "propertyAmenities",
+      "Amenities__c",
+      "Features__c",
+      "Facilities__c",
+      "Property_Amenities__c",
+      "parkingSpaces",
+      "furnished",
+      "offeringType",
+    ];
+
+    for (const field of amenityFields) {
+      if (data[field] && data[field] !== "N/A") {
+        if (Array.isArray(data[field])) {
+          amenities.push(...data[field]);
+        } else if (typeof data[field] === "string") {
+          if (field === "parkingSpaces") {
+            amenities.push(`Parking: ${data[field]} spaces`);
+          } else if (field === "furnished") {
+            amenities.push(`Furnished: ${data[field]}`);
+          } else if (field === "offeringType") {
+            amenities.push(`Offering Type: ${data[field]}`);
+          } else {
+            const amenityList = data[field]
+              .split(/[ ,;|\n]+/)
+              .map((a) => a.trim())
+              .filter((a) => a);
+            amenities.push(...amenityList);
+          }
+        }
+      }
+    }
+
+    if (amenities.length === 0) {
+      return '<li><i class="fa-solid fa-check"></i> No amenities specified</li>';
+    }
+
+    return amenities
+      .map((a) => `<li><i class=\"fa-solid fa-check\"></i> ${a}</li>`) 
+      .join("");
+  }
   // Template methods
   createBlankTemplate() {
     const data = this.propertyData || {};
@@ -2491,7 +2609,6 @@ export default class PropertyTemplateSelector extends LightningElement {
                         </div>
                     </div>
                 </div>
-                
                 <!-- Amenities -->
                 <div style="background: white; padding: 30px; border-radius: 10px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); margin-bottom: 20px;">
                     <h2 style="color: #0d6efd; border-bottom: 2px solid #0d6efd; padding-bottom: 10px;">Amenities & Features</h2>
@@ -2538,11 +2655,14 @@ export default class PropertyTemplateSelector extends LightningElement {
     const bedrooms = data.Bedrooms__c || data.bedrooms || "N/A";
     const bathrooms = data.Bathrooms__c || data.bathrooms || "N/A";
     const area = data.Square_Feet__c || data.area || "N/A";
+    
     const description = this.formatDescriptionForPDF(
       data.Description_English__c ||
+        data.descriptionEnglish ||
         data.description ||
         "This beautiful property offers exceptional value and modern amenities. Located in a prime area, it represents an excellent investment opportunity."
     );
+
     const referenceId =
       data.pcrm__Title_English__c || data.Name || data.propertyName || "";
 
@@ -2558,6 +2678,91 @@ export default class PropertyTemplateSelector extends LightningElement {
     const propertyGallery = this.generatePropertyGalleryHTML();
     const amenitiesHTML = this.generateAmenitiesHTML(data);
 
+    // Additional computed fields for full dynamic rendering
+    const status = data.Status__c || data.status || "Available";
+    const floor = data.Floor__c || data.floor || "N/A";
+    const parking =
+      data.Parking_Spaces__c || data.parkingSpaces || data.parking || "N/A";
+    const yearBuilt = data.Build_Year__c || data.buildYear || "N/A";
+    const furnishing = data.Furnished__c || data.furnished || "N/A";
+    const maintenanceFee =
+      data.Maintenance_Fee__c || data.maintenanceFee || "N/A";
+    const serviceCharge =
+      data.Service_Charge__c || data.serviceCharge || "N/A";
+
+    const ownerName = data.Owner_Name__c || data.ownerName || "N/A";
+    const ownerPhone = data.Owner_Phone__c || data.ownerPhone || "N/A";
+
+    const landmarks =
+      data.Nearby_Landmarks__c || data.nearbyLandmarks || "N/A";
+    const transportation =
+      data.Transportation__c || data.transportation || "N/A";
+    const schools = data.Schools__c || data.schools || "N/A";
+    const hospitals = data.Hospitals__c || data.hospitals || "N/A";
+    const shopping =
+      data.Shopping_Centers__c || data.shoppingCenters || "N/A";
+    const airportDistance =
+      data.Airport_Distance__c || data.airportDistance || "N/A";
+
+    const petFriendly =
+      data.Pet_Friendly__c !== undefined
+        ? data.Pet_Friendly__c
+          ? "Yes"
+          : "No"
+        : data.petFriendly || "N/A";
+    const smokingAllowed =
+      data.Smoking_Allowed__c !== undefined
+        ? data.Smoking_Allowed__c
+          ? "Yes"
+          : "No"
+        : data.smokingAllowed || "N/A";
+    const availableFrom =
+      data.Rent_Available_From__c || data.Available_From__c || data.availableFrom || "N/A";
+    const minimumContract =
+      data.Minimum_Contract__c || data.minimumContract || "N/A";
+    const securityDeposit =
+      data.Security_Deposit__c || data.securityDeposit || "N/A";
+
+    const mapsImageUrl =
+      this.getMapsImageUrl() ||
+      "https://plus.unsplash.com/premium_photo-1676467963268-5a20d7a7a448?q=80&w=687&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D";
+
+    // Build dynamic gallery pages like the screenshot (2 columns, last image full width)
+    const allImages = Array.isArray(this.realPropertyImages)
+      ? this.realPropertyImages
+      : [];
+    const imagesPerPage = 7; // layout similar to screenshot
+    let galleryPagesHTML = "";
+    if (allImages.length > 0) {
+      for (let i = 0; i < allImages.length; i += imagesPerPage) {
+        const chunk = allImages.slice(i, i + imagesPerPage);
+        const chunkHTML = chunk
+          .map((img, idx) => {
+            const title =
+              img.title || img.pcrm__Title__c || `Property Image ${i + idx + 1}`;
+            const extraStyle = idx === chunk.length - 1 ? " grid-column: 1 / -1;" : "";
+            return `<img src="${img.url}" alt="${title}" style="width:100%; height:auto; display:block; break-inside: avoid; page-break-inside: avoid;${extraStyle}"/>`;
+          })
+          .join("");
+        galleryPagesHTML += `
+    <div class="brochure">
+        <div class="content">
+            <div style="display:grid; grid-template-columns: 1fr 1fr; gap: 20px;">
+                ${chunkHTML}
+            </div>
+        </div>
+        <footer class="page-footer">
+            <div class="reference-id">
+                <strong>Reference ID:</strong> ${referenceId}
+            </div>
+            <div class="owner-info">
+                <strong>Owner Info:</strong> ${ownerName}, ${ownerPhone}
+            </div>
+        </footer>
+    </div>`;
+      }
+    }
+
     return `<!DOCTYPE html>
 <html lang="en">
 <head>
@@ -2925,14 +3130,14 @@ export default class PropertyTemplateSelector extends LightningElement {
     <div class="brochure" id="page1">
         <div class="hero">
             <div class="hero-overlay">
-                <h1 class="property-name">[Property Name]</h1>
-                <p class="property-address">[Property Address]</p>
+                <h1 class="property-name">${propertyName}</h1>
+                <p class="property-address">${location}</p>
                 <div class="hero-details">
-                    <div class="price">[Price]</div>
+                    <div class="price">${price}</div>
                     <div class="stats">
-                        <span class="stat-item"><i class="fa-solid fa-bed"></i> [Bedrooms] Beds</span>
-                        <span class="stat-item"><i class="fa-solid fa-bath"></i> [Bathrooms] Baths</span>
-                        <span class="stat-item"><i class="fa-solid fa-ruler-combined"></i> [Area] sq. ft.</span>
+                        <span class="stat-item"><i class="fa-solid fa-bed"></i> ${bedrooms} Beds</span>
+                        <span class="stat-item"><i class="fa-solid fa-bath"></i> ${bathrooms} Baths</span>
+                        <span class="stat-item"><i class="fa-solid fa-ruler-combined"></i> ${area} sq. ft.</span>
                     </div>
                 </div>
             </div>
@@ -2941,27 +3146,27 @@ export default class PropertyTemplateSelector extends LightningElement {
         <div class="content">
             <div class="description">
                 <h2>About this Property</h2>
-                <p>[Property Description goes here... This section provides a compelling overview of the property's main selling points, its unique character, and the lifestyle it offers. It should be engaging and concise.]</p>
+                ${description}
             </div>
             
             <div class="agent-footer">
                 <div class="agent-info">
-                    <h3>[Agent Name]</h3>
+                    <h3>${agentName}</h3>
                     <p>Your Real Estate Professional</p>
                 </div>
                 <div class="agent-contact-details">
-                    <p>[Agent Phone]</p>
-                    <p>[Agent Email]</p>
+                    <p>${agentPhone}</p>
+                    <p>${agentEmail}</p>
                 </div>
             </div>
         </div>
 
         <footer class="page-footer">
             <div class="reference-id">
-                <strong>Reference ID:</strong> [Reference ID]
+                <strong>Reference ID:</strong> ${referenceId}
             </div>
             <div class="owner-info">
-                <strong>Owner Info:</strong> [Owner Name], [Owner Phone]
+                <strong>Owner Info:</strong> ${ownerName}, ${ownerPhone}
             </div>
         </footer>
     </div>
@@ -2978,40 +3183,29 @@ export default class PropertyTemplateSelector extends LightningElement {
             <div class="specifications-section">
                 <h2 class="section-title">Specifications</h2>
                 <div class="spec-list">
-                    <div class="spec-item"><strong>Status:</strong> <span>[Status]</span></div>
-                    <div class="spec-item"><strong>Type:</strong> <span>[Type]</span></div>
-                    <div class="spec-item"><strong>Floor:</strong> <span>[Floor]</span></div>
-                    <div class="spec-item"><strong>Parking:</strong> <span>[Parking]</span></div>
-                    <div class="spec-item"><strong>Year Built:</strong> <span>[Year Built]</span></div>
-                    <div class="spec-item"><strong>Furnishing:</strong> <span>[Furnishing]</span></div>
-                    <div class="spec-item"><strong>Maintenance Fee:</strong> <span>[Maintenance Fee]</span></div>
-                    <div class="spec-item"><strong>Service Charge:</strong> <span>[Service Charge]</span></div>
+                    <div class="spec-item"><strong>Status:</strong> <span>${status}</span></div>
+                    <div class="spec-item"><strong>Type:</strong> <span>${propertyType}</span></div>
+                    <div class="spec-item"><strong>Floor:</strong> <span>${floor}</span></div>
+                    <div class="spec-item"><strong>Parking:</strong> <span>${parking}</span></div>
+                    <div class="spec-item"><strong>Year Built:</strong> <span>${yearBuilt}</span></div>
+                    <div class="spec-item"><strong>Furnishing:</strong> <span>${furnishing}</span></div>
+                    <div class="spec-item"><strong>Maintenance Fee:</strong> <span>${maintenanceFee}</span></div>
+                    <div class="spec-item"><strong>Service Charge:</strong> <span>${serviceCharge}</span></div>
                 </div>
             </div>
 
             <div class="amenities-section">
                 <h2 class="section-title">Amenities & Features</h2>
-                <div class="amenities-grid">
-                    <div class="amenity-item"><i class="icon fa-solid fa-check"></i><span>[Amenity/Feature 1]</span></div>
-                    <div class="amenity-item"><i class="icon fa-solid fa-check"></i><span>[Amenity/Feature 2]</span></div>
-                    <div class="amenity-item"><i class="icon fa-solid fa-check"></i><span>[Amenity/Feature 3]</span></div>
-                    <div class="amenity-item"><i class="icon fa-solid fa-check"></i><span>[Amenity/Feature 4]</span></div>
-                    <div class="amenity-item"><i class="icon fa-solid fa-check"></i><span>[Amenity/Feature 5]</span></div>
-                    <div class="amenity-item"><i class="icon fa-solid fa-check"></i><span>[Amenity/Feature 6]</span></div>
-                    <div class="amenity-item"><i class="icon fa-solid fa-check"></i><span>[Amenity/Feature 7]</span></div>
-                    <div class="amenity-item"><i class="icon fa-solid fa-check"></i><span>[Amenity/Feature 8]</span></div>
-                    <div class="amenity-item"><i class="icon fa-solid fa-check"></i><span>[Amenity/Feature 9]</span></div>
-                    <div class="amenity-item"><i class="icon fa-solid fa-check"></i><span>[Amenity/Feature 10]</span></div>
-                </div>
+                <div class="amenities-grid">${amenitiesHTML}</div>
             </div>
         </div>
 
         <footer class="page-footer">
             <div class="reference-id">
-                <strong>Reference ID:</strong> [Reference ID]
+                <strong>Reference ID:</strong> ${referenceId}
             </div>
             <div class="owner-info">
-                <strong>Owner Info:</strong> [Owner Name], [Owner Phone]
+                <strong>Owner Info:</strong> ${ownerName}, ${ownerPhone}
             </div>
         </footer>
     </div>
@@ -3021,40 +3215,42 @@ export default class PropertyTemplateSelector extends LightningElement {
             <div>
                 <h2 class="section-title">Location & Nearby</h2>
                 <div class="nearby-list">
-                    <div class="nearby-item"><i class="icon fa-solid fa-location-dot"></i><div><strong>Landmarks:</strong> <span>[Nearby Landmarks]</span></div></div>
-                    <div class="nearby-item"><i class="icon fa-solid fa-train-subway"></i><div><strong>Transportation:</strong> <span>[Transportation]</span></div></div>
-                    <div class="nearby-item"><i class="icon fa-solid fa-graduation-cap"></i><div><strong>Schools:</strong> <span>[Schools]</span></div></div>
-                    <div class="nearby-item"><i class="icon fa-solid fa-hospital"></i><div><strong>Hospitals:</strong> <span>[Hospitals]</span></div></div>
-                    <div class="nearby-item"><i class="icon fa-solid fa-cart-shopping"></i><div><strong>Shopping:</strong> <span>[Shopping Centers]</span></div></div>
-                    <div class="nearby-item"><i class="icon fa-solid fa-plane-departure"></i><div><strong>Airport:</strong> <span>[Airport Distance]</span></div></div>
+                    <div class="nearby-item"><i class="icon fa-solid fa-location-dot"></i><div><strong>Landmarks:</strong> <span>${landmarks}</span></div></div>
+                    <div class="nearby-item"><i class="icon fa-solid fa-train-subway"></i><div><strong>Transportation:</strong> <span>${transportation}</span></div></div>
+                    <div class="nearby-item"><i class="icon fa-solid fa-graduation-cap"></i><div><strong>Schools:</strong> <span>${schools}</span></div></div>
+                    <div class="nearby-item"><i class="icon fa-solid fa-hospital"></i><div><strong>Hospitals:</strong> <span>${hospitals}</span></div></div>
+                    <div class="nearby-item"><i class="icon fa-solid fa-cart-shopping"></i><div><strong>Shopping:</strong> <span>${shopping}</span></div></div>
+                    <div class="nearby-item"><i class="icon fa-solid fa-plane-departure"></i><div><strong>Airport:</strong> <span>${airportDistance}</span></div></div>
                 </div>
             </div>
             <div class="map-container">
-                <img src="https://plus.unsplash.com/premium_photo-1676467963268-5a20d7a7a448?q=80&w=687&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
+                <img src="${mapsImageUrl}" />
             </div>
         </section>
 
         <section class="additional-info-section">
             <h2 class="section-title">Additional Information</h2>
             <div class="info-list">
-                <div class="info-item"><strong>Pet Friendly:</strong> <span>[Pet Friendly Status]</span></div>
-                <div class="info-item"><strong>Smoking:</strong> <span>[Smoking Allowed]</span></div>
-                <div class="info-item"><strong>Available From:</strong> <span>[Available From Date]</span></div>
-                <div class="info-item"><strong>Minimum Contract:</strong> <span>[Minimum Contract Duration]</span></div>
-                <div class="info-item"><strong>Security Deposit:</strong> <span>[Security Deposit]</span></div>
+                <div class="info-item"><strong>Pet Friendly:</strong> <span>${petFriendly}</span></div>
+                <div class="info-item"><strong>Smoking:</strong> <span>${smokingAllowed}</span></div>
+                <div class="info-item"><strong>Available From:</strong> <span>${availableFrom}</span></div>
+                <div class="info-item"><strong>Minimum Contract:</strong> <span>${minimumContract}</span></div>
+                <div class="info-item"><strong>Security Deposit:</strong> <span>${securityDeposit}</span></div>
             </div>
         </section>
 
         <footer class="page-footer">
             <div class="reference-id">
-                <strong>Reference ID:</strong> [Reference ID]
+                <strong>Reference ID:</strong> ${referenceId}
             </div>
             <div class="owner-info">
-                <strong>Owner Info:</strong> [Owner Name], [Owner Phone]
+                <strong>Owner Info:</strong> ${ownerName}, ${ownerPhone}
             </div>
         </footer>
     </div>
 
+    ${galleryPagesHTML}
+
 </body>
 </html>
 `;
@@ -3128,7 +3324,6 @@ export default class PropertyTemplateSelector extends LightningElement {
     const subLocalityBayut =
       data.Sub_Locality__c || data.subLocalityBayut || "N/A";
     const towerBayut = data.Tower__c || data.towerBayut || "N/A";
-
     // Nearby amenities
     const schools = data.Schools__c || data.schools || "N/A";
     const shoppingCenters =
@@ -3186,105 +3381,101 @@ export default class PropertyTemplateSelector extends LightningElement {
     const propertyName =
       data.Name ||
       data.propertyName ||
-      data.pcrm__Title_English__c ||
-      "The Grand Oak Villa";
+      data.pcrm__Title_English__c;
     const location =
       data.Address__c ||
-      data.location ||
-      "123 Luxury Lane, Prestige City, PC 45678";
+      data.location;
     const price =
       data.Sale_Price_Min__c ||
       data.Rent_Price_Min__c ||
       data.Price__c ||
-      data.price ||
-      "$4,500,000";
+      data.price;
     const referenceId =
-      data.pcrm__Title_English__c || data.Name || data.propertyName || "";
-    const bedrooms = data.Bedrooms__c || data.bedrooms || "5";
-    const bathrooms = data.Bathrooms__c || data.bathrooms || "6";
+      data.pcrm__Title_English__c || data.Name || data.propertyName;
+    const bedrooms = data.Bedrooms__c || data.bedrooms;
+    const bathrooms = data.Bathrooms__c || data.bathrooms;
     const squareFeet =
-      data.Square_Feet__c || data.squareFeet || data.area || "6,200";
-    const status = (data.Status__c || data.status || "FOR SALE").toString();
+      data.Square_Feet__c || data.squareFeet || data.area;
+    const status = (data.Status__c || data.status).toString();
 
     // Enhanced property details
-    const propertyType = data.Property_Type__c || data.propertyType || "Villa";
-    const yearBuilt = data.Build_Year__c || data.yearBuilt || "2020";
+    const propertyType = data.Property_Type__c || data.propertyType;
+    const yearBuilt = data.Build_Year__c || data.yearBuilt;
     const furnishing =
-      data.Furnished__c || data.furnishing || "Fully Furnished";
-    const parking = data.Parking_Spaces__c || data.parking || "2";
+      data.Furnished__c || data.furnishing;
+    const parking = data.Parking_Spaces__c || data.parking;
     const description = this.formatDescriptionForPDF(
       data.Description_English__c ||
         data.descriptionEnglish ||
         data.description ||
         "An exquisite villa offering unparalleled luxury and sophistication in one of the most prestigious locations."
     );
-    const floor = data.Floor__c || data.floor || "Ground Floor";
+    const floor = data.Floor__c || data.floor 
     const maintenanceFee =
-      data.Maintenance_Fee__c || data.maintenanceFee || "N/A";
-    const serviceCharge = data.Service_Charge__c || data.serviceCharge || "N/A";
+      data.Maintenance_Fee__c || data.maintenanceFee;
+    const serviceCharge = data.Service_Charge__c || data.serviceCharge;
 
     // Additional property details
-    const lotSize = data.Lot_Size__c || data.lotSize || "0.5 acres";
-    const heating = data.Heating__c || data.heating || "Central Air";
-    const cooling = data.Cooling__c || data.cooling || "Central Air";
-    const roof = data.Roof__c || data.roof || "Tile";
-    const exterior = data.Exterior__c || data.exterior || "Stone & Brick";
-    const foundation = data.Foundation__c || data.foundation || "Concrete";
-    const utilities = data.Utilities__c || data.utilities || "All Connected";
-    const zoning = data.Zoning__c || data.zoning || "Residential";
-    const hoa = data.HOA__c || data.hoa || "Yes";
-    const hoaFee = data.HOA_Fee__c || data.hoaFee || "$500/month";
-    const taxYear = data.Tax_Year__c || data.taxYear || "2024";
-    const taxAmount = data.Tax_Amount__c || data.taxAmount || "$12,000/year";
-    const lastSold = data.Last_Sold__c || data.lastSold || "2020";
+    const lotSize = data.Lot_Size__c || data.lotSize;
+    const heating = data.Heating__c || data.heating;
+    const cooling = data.Cooling__c || data.cooling;
+    const roof = data.Roof__c || data.roof;
+    const exterior = data.Exterior__c || data.exterior;
+    const foundation = data.Foundation__c || data.foundation;
+    const utilities = data.Utilities__c || data.utilities;
+    const zoning = data.Zoning__c || data.zoning;
+    const hoa = data.HOA__c || data.hoa;
+    const hoaFee = data.HOA_Fee__c || data.hoaFee;
+    const taxYear = data.Tax_Year__c || data.taxYear;
+    const taxAmount = data.Tax_Amount__c || data.taxAmount ;
+    const lastSold = data.Last_Sold__c || data.lastSold ;
     const lastSoldPrice =
-      data.Last_Sold_Price__c || data.lastSoldPrice || "$3,200,000";
+      data.Last_Sold_Price__c || data.lastSoldPrice ;
 
     // Location and POI data
-    const schools = data.Schools__c || data.schools || "5 min drive";
+    const schools = data.Schools__c || data.schools ;
     const shoppingCenters =
-      data.Shopping_Centers__c || data.shoppingCenters || "10 min drive";
+      data.Shopping_Centers__c || data.shoppingCenters ;
     const airportDistance =
-      data.Airport_Distance__c || data.airportDistance || "25 min drive";
+      data.Airport_Distance__c || data.airportDistance ;
     const nearbyLandmarks =
-      data.Nearby_Landmarks__c || data.nearbyLandmarks || "City Center 15 min";
+      data.Nearby_Landmarks__c || data.nearbyLandmarks;
     const transportation =
-      data.Transportation__c || data.transportation || "Metro 5 min walk";
-    const hospitals = data.Hospitals__c || data.hospitals || "10 min drive";
+      data.Transportation__c || data.transportation ;
+    const hospitals = data.Hospitals__c || data.hospitals ;
     const beachDistance =
-      data.Beach_Distance__c || data.beachDistance || "30 min drive";
+      data.Beach_Distance__c || data.beachDistance;
     const metroDistance =
-      data.Metro_Distance__c || data.metroDistance || "5 min walk";
+      data.Metro_Distance__c || data.metroDistance;
 
     // Additional information
-    const petFriendly = data.Pet_Friendly__c || data.petFriendly || "Yes";
+    const petFriendly = data.Pet_Friendly__c || data.petFriendly;
     const smokingAllowed =
-      data.Smoking_Allowed__c || data.smokingAllowed || "No";
+      data.Smoking_Allowed__c || data.smokingAllowed;
     const availableFrom =
-      data.Available_From__c || data.availableFrom || "Immediate";
+      data.Available_From__c || data.availableFrom;
     const minimumContract =
-      data.Minimum_Contract__c || data.minimumContract || "12 months";
+      data.Minimum_Contract__c || data.minimumContract;
     const securityDeposit =
-      data.Security_Deposit__c || data.securityDeposit || "2 months rent";
+      data.Security_Deposit__c || data.securityDeposit;
     const utilitiesIncluded =
       data.Utilities_Included__c ||
-      data.utilitiesIncluded ||
-      "Water, Electricity";
+      data.utilitiesIncluded;
     const internetIncluded =
-      data.Internet_Included__c || data.internetIncluded || "Yes";
-    const cableIncluded = data.Cable_Included__c || data.cableIncluded || "Yes";
+      data.Internet_Included__c || data.internetIncluded;
+    const cableIncluded = data.Cable_Included__c || data.cableIncluded;
 
     // Agent and owner information
-    const agentName = data.Agent_Name__c || data.agentName || "Olivia Sterling";
+    const agentName = data.Agent_Name__c || data.agentName;
     const agentPhone =
-      data.Agent_Phone__c || data.agentPhone || "(555) 987-6543";
+      data.Agent_Phone__c || data.agentPhone;
     const agentEmail =
-      data.Agent_Email__c || data.agentEmail || "olivia@elysianestates.com";
-    const ownerName = data.Owner_Name__c || data.ownerName || "John & Jane Doe";
+      data.Agent_Email__c || data.agentEmail ;
+    const ownerName = data.Owner_Name__c || data.ownerName ;
     const ownerPhone =
-      data.Owner_Phone__c || data.ownerPhone || "(555) 111-2222";
+      data.Owner_Phone__c || data.ownerPhone ;
     const ownerEmail =
-      data.Owner_Email__c || data.ownerEmail || "owner@email.com";
+      data.Owner_Email__c || data.ownerEmail;
     // Get smart images
     const exteriorImage = this.getExteriorImageUrl();
     const interiorImage1 = this.getSmartImageForSection(
@@ -3310,6 +3501,39 @@ export default class PropertyTemplateSelector extends LightningElement {
     // Generate property gallery HTML
     const propertyGalleryHTML = this.generatePropertyGalleryHTML(data);
 
+    // Build dynamic gallery pages appended at the end (A4, 2 columns, last image full width)
+    const allImages = Array.isArray(this.realPropertyImages)
+      ? this.realPropertyImages
+      : [];
+    const imagesPerPage = 7;
+    let galleryPagesHTML = "";
+    if (allImages.length > 0) {
+      for (let i = 0; i < allImages.length; i += imagesPerPage) {
+        const chunk = allImages.slice(i, i + imagesPerPage);
+        const chunkHTML = chunk
+          .map((img, idx) => {
+            const title =
+              img.title || img.pcrm__Title__c || `Property Image ${i + idx + 1}`;
+            const extraStyle = idx === chunk.length - 1 ? " grid-column: 1 / -1;" : "";
+            return `<img src="${img.url}" alt="${title}" style="width:100%; height:auto; display:block; break-inside: avoid; page-break-inside: avoid;${extraStyle}"/>`;
+          })
+          .join("");
+        galleryPagesHTML += `
+    <div class=\"brochure-page\">
+        <div class=\"content-body\">
+            <header class=\"page-header\"><h1 class=\"title\">Property <span>Gallery</span></h1><span class=\"property-name\">${propertyName}</span></header>
+            <main class=\"main-content\">
+                <div style=\"display:grid; grid-template-columns: 1fr 1fr; gap: 20px;\">${chunkHTML}</div>
+            </main>
+        </div>
+        <footer class=\"page-footer\">
+            <div><strong>Agent:</strong> ${agentName} | ${agentPhone} | ${agentEmail}</div>
+            <div><strong>Owner:</strong> ${ownerName} | ${ownerPhone} | ${ownerEmail}</div>
+        </footer>
+    </div>`;
+      }
+    }
+
     // Return the complete Grand Oak Villa template with all dynamic data
   return `<!DOCTYPE html>
 <html lang="en">
@@ -3582,28 +3806,27 @@ export default class PropertyTemplateSelector extends LightningElement {
 
     <div class="brochure-page cover-page">
         <div class="cover-overlay"></div>
-        <header class="cover-header"><div class="logo">Elysian</div><div class="property-status">FOR SALE</div></header>
+        <header class="cover-header"><div class="logo">Elysian</div><div class="property-status">${status.toUpperCase()}</div></header>
         <main class="cover-content">
-            <h1 class="cover-title">The Grand Oak Villa</h1>
-            <p class="cover-address"><i class="fa-solid fa-location-dot"></i> 123 Luxury Lane, Prestige City, PC 45678</p>
+            <h1 class="cover-title">${propertyName}</h1>
+            <p class="cover-address"><i class="fa-solid fa-location-dot"></i> ${location}</p>
         </main>
         <footer class="cover-footer">
-            <div class="feature-item"><div class="value">5</div><div class="label">Bedrooms</div></div>
-            <div class="feature-item"><div class="value">6</div><div class="label">Bathrooms</div></div>
-            <div class="feature-item"><div class="value">6,200</div><div class="label">Sq. Ft.</div></div>
-            <div class="feature-item"><div class="value">$4,500,000</div><div class="label">Price</div></div>
+            <div class="feature-item"><div class="value">${bedrooms}</div><div class="label">Bedrooms</div></div>
+            <div class="feature-item"><div class="value">${bathrooms}</div><div class="label">Bathrooms</div></div>
+            <div class="feature-item"><div class="value">${squareFeet}</div><div class="label">Sq. Ft.</div></div>
+            <div class="feature-item"><div class="value">${price}</div><div class="label">Price</div></div>
         </footer>
     </div>
 
     <div class="brochure-page">
         <div class="content-body">
-            <header class="page-header"><h1 class="title">Property <span>Overview</span></h1><span class="property-name">The Grand Oak Villa</span></header>
+            <header class="page-header"><h1 class="title">Property <span>Overview</span></h1><span class="property-name">${propertyName}</span></header>
             <main class="main-content details-grid">
                 <div>
                     <h2 class="section-title">Description</h2>
                     <div class="description">
-                        <p>Nestled in the heart of Prestige City, The Grand Oak Villa is a masterpiece of modern architecture and timeless elegance. This expansive 6,200 sq. ft. residence offers unparalleled luxury and privacy.</p>
-                        <p>With soaring ceilings, bespoke finishes, and panoramic views from every room, this home is designed for those who appreciate the finer things in life. The open-plan living space is perfect for entertaining, featuring a gourmet chef's kitchen, a formal dining area, and a grand living room with a statement fireplace.</p>
+                        ${description}
                     </div>
                 </div>
 
@@ -3611,29 +3834,27 @@ export default class PropertyTemplateSelector extends LightningElement {
                     <div>
                         <h2 class="section-title">Specifications</h2>
                         <div class="spec-list">
-                            <div class="item"><span class="key">Reference ID:</span> <span class="value">[Reference ID]</span></div>
-                            <div class="item"><span class="key">Status:</span> <span class="value">[Status]</span></div>
-                            <div class="item"><span class="key">Type:</span> <span class="value">[Property Type]</span></div>
-                            <div class="item"><span class="key">Year Built:</span> <span class="value">[Year Built]</span></div>
-                            <div class="item"><span class="key">Floor:</span> <span class="value">[Floor]</span></div>
-                            <div class="item"><span class="key">Parking:</span> <span class="value">[Parking]</span></div>
-                            <div class="item"><span class="key">Furnishing:</span> <span class="value">[Furnishing]</span></div>
-                            <div class="item"><span class="key">Maintenance Fee:</span> <span class="value">[Maintenance Fee]</span></div>
-                            <div class="item"><span class="key">Service Charge:</span> <span class="value">[Service Charge]</span></div>
+                            <div class="item"><span class="key">Reference ID:</span> <span class="value">${referenceId}</span></div>
+                            <div class="item"><span class="key">Status:</span> <span class="value">${status}</span></div>
+                            <div class="item"><span class="key">Type:</span> <span class="value">${propertyType}</span></div>
+                            <div class="item"><span class="key">Year Built:</span> <span class="value">${yearBuilt}</span></div>
+                            <div class="item"><span class="key">Floor:</span> <span class="value">${floor}</span></div>
+                            <div class="item"><span class="key">Parking:</span> <span class="value">${parking}</span></div>
+                            <div class="item"><span class="key">Furnishing:</span> <span class="value">${furnishing}</span></div>
+                            <div class="item"><span class="key">Maintenance Fee:</span> <span class="value">${maintenanceFee}</span></div>
+                            <div class="item"><span class="key">Service Charge:</span> <span class="value">${serviceCharge}</span></div>
                         </div>
                     </div>
                     <div>
                         <h2 class="section-title">Amenities & Features</h2>
-                        <ul class="amenities-list">
-                            <li><i class="fa-solid fa-check"></i> Infinity Pool</li><li><i class="fa-solid fa-check"></i> Private Home Theater</li><li><i class="fa-solid fa-check"></i> Gourmet Chef's Kitchen</li><li><i class="fa-solid fa-check"></i> Wine Cellar</li><li><i class="fa-solid fa-check"></i> Smart Home Automation</li><li><i class="fa-solid fa-check"></i> Spa & Sauna Room</li><li><i class="fa-solid fa-check"></i> Landscaped Gardens</li><li><i class="fa-solid fa-check"></i> Outdoor Fire Pit</li>
-                        </ul>
+                        <ul class="amenities-list">${this.generateAmenitiesListItems(data)}</ul>
                     </div>
                 </div>
             </main>
         </div>
         <footer class="page-footer">
-            <div><strong>Agent:</strong> [Agent Name] | [Agent Phone] | [Agent Email]</div>
-            <div><strong>Owner:</strong> [Owner Name] | [Owner Phone] | [Owner Email]</div>
+            <div><strong>Agent:</strong> ${agentName} | ${agentPhone} | ${agentEmail}</div>
+            <div><strong>Owner:</strong> ${ownerName} | ${ownerPhone} | ${ownerEmail}</div>
         </footer>
     </div>
 
@@ -3643,55 +3864,55 @@ export default class PropertyTemplateSelector extends LightningElement {
             <div class="location-content">
                  <header class="page-header" style="margin-bottom: 0;">
                     <h1 class="title">An Unrivaled <span>Setting</span></h1>
-                    <span class="property-name">123 Luxury Lane, Prestige City</span>
+                    <span class="property-name">${location}</span>
                 </header>
                 <div class="poi-grid">
                     <div class="poi-item">
                         <div class="icon"><i class="fa-solid fa-school"></i></div>
                         <div class="title">Schools</div>
-                        <div class="details">[Schools]</div>
+                        <div class="details">${schools}</div>
                     </div>
                     <div class="poi-item">
                         <div class="icon"><i class="fa-solid fa-shopping-cart"></i></div>
                         <div class="title">Shopping</div>
-                        <div class="details">[Shopping Centers]</div>
+                        <div class="details">${shoppingCenters}</div>
                     </div>
                     <div class="poi-item">
                         <div class="icon"><i class="fa-solid fa-plane"></i></div>
                         <div class="title">Airport</div>
-                        <div class="details">[Airport Distance]</div>
+                        <div class="details">${airportDistance}</div>
                     </div>
                     <div class="poi-item">
                         <div class="icon"><i class="fa-solid fa-landmark"></i></div>
                         <div class="title">Landmarks</div>
-                        <div class="details">[Nearby Landmarks]</div>
+                        <div class="details">${nearbyLandmarks}</div>
                     </div>
                     <div class="poi-item">
                         <div class="icon"><i class="fa-solid fa-bus"></i></div>
                         <div class="title">Transportation</div>
-                        <div class="details">[Transportation]</div>
+                        <div class="details">${transportation}</div>
                     </div>
                     <div class="poi-item">
                         <div class="icon"><i class="fa-solid fa-hospital"></i></div>
                         <div class="title">Hospitals</div>
-                        <div class="details">[Hospitals]</div>
+                        <div class="details">${hospitals}</div>
                     </div>
                     <div class="poi-item">
                         <div class="icon"><i class="fa-solid fa-umbrella-beach"></i></div>
                         <div class="title">Beach</div>
-                        <div class="details">[Beach Distance]</div>
+                        <div class="details">${beachDistance}</div>
                     </div>
                      <div class="poi-item">
                         <div class="icon"><i class="fa-solid fa-subway"></i></div>
                         <div class="title">Metro</div>
-                        <div class="details">[Metro Distance]</div>
+                        <div class="details">${metroDistance}</div>
                     </div>
                 </div>
             </div>
         </div>
         <footer class="page-footer">
-            <div><strong>Agent:</strong> [Agent Name] | [Agent Phone] | [Agent Email]</div>
-            <div><strong>Owner:</strong> [Owner Name] | [Owner Phone] | [Owner Email]</div>
+            <div><strong>Agent:</strong> ${agentName} | ${agentPhone} | ${agentEmail}</div>
+            <div><strong>Owner:</strong> ${ownerName} | ${ownerPhone} | ${ownerEmail}</div>
         </footer>
     </div>
     
@@ -3699,7 +3920,7 @@ export default class PropertyTemplateSelector extends LightningElement {
         <div class="content-body">
              <header class="page-header">
                 <h1 class="title">Layout & <span>Lifestyle</span></h1>
-                <span class="property-name">The Grand Oak Villa</span>
+                <span class="property-name">${propertyName}</span>
             </header>
             <main class="main-content page-split-layout">
                 <section class="gallery-section">
@@ -3713,25 +3934,27 @@ export default class PropertyTemplateSelector extends LightningElement {
                 <section class="additional-info-section">
                     <h2 class="section-title">Additional Information</h2>
                     <div class="spec-list">
-                        <div class="item"><span class="key">Pet Friendly:</span> <span class="value">[Pet Friendly Status]</span></div>
-                        <div class="item"><span class="key">Smoking:</span> <span class="value">[Smoking Allowed]</span></div>
-                        <div class="item"><span class="key">Available From:</span> <span class="value">[Available From Date]</span></div>
-                        <div class="item"><span class="key">Minimum Contract:</span> <span class="value">[Minimum Contract Duration]</span></div>
-                        <div class="item"><span class="key">Security Deposit:</span> <span class="value">[Security Deposit]</span></div>
-                        <div class="item"><span class="key">Utilities Included:</span> <span class="value">[Utilities Included]</span></div>
-                        <div class="item"><span class="key">Internet Included:</span> <span class="value">[Internet Included]</span></div>
-                        <div class="item"><span class="key">Cable Included:</span> <span class="value">[Cable Included]</span></div>
+                        <div class="item"><span class="key">Pet Friendly:</span> <span class="value">${petFriendly}</span></div>
+                        <div class="item"><span class="key">Smoking:</span> <span class="value">${smokingAllowed}</span></div>
+                        <div class="item"><span class="key">Available From:</span> <span class="value">${availableFrom}</span></div>
+                        <div class="item"><span class="key">Minimum Contract:</span> <span class="value">${minimumContract}</span></div>
+                        <div class="item"><span class="key">Security Deposit:</span> <span class="value">${securityDeposit}</span></div>
+                        <div class="item"><span class="key">Utilities Included:</span> <span class="value">${utilitiesIncluded}</span></div>
+                        <div class="item"><span class="key">Internet Included:</span> <span class="value">${internetIncluded}</span></div>
+                        <div class="item"><span class="key">Cable Included:</span> <span class="value">${cableIncluded}</span></div>
                     </div>
                 </section>
             </main>
         </div>
         <footer class="page-footer">
-            <div><strong>Agent:</strong> [Agent Name] | [Agent Phone] | [Agent Email]</div>
-            <div><strong>Owner:</strong> [Owner Name] | [Owner Phone] | [Owner Email]</div>
+            <div><strong>Agent:</strong> ${agentName} | ${agentPhone} | ${agentEmail}</div>
+            <div><strong>Owner:</strong> ${ownerName} | ${ownerPhone} | ${ownerEmail}</div>
         </footer>
     </div>
 
 
+${galleryPagesHTML}
+
 </body>
 </html>
 `
@@ -3761,8 +3984,70 @@ export default class PropertyTemplateSelector extends LightningElement {
         "Property description not available."
     );
 
+    // Additional dynamic fields
+    const bedrooms = data.Bedrooms__c || data.bedrooms || "N/A";
+    const bathrooms = data.Bathrooms__c || data.bathrooms || "N/A";
+    const squareFeet =
+      data.Square_Feet__c || data.size || data.squareFeet || data.area || "N/A";
+    const status = data.Status__c || data.status || "N/A";
+    const yearBuilt = data.Build_Year__c || data.yearBuilt || "N/A";
+    const furnishing = data.Furnished__c || data.furnishing || "N/A";
+    const parking =
+      data.Parking_Spaces__c || data.parkingSpaces || data.parking || "N/A";
+    const floor = data.Floor__c || data.floor || "N/A";
+    const maintenanceFee = data.Maintenance_Fee__c || data.maintenanceFee || "N/A";
+    const serviceCharge = data.Service_Charge__c || data.serviceCharge || "N/A";
+    const acres = data.acres || data.Lot_Size__c || "N/A";
+    const priceDisplay =
+      price !== "Price on Request" ? `Residences Starting from ${price}` : "Price on Request";
+
+    const agentName =
+      data.contactName || data.Agent_Name__c || data.agentName || "N/A";
+    const agentPhone =
+      data.contactPhone || data.Agent_Phone__c || data.agentPhone || "N/A";
+    const agentEmail =
+      data.contactEmail || data.Agent_Email__c || data.agentEmail || "N/A";
+
+    // Location and highlights
+    const landmarks = data.Nearby_Landmarks__c || data.landmarks || "N/A";
+    const transportation = data.Transportation__c || data.transportation || "N/A";
+    const schools = data.Schools__c || data.schools || "N/A";
+    const shopping = data.Shopping_Centers__c || data.shoppingCenters || "N/A";
+    const airport = data.Airport_Distance__c || data.airportDistance || "N/A";
+
+    // Additional info
+    const petFriendly = data.Pet_Friendly__c || data.petFriendly || "N/A";
+    const smoking = data.Smoking_Allowed__c || data.smokingAllowed || "N/A";
+    const availability = data.Available_From__c || data.availableFrom || "N/A";
+    const securityDeposit =
+      data.Security_Deposit__c || data.securityDeposit || "N/A";
+    const utilities =
+      data.Utilities_Included__c || data.utilitiesIncluded || "N/A";
+
     const propertyGallery = this.generatePropertyGalleryHTML();
 
+    // Build paginated gallery pages appended at the bottom
+    const allImages = Array.isArray(this.realPropertyImages)
+      ? this.realPropertyImages
+      : [];
+    const imagesPerPage = 7;
+    let galleryPagesHTML = "";
+    if (allImages.length > 0) {
+      for (let i = 0; i < allImages.length; i += imagesPerPage) {
+        const chunk = allImages.slice(i, i + imagesPerPage);
+        const chunkHTML = chunk
+          .map((img, idx) => {
+            const title =
+              img.title || img.pcrm__Title__c || `Property Image ${i + idx + 1}`;
+            const extraStyle = idx === chunk.length - 1 ? " grid-column: 1 / -1;" : "";
+            return `<img src=\"${img.url}\" alt=\"${title}\" style=\"width:100%; height:auto; display:block; break-inside: avoid; page-break-inside: avoid;${extraStyle}\"/>`;
+          })
+          .join("");
+        galleryPagesHTML += `
+    <div class=\"brochure-page\">\n        <div class=\"page-container\">\n            <header class=\"page-header\"><h1 class=\"page-title\">Property <span>Gallery</span></h1><span class=\"page-subtitle\">Visual Tour</span></header>\n            <main style=\"flex-grow:1\">\n                <div style=\"display:grid; grid-template-columns: 1fr 1fr; gap: 20px;\">${chunkHTML}</div>\n            </main>\n            <footer class=\"page-footer-bar\"><span class=\"property-name\">${propertyName}</span><span>Gallery</span></footer>\n        </div>\n    </div>`;
+      }
+    }
+
     return `<!DOCTYPE html>
 <html lang="en">
 <head>
@@ -3834,7 +4119,6 @@ export default class PropertyTemplateSelector extends LightningElement {
             overflow: hidden;
             position: relative;
         }
-
         /* --- PAGE 1: COVER PAGE --- */
         .cover-page {
             background-image: url('https://plus.unsplash.com/premium_photo-1677474827617-6a7269f97574?q=80&w=687&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');
@@ -4184,12 +4468,12 @@ export default class PropertyTemplateSelector extends LightningElement {
         <div class="cover-overlay"></div>
         <div class="cover-content">
             <div class="subtitle">An Urban Oasis</div>
-            <h1 class="main-title">THE VERTICE</h1>
-            <div class="address">18 Skyline Avenue, Metropolis Centre, MC 90210</div>
+            <h1 class="main-title">${propertyName}</h1>
+            <div class="address">${location}</div>
         </div>
         <div class="cover-footer">
-            <span>Residences Starting from $1,200,000</span>
-            <span>Ref ID: VP-2025-001</span>
+            <span>${price !== "Price on Request" ? `Residences Starting from ${price}` : "Price on Request"}</span>
+            <span>Ref ID: ${referenceId}</span>
         </div>
     </div>
 
@@ -4200,11 +4484,7 @@ export default class PropertyTemplateSelector extends LightningElement {
                 <span class="page-subtitle">Discover Your Sanctuary in the Sky</span>
             </header>
             <main class="vision-grid">
-                <div class="vision-text">
-                    <h3>Where Design Meets Desire.</h3>
-                    <p>The Vertice is not just a building; it's a bold statement on modern urban living. Conceived for the discerning individual, it offers a unique blend of architectural prowess, bespoke interiors, and an unparalleled lifestyle experience right in the heart of the city.</p>
-                    <p>Every residence is a testament to quality, featuring panoramic city views from floor-to-ceiling windows, intelligent home systems, and finishes selected from the finest materials around the globe. This is more than a home; it's a new perspective.</p>
-                </div>
+                <div class="vision-text"><h3>${propertyType} • ${status} • ${squareFeet} sq ft</h3>${description}</div>
                 <div class="vision-image"></div>
             </main>
             <footer class="page-footer-bar">
@@ -4220,13 +4500,7 @@ export default class PropertyTemplateSelector extends LightningElement {
                 <h1 class="page-title">Exquisite <span>Interiors</span></h1>
                 <span class="page-subtitle">A Canvas for Your Life</span>
             </header>
-            <main class="gallery-grid">
-                <div class="gallery-item g-item-1"><span>Open-Concept Living Space</span></div>
-                <div class="gallery-item g-item-2"><span>Master Bedroom Suite</span></div>
-                <div class="gallery-item g-item-3"><span>Gourmet Chef's Kitchen</span></div>
-                <div class="gallery-item g-item-4"><span>Spa-Inspired Bathroom</span></div>
-                <div class="gallery-item g-item-5"><span>Private Balcony Views</span></div>
-            </main>
+            <main class="gallery-grid" style="display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));grid-auto-rows:180px;gap:20px;">${propertyGallery}</main>
              <footer class="page-footer-bar">
                 <span class="property-name">THE VERTICE</span>
                 <span>Page 03 / 06</span>
@@ -4246,24 +4520,16 @@ export default class PropertyTemplateSelector extends LightningElement {
                 <div class="page4-content">
                     <div>
                         <h3 class="section-title">Lifestyle Amenities</h3>
-                        <ul class="amenities-list-p4">
-                            <li><i class="fa-solid fa-water-ladder"></i> Rooftop Infinity Pool</li>
-                            <li><i class="fa-solid fa-dumbbell"></i> Fitness Center</li>
-                            <li><i class="fa-solid fa-martini-glass-empty"></i> Residents' Sky Lounge</li>
-                            <li><i class="fa-solid fa-film"></i> Private Cinema Room</li>
-                            <li><i class="fa-solid fa-spa"></i> Wellness Spa & Sauna</li>
-                            <li><i class="fa-solid fa-briefcase"></i> Business Center</li>
-                            <li><i class="fa-solid fa-shield-halved"></i> 24/7 Concierge</li>
-                            <li><i class="fa-solid fa-car"></i> Secure Parking</li>
-                        </ul>
+                        <ul class="amenities-list-p4">${this.generateAmenitiesListItems(data)}</ul>
                     </div>
                     <div>
                         <h3 class="section-title">Key Specifications</h3>
-                        <div class="detail-item"><span class="label">Status</span> <span class="value">New Development</span></div>
-                        <div class="detail-item"><span class="label">Property Type</span> <span class="value">Condominium</span></div>
-                        <div class="detail-item"><span class="label">Year Built</span> <span class="value">2025</span></div>
-                        <div class="detail-item"><span class="label">Technology</span> <span class="value">Integrated Smart Home</span></div>
-                        <div class="detail-item"><span class="label">Design</span> <span class="value">Sustainable & Eco-Friendly</span></div>
+                        <div class="detail-item"><span class="label">Status</span> <span class="value">${status}</span></div>
+                        <div class="detail-item"><span class="label">Property Type</span> <span class="value">${propertyType}</span></div>
+                        <div class="detail-item"><span class="label">Year Built</span> <span class="value">${yearBuilt}</span></div>
+                        <div class="detail-item"><span class="label">Bedrooms</span> <span class="value">${bedrooms}</span></div>
+                        <div class="detail-item"><span class="label">Bathrooms</span> <span class="value">${bathrooms}</span></div>
+                        <div class="detail-item"><span class="label">Parking</span> <span class="value">${parking}</span></div>
                     </div>
                 </div>
             </main>
@@ -4334,12 +4600,12 @@ export default class PropertyTemplateSelector extends LightningElement {
                 <div>
                     <h3 class="section-title">Additional Information</h3>
                     <div class="additional-specs-grid">
-                        <div class="spec-item"><div class="label">Pets</div><div class="value">Allowed (w/ restrictions)</div></div>
-                        <div class="spec-item"><div class="label">Smoking</div><div class="value">In designated areas</div></div>
-                        <div class="spec-item"><div class="label">Availability</div><div class="value">Q4 2025</div></div>
-                        <div class="spec-item"><div class="label">Parking</div><div class="value">2 Spaces per Unit</div></div>
-                        <div class="spec-item"><div class="label">Security Deposit</div><div class="value">2 Months</div></div>
-                        <div class="spec-item"><div class="label">Utilities</div><div class="value">Sub-metered</div></div>
+                        <div class="spec-item"><div class="label">Pets</div><div class="value">${petFriendly}</div></div>
+                        <div class="spec-item"><div class="label">Smoking</div><div class="value">${smoking}</div></div>
+                        <div class="spec-item"><div class="label">Availability</div><div class="value">${availability}</div></div>
+                        <div class="spec-item"><div class="label">Parking</div><div class="value">${parking}</div></div>
+                        <div class="spec-item"><div class="label">Security Deposit</div><div class="value">${securityDeposit}</div></div>
+                        <div class="spec-item"><div class="label">Utilities</div><div class="value">${utilities}</div></div>
                     </div>
                 </div>
             </main>
@@ -4386,563 +4652,10 @@ export default class PropertyTemplateSelector extends LightningElement {
             </footer>
         </div>
     </div>
-
 </body>
 </html>
 `;
   }
-  /*
-    // Dynamic additional info
-    const petFriendly = data.Pet_Friendly__c || data.petFriendly || "N/A";
-    const smoking = data.Smoking_Allowed__c || data.smokingAllowed || "N/A";
-    const availability = data.Available_From__c || data.availableFrom || "N/A";
-    const utilities =
-      data.Utilities_Included__c || data.utilitiesIncluded || "N/A";
-
-    return `<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>${propertyName} - Luxury Brochure</title><link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;700;800&display=swap" rel="stylesheet"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"><style>:root{--color-dark:#111111;--color-light:#FFFFFF;--color-accent-green:#0A6847;--color-grey-bg:#F0F0F0;--color-text-dark:#222222;--color-text-light:#EFEFEF;--color-text-muted:#888888;--color-border:#DDDDDD;--font-main:'Inter',sans-serif}body{font-family:var(--font-main);background-color:#d8d8d8;display:flex;flex-direction:column;align-items:center;padding:50px;margin:0;gap:50px}.brochure-page{width:210mm;min-height:297mm;background-color:var(--color-light);box-shadow:0 15px 40px rgba(0,0,0,0.15);display:flex;flex-direction:column;overflow:visible;position:relative}.cover-page{color:var(--color-light);justify-content:center;align-items:center;text-align:center;position:relative}.cover-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(to top,rgba(0,0,0,0.8),rgba(0,0,0,0.3));z-index:1}.cover-bg{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;z-index:0}.cover-content{position:relative;z-index:2;padding:50px}.cover-content .subtitle{font-size:1rem;font-weight:500;letter-spacing:4px;text-transform:uppercase;color:rgba(255,255,255,0.8)}.cover-content .main-title{font-size:3rem;font-weight:800;line-height:1.1;margin:10px 0 20px 0}.cover-content .address{font-size:1rem;font-weight:400;border-top:1px solid var(--color-accent-green);display:inline-block;padding-top:20px}.cover-footer{position:absolute;bottom:40px;left:40px;right:40px;z-index:2;display:flex;justify-content:space-between;font-size:0.9rem;font-weight:500}.page-container{padding:70px;height:100%;display:flex;flex-direction:column;box-sizing:border-box}.page-header{display:flex;justify-content:space-between;align-items:baseline;border-bottom:1px solid var(--color-border);margin-bottom:20px}.page-title{font-size:2rem;font-weight:800;color:var(--color-dark)}.page-subtitle{font-size:1rem;font-weight:500;color:var(--color-text-muted)}.gallery-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:25px;min-height:180px;padding-top:10px}</style></head><body><div class="brochure-page cover-page"><img class="cover-bg" src="${this.getExteriorImageUrl()}" alt="Cover"/><div class="cover-overlay"></div><div class="cover-content"><h1 class="main-title">${propertyName}</h1><div class="address">${location}</div></div><div class="cover-footer"><span>${price}</span><span>Ref ID: ${referenceId}</span></div></div><div class="brochure-page"><div class="page-container"><header class="page-header"><h1 class="page-title">${propertyName}</h1><span class="page-subtitle">${propertyType}</span></header><main><div class="vision-text">${description}</div></main><footer class="page-footer-bar"><span class="property-name">${propertyName}</span></footer></div></div><div class="brochure-page"><div class="page-container"><header class="page-header"><h1 class="page-title">Property Gallery</h1><span class="page-subtitle">Visual Tour</span></header><main class="gallery-grid">${this.generatePropertyGalleryHTML()}</main><footer class="page-footer-bar"><span class="property-name">${propertyName}</span></footer></div></div></body></html>`;
-      interiorImage || exteriorImage
-    }" alt="Interior"/></div></main><footer class="page-footer-bar"><span class="property-name">${propertyName}</span><span>Page 02 / 07</span></footer></div></div><div class="brochure-page"><div class="page-container"><header class="page-header"><h1 class="page-title">Exquisite <span>Interiors</span></h1><span class="page-subtitle">A Canvas for Your Life</span></header><main class="gallery-grid" style="display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));grid-auto-rows:180px;gap:25px;">${propertyGallery}</main><footer class="page-footer-bar"><span class="property-name">${propertyName}</span><span>Page 03 / 07</span></footer></div></div><div class="brochure-page"><div class="page-container"><header class="page-header"><h1 class="page-title">Amenities & <span>Features</span></h1><span class="page-subtitle">Beyond the Expected</span></header><main class="page4-grid"><div class="page4-image"><img src="${this.getSmartImageForSection(
-      "interior",
-      "https://plus.unsplash.com/premium_photo-1675745330187-a6f001a21abe?q=80&w=687&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
-    )}" alt="Feature"/></div><div class="page4-content"><div><h3 class="section-title">Lifestyle Amenities</h3><ul class="amenities-list-p4">${amenitiesHTML}</ul></div><div><h3 class="section-title">Key Specifications</h3><div class="detail-item"><span class="label">Status</span> <span class="value">${status}</span></div><div class="detail-item"><span class="label">Property Type</span> <span class="value">${propertyType}</span></div><div class="detail-item"><span class="label">Year Built</span> <span class="value">${yearBuilt}</span></div><div class="detail-item"><span class="label">Floor</span> <span class="value">${
-      data.Floor__c || "N/A"
-    }</span></div><div class="detail-item"><span class="label">Maintenance Fee</span> <span class="value">${
-      data.Maintenance_Fee__c || "N/A"
-    }</span></div><div class="detail-item"><span class="label">Bedrooms</span> <span class="value">${bedrooms}</span></div><div class="detail-item"><span class="label">Bathrooms</span> <span class="value">${bathrooms}</span></div><div class="detail-item"><span class="label">Square Feet</span> <span class="value">${squareFeet}</span></div></div></div></div></main><footer class="page-footer-bar"><span class="property-name">${propertyName}</span><span>Page 04 / 07</span></footer></div></div><div class="brochure-page"><div class="page-container"><header class="page-header"><h1 class="page-title">Floor Plans & <span>Details</span></h1><span class="page-subtitle">Designed for Modern Life</span></header><main class="page5-main"><div class="floorplan-showcase"><div class="floorplan-image-p5"><img src="${this.getMapsImageUrl()}" alt="Residence Plan"/></div><div class="floorplan-info-p5"><h4>${bedrooms}-Bedroom Residence</h4><div class="floorplan-stats-p5"><div class="stat"><div class="value">${squareFeet}</div><div class="label">SQ. FT.</div></div><div class="stat"><div class="value">${bedrooms}</div><div class="label">BEDROOMS</div></div><div class="stat"><div class="value">${bathrooms}</div><div class="label">BATHROOMS</div></div><div class="stat"><div class="value">${parking}</div><div class="label">PARKING</div></div></div><p class="description">A thoughtfully designed space perfect for urban professionals or small families, combining comfort with panoramic city views.</p></div></div><div class="floorplan-showcase"><div class="floorplan-image-p5"><img src="${this.getMapsImageUrl()}" alt="Penthouse Plan"/></div><div class="floorplan-info-p5"><h4>Premium ${propertyType}</h4><div class="floorplan-stats-p5"><div class="stat"><div class="value">${squareFeet}</div><div class="label">SQ. FT.</div></div><div class="stat"><div class="value">${bedrooms}</div><div class="label">BEDROOMS</div></div><div class="stat"><div class="value">${bathrooms}</div><div class="label">BATHROOMS</div></div><div class="stat"><div class="value">${furnishing}</div><div class="label">FURNISHING</div></div></div><p class="description">The pinnacle of luxury living, this residence offers expansive spaces, premium finishes, and exclusive access to premium amenities.</p></div></div><div><h3 class="section-title">Additional Information</h3><div class="additional-specs-grid"><div class="spec-item"><div class="label">Pets</div><div class="value">${petFriendly}</div></div><div class="spec-item"><div class="label">Smoking</div><div class="value">${smoking}</div></div><div class="spec-item"><div class="label">Availability</div><div class="value">${availability}</div></div><div class="spec-item"><div class="label">Parking</div><div class="value">${parking}</div></div><div class="spec-item"><div class="label">Furnishing</div><div class="value">${furnishing}</div></div><div class="spec-item"><div class="label">Utilities</div><div class="value">${utilities}</div></div></div></div></main><footer class="page-footer-bar"><span class="property-name">${propertyName}</span><span>Page 05 / 07</span></footer></div></div><div class="brochure-page"><div class="page-container"><header class="page-header"><h1 class="page-title">Location & <span>Inquiry</span></h1><span class="page-subtitle">Your Future Awaits</span></header><main class="page6-main"><div><h3 class="section-title">Schedule a Private Viewing</h3><p>Experience ${propertyName} firsthand. Contact our sales executive to arrange an exclusive tour of the property and available residences.</p><div class="contact-person-p6"><div class="name">${agentName}</div><div class="title">Sales Executive, Elysian Properties</div><div class="details">${agentPhone}<br>${agentEmail}</div></div></div><div><h3 class="section-title">Neighborhood Highlights</h3><ul class="highlights-list-p6"><li><i class="fa-solid fa-tree-city"></i> <strong>Landmarks:</strong> ${landmarks}</li><li><i class="fa-solid fa-train-subway"></i> <strong>Transportation:</strong> ${transportation}</li><li><i class="fa-solid fa-school"></i> <strong>Schools:</strong> ${schools}</li><li><i class="fa-solid fa-cart-shopping"></i> <strong>Shopping:</strong> ${shopping}</li><li><i class="fa-solid fa-plane-departure"></i> <strong>Airport:</strong> ${airport}</li></ul></div></main><footer class="page-footer-bar"><span class="property-name">${propertyName}</span><span>Page 06 / 07</span></footer></div></div><div class="brochure-page"><div class="page-container"><header class="page-header"><h1 class="page-title">Property <span>Gallery</span></h1><span class="page-subtitle">Visual Tour</span></header><main style="flex-grow: 1; display: flex; flex-direction: column; justify-content: center;"><div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; padding: 20px;">${propertyGallery}</div></main><footer class="page-footer-bar"><span class="property-name">${propertyName}</span><span>Page 07 / 07</span></footer></div></div></body></html>`;
-  }*/
-
-  createSerenityHouseTemplate() {
-    const data = this.propertyData || {};
-
-    // Extract all available property data with fallbacks
-    const propertyName = data.Name || data.propertyName || "Property Name";
-    const location = data.Address__c || data.location || "Location";
-    const referenceId =
-      data.pcrm__Title_English__c || data.Name || data.propertyName || "";
-    const agentName =
-      data.contactName || data.Agent_Name__c || data.agentName || "N/A";
-    const agentPhone =
-      data.contactPhone || data.Agent_Phone__c || data.agentPhone || "N/A";
-    const agentEmail =
-      data.contactEmail || data.Agent_Email__c || data.agentEmail || "N/A";
-    const ownerName = data.Owner_Name__c || data.ownerName || "N/A";
-    const ownerPhone = data.Owner_Phone__c || data.ownerPhone || "N/A";
-    const ownerEmail = data.Owner_Email__c || data.ownerEmail || "N/A";
-
-    // Dynamic pricing with fallbacks
-    const price =
-      data.Sale_Price_Min__c ||
-      data.Rent_Price_Min__c ||
-      data.Price__c ||
-      data.salePriceMin ||
-      data.rentPriceMin ||
-      data.price ||
-      "Price on Request";
-    const priceDisplay =
-      price !== "Price on Request" ? `Offered at ${price}` : "Price on Request";
-
-    // Dynamic property details
-    const bedrooms = data.Bedrooms__c || data.bedrooms || "N/A";
-    const bathrooms = data.Bathrooms__c || data.bathrooms || "N/A";
-    const squareFeet =
-      data.Square_Feet__c || data.squareFeet || data.area || "N/A";
-    const propertyType = data.Property_Type__c || data.propertyType || "N/A";
-    const status = data.Status__c || data.status || data.offeringType || "N/A";
-    const yearBuilt =
-      data.Build_Year__c || data.yearBuilt || data.buildYear || "N/A";
-    const furnishing = data.Furnished__c || data.furnishing || "N/A";
-    const parking = data.Parking_Spaces__c || data.parking || "N/A";
-
-    // Dynamic description
-    const description = this.formatDescriptionForPDF(
-      data.Description_English__c ||
-        data.descriptionEnglish ||
-        data.description ||
-        "Property description not available."
-    );
-
-    // Get smart images
-    const exteriorImage = this.getExteriorImageUrl();
-    const interiorImage = this.getSmartImageForSection(
-      "interior",
-      "https://images.unsplash.com/photo-1616486338812-3dadae4b4ace?ixlib=rb-4.0.3&q=85&fm=jpg&crop=entropy&cs=srgb&w=1200"
-    );
-    const bedroomImage = this.getSmartImageForSection(
-      "bedroom",
-      "https://images.unsplash.com/photo-1586023492125-27b2c045efd7?ixlib=rb-4.0.3&q=85&fm=jpg&crop=entropy&cs=srgb&w=1200"
-    );
-
-    // Generate property gallery
-    const propertyGallery = this.generatePropertyGalleryHTML();
-
-    // Generate amenities from property data
-    const amenitiesHTML = this.generateAmenitiesHTML(data);
-
-    // Dynamic location details
-    const schools = data.Schools__c || data.schools || "N/A";
-    const shopping = data.Shopping_Centers__c || data.shoppingCenters || "N/A";
-    const hospitals = data.Hospitals__c || data.hospitals || "N/A";
-    const countryClub = data.Country_Club__c || data.countryClub || "N/A";
-    const airport = data.Airport_Distance__c || data.airportDistance || "N/A";
-
-    // Dynamic additional info
-    const petFriendly = data.Pet_Friendly__c || data.petFriendly || "N/A";
-    const smoking = data.Smoking_Allowed__c || data.smokingAllowed || "N/A";
-    const availability = data.Available_From__c || data.availableFrom || "N/A";
-    const utilities =
-      data.Utilities_Included__c || data.utilitiesIncluded || "N/A";
-
-    return `<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Editorial Real Estate Brochure - Updated - A4 Size</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&family=Cormorant+Garamond:wght@400;600;700&display=swap" rel="stylesheet">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
-    <style>
-        /* --- DESIGN SYSTEM & VARIABLES --- */
-        :root {
-            /* Color Palette */
-            --color-bg: #FFFFFF;
-            --color-off-white: #F8F7F5;
-            --color-text-primary: #333333;
-            --color-text-secondary: #777777;
-            --color-accent-beige: #D4C7B8;
-            --color-border: #EAEAEA;
-
-            /* Typography */
-            --font-serif: 'Cormorant Garamond', serif;
-            --font-sans: 'Lato', sans-serif;
-        }
-
-        /* --- Print Media Queries for A4 --- */
-        @media print {
-            @page {
-                size: A4;
-                margin: 0;
-            }
-            body {
-                margin: 0;
-                padding: 0;
-                background: white;
-            }
-            .brochure-page {
-                width: 210mm !important;
-                height: 297mm !important;
-                box-shadow: none !important;
-                page-break-after: always;
-            }
-            .brochure-page:last-child {
-                page-break-after: avoid;
-            }
-        }
-
-        /* --- GLOBAL & BODY STYLES --- */
-        body {
-            font-family: var(--font-sans);
-            background-color: #d8d8d8;
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            padding: 50px;
-            margin: 0;
-            gap: 50px;
-        }
-
-        .brochure-page {
-            width: 210mm;
-            height: 297mm;
-            background-color: var(--color-bg);
-            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
-            display: flex;
-            flex-direction: column;
-            overflow: hidden;
-            position: relative;
-        }
-
-        /* --- PAGE 1: FRONT COVER --- */
-        .p1-container {
-            display: flex;
-            height: 100%;
-        }
-        .p1-image-side {
-            flex: 1.2;
-            background-image: url('https://images.unsplash.com/photo-1600585154340-be6161a56a0c?ixlib=rb-4.0.3&q=85&fm=jpg&crop=entropy&cs=srgb&w=1200');
-            background-size: cover;
-            background-position: center;
-        }
-        .p1-content-side {
-            flex: 1;
-            padding: 70px 60px;
-            display: flex;
-            flex-direction: column;
-            justify-content: space-between;
-        }
-        .p1-header .collection {
-            font-size: 0.9rem;
-            letter-spacing: 3px;
-            color: var(--color-text-secondary);
-            text-transform: uppercase;
-        }
-        .p1-main-title {
-            font-family: var(--font-serif);
-            font-size: 5rem;
-            font-weight: 600;
-            line-height: 1.1;
-            color: var(--color-text-primary);
-            margin: 20px 0;
-        }
-        .p1-address {
-            font-size: 1rem;
-            color: var(--color-text-secondary);
-            border-left: 3px solid var(--color-accent-beige);
-            padding-left: 20px;
-        }
-         .p1-ref-id {
-            font-size: 0.9rem;
-            color: var(--color-text-secondary);
-            margin-top: 15px;
-            padding-left: 23px;
-        }
-        .p1-footer {
-            font-size: 0.9rem;
-            color: var(--color-text-secondary);
-        }
-        .p1-footer strong {
-            color: var(--color-text-primary);
-        }
-        .p1-footer .area {
-            font-size: 1rem;
-            color: var(--color-text-primary);
-            font-weight: 700;
-            margin-bottom: 10px;
-        }
-
-        /* --- SHARED STYLES for Content Pages --- */
-        .page-layout {
-            padding: 70px;
-            display: flex;
-            flex-direction: column;
-            height: 100%;
-            box-sizing: border-box;
-        }
-        .page-number {
-            position: absolute;
-            top: 70px; right: 70px;
-            font-family: var(--font-serif);
-            font-size: 1.2rem;
-            color: var(--color-text-secondary);
-        }
-        .page-title-main {
-            font-family: var(--font-serif);
-            font-size: 3.5rem;
-            font-weight: 600;
-            color: var(--color-text-primary);
-            margin: 0 0 15px 0;
-            line-height: 1;
-        }
-        .page-title-sub {
-            font-size: 1rem;
-            color: var(--color-text-secondary);
-            margin-bottom: 50px;
-        }
-        .content-divider {
-            border: 0;
-            height: 1px;
-            background-color: var(--color-border);
-            margin: 30px 0;
-        }
-        .section-title {
-            font-family: var(--font-serif);
-            font-size: 1.5rem;
-            font-weight: 600;
-            color: var(--color-text-primary);
-            margin-bottom: 20px;
-            margin-top: 0;
-        }
-        
-        /* --- PAGE 2: INTRODUCTION & NARRATIVE --- */
-        .p2-grid {
-            display: grid;
-            grid-template-columns: 1fr 1fr;
-            gap: 60px;
-            flex-grow: 1;
-        }
-        .p2-image {
-            background-image: url('https://images.unsplash.com/photo-1618221195710-dd6b41faaea6?ixlib=rb-4.0.3&q=85&fm=jpg&crop=entropy&cs=srgb&w=800');
-            background-size: cover;
-            background-position: center;
-        }
-        .p2-text p {
-            font-size: 1rem;
-            line-height: 1.8;
-            color: var(--color-text-secondary);
-        }
-        .p2-text p:first-of-type::first-letter {
-            font-family: var(--font-serif);
-            font-size: 4rem;
-            float: left;
-            line-height: 1;
-            margin-right: 15px;
-            color: var(--color-accent-beige);
-        }
-        .pull-quote {
-            border-left: 3px solid var(--color-accent-beige);
-            padding-left: 25px;
-            margin: 30px 0;
-            font-family: var(--font-serif);
-            font-size: 1.5rem;
-            font-style: italic;
-            color: var(--color-text-primary);
-        }
-        
-        /* --- PAGE 3: DETAILS & AMENITIES --- */
-        .p3-main-content { flex-grow: 1; }
-        .spec-grid {
-            display: grid;
-            grid-template-columns: repeat(4, 1fr);
-            gap: 30px;
-            padding: 30px;
-            background-color: var(--color-off-white);
-        }
-        .spec-item { text-align: center; }
-        .spec-item .value {
-            font-size: 2rem;
-            font-weight: 700;
-            color: var(--color-text-primary);
-        }
-        .spec-item .label {
-            font-size: 0.8rem;
-            text-transform: uppercase;
-            letter-spacing: 1px;
-            color: var(--color-text-secondary);
-        }
-        .details-grid {
-            display: grid;
-            grid-template-columns: repeat(2, 1fr);
-            gap: 15px 40px;
-        }
-        .details-item {
-            display: flex;
-            justify-content: space-between;
-            border-bottom: 1px solid var(--color-border);
-            padding-bottom: 10px;
-            font-size: 0.9rem;
-        }
-        .details-item .label { color: var(--color-text-secondary); }
-        .details-item .value { color: var(--color-text-primary); font-weight: 700; }
-        .amenities-list { list-style: none; padding: 0; column-count: 2; column-gap: 40px;}
-        .amenities-list li {
-            margin-bottom: 12px;
-            color: var(--color-text-secondary);
-            display: flex;
-            align-items: center;
-            font-size: 0.9rem;
-            -webkit-column-break-inside: avoid;
-            page-break-inside: avoid;
-            break-inside: avoid;
-        }
-        .amenities-list li i { color: var(--color-accent-beige); margin-right: 12px; }
-
-        /* --- PAGE 4: REVISED LAYOUT --- */
-        .p4-section-title {
-            font-size: 1rem;
-            font-weight: 700;
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            color: var(--color-text-primary);
-            margin: 0 0 20px 0;
-        }
-        .p4-floorplan-container {
-            height: 320px;
-            background-color: var(--color-off-white);
-            border: 1px solid var(--color-border);
-            background-image: url('https://cdn.shopify.com/s/files/1/0024/0495/3953/files/Architect_s_floor_plan_for_a_house_in_black_and_white_large.jpg');
-            background-size: contain;
-            background-position: center;
-            background-repeat: no-repeat;
-            margin-bottom: 40px;
-        }
-        .p4-info-grid {
-            display: grid;
-            grid-template-columns: 1fr 1fr;
-            gap: 60px;
-            margin-bottom: 40px;
-        }
-        .info-list .info-item, .location-list .item {
-            display: flex;
-            justify-content: space-between;
-            padding: 10px 0;
-            border-bottom: 1px solid var(--color-border);
-            font-size: 0.9rem;
-            color: var(--color-text-secondary);
-        }
-        .info-list .info-item strong, .location-list .item strong {
-            color: var(--color-text-primary);
-            margin-right: 15px;
-        }
-        .p4-contact-row {
-            display: flex;
-            gap: 40px;
-            justify-content: center;
-            margin-top: auto;
-        }
-        .contact-card {
-            background-color: var(--color-off-white);
-            padding: 20px;
-            text-align: center;
-            flex: 1;
-            max-width: 300px;
-        }
-        .contact-card .title {
-            font-size: 0.8rem;
-            text-transform: uppercase;
-            letter-spacing: 1px;
-            color: var(--color-text-secondary);
-            margin-bottom: 8px;
-        }
-        .contact-card .name { font-family: var(--font-serif); font-size: 1.5rem; font-weight: 600; }
-        .contact-card .phone, .contact-card .email { font-size: 0.9rem; margin: 4px 0; color: var(--color-text-secondary); }
-    </style>
-</head>
-<body>
-
-    <div class="brochure-page">
-        <div class="p1-container">
-            <div class="p1-image-side"></div>
-            <div class="p1-content-side">
-                <header class="p1-header">
-                    <div class="collection">Elysian Estates Collection</div>
-                    <h1 class="p1-main-title">The Serenity House</h1>
-                    <p class="p1-address">123 Luxury Lane, Prestige City, PC 45678</p>
-                    <p class="p1-ref-id">Reference ID: ES-8821</p>
-                </header>
-                <footer class="p1-footer">
-                    <div class="area">6,200 Sq. Ft. • 5 Bedrooms • 6 Bathrooms</div>
-                    An architectural marvel of curated living space.
-                    <br>
-                    <strong>Offered at $4,500,000</strong>
-                </footer>
-            </div>
-        </div>
-    </div>
-
-    <div class="brochure-page">
-        <div class="page-layout">
-            <span class="page-number">02</span>
-            <h1 class="page-title-main">A Sanctuary of Modern Design</h1>
-            <p class="page-title-sub">Where light, space, and nature converge to create an unparalleled living experience.</p>
-            <div class="p2-grid">
-                <div class="p2-text">
-                    <p>Designed by the world-renowned architect, Helena Vance, The Serenity House is more than a home; it is a living sculpture. Every line, material, and detail has been thoughtfully considered to evoke a sense of peace and connection with the surrounding landscape. Soaring ceilings and floor-to-ceiling glass walls dissolve the boundaries between inside and out, flooding the space with natural light.</p>
-                    <p class="pull-quote">A timeless residence built not just for living, but for thriving.</p>
-                    <p>The interior palette is a harmonious blend of natural oak, Italian travertine, and warm bronze accents, creating an atmosphere of understated luxury. This property represents a unique opportunity to own a piece of architectural history.</p>
-                </div>
-                <div class="p2-image"></div>
-            </div>
-        </div>
-    </div>
-    
-    <div class="brochure-page">
-        <div class="page-layout">
-            <span class="page-number">03</span>
-            <h1 class="page-title-main">Property Specifications</h1>
-            <p class="page-title-sub">A comprehensive overview of the property's features, details, and amenities.</p>
-            
-            <div class="p3-main-content">
-                <div class="spec-grid">
-                    <div class="spec-item"><div class="value">5</div><div class="label">Bedrooms</div></div>
-                    <div class="spec-item"><div class="value">6</div><div class="label">Bathrooms</div></div>
-                    <div class="spec-item"><div class="value">6,200</div><div class="label">Square Feet</div></div>
-                    <div class="spec-item"><div class="value">0.75</div><div class="label">Acres</div></div>
-                </div>
-
-                <hr class="content-divider">
-                
-                <h3 class="section-title">Property Details</h3>
-                <div class="details-grid">
-                    <div class="details-item"><span class="label">Status</span><span class="value">For Sale</span></div>
-                    <div class="details-item"><span class="label">Year Built</span><span class="value">2023</span></div>
-                    <div class="details-item"><span class="label">Type</span><span class="value">Single-Family Home</span></div>
-                    <div class="details-item"><span class="label">Furnishing</span><span class="value">Partially Furnished</span></div>
-                    <div class="details-item"><span class="label">Floor</span><span class="value">2 Levels</span></div>
-                    <div class="details-item"><span class="label">Maintenance Fee</span><span class="value">$1,200 / month</span></div>
-                    <div class="details-item"><span class="label">Parking</span><span class="value">3-Car Garage</span></div>
-                    <div class="details-item"><span class="label">Service Charge</span><span class="value">Included</span></div>
-                </div>
-
-                <hr class="content-divider">
-                
-                <h3 class="section-title">Amenities & Features</h3>
-                <ul class="amenities-list">
-                    <li><i class="fa-solid fa-check"></i> Primary Suite with Spa-Bath</li>
-                    <li><i class="fa-solid fa-check"></i> Radiant Heated Flooring</li>
-                    <li><i class="fa-solid fa-check"></i> Custom Walk-in Closets</li>
-                    <li><i class="fa-solid fa-check"></i> Smart Home Automation</li>
-                    <li><i class="fa-solid fa-check"></i> Infinity Edge Saline Pool</li>
-                    <li><i class="fa-solid fa-check"></i> Private Cinema Room</li>
-                    <li><i class="fa-solid fa-check"></i> Temperature-Controlled Wine Cellar</li>
-                    <li><i class="fa-solid fa-check"></i> Landscaped Gardens & Terrace</li>
-                    <li><i class="fa-solid fa-check"></i> Gourmet Chef's Kitchen</li>
-                    <li><i class="fa-solid fa-check"></i> Floor-to-Ceiling Glass Walls</li>
-                </ul>
-            </div>
-        </div>
-    </div>
-    
-    <div class="brochure-page">
-        <div class="page-layout">
-            <span class="page-number">04</span>
-            <h1 class="page-title-main" style="margin-bottom: 30px;">Floor Plan & Details</h1>
-            
-            <div class="p4-info-grid">
-                <div class="location-list">
-                    <h2 class="p4-section-title">Location & Nearby</h2>
-                    <div class="item"><strong>Schools</strong> <span>5 min drive</span></div>
-                    <div class="item"><strong>Shopping</strong> <span>10 min drive</span></div>
-                    <div class="item"><strong>Hospitals</strong> <span>12 min drive</span></div>
-                    <div class="item"><strong>Country Club</strong> <span>8 min drive</span></div>
-                    <div class="item"><strong>Airport</strong> <span>20 min drive</span></div>
-                </div>
-                <div class="info-list">
-                    <h2 class="p4-section-title">Additional Information</h2>
-                    <div class="info-item"><strong>Pet-Friendly</strong> <span>By Approval</span></div>
-                    <div class="info-item"><strong>Smoking</strong> <span>Not Permitted</span></div>
-                    <div class="info-item"><strong>Availability</strong> <span>Immediate</span></div>
-                    <div class="info-item"><strong>Utilities</strong> <span>Not Included</span></div>
-                </div>
-            </div>
-
-            <hr class="content-divider">
-
-            <h2 class="p4-section-title">Floor Plan & Location</h2>
-            <div class="p4-floorplan-container"></div>
-
-            <div class="p4-contact-row">
-                <div class="contact-card">
-                    <div class="title">Owner Information</div>
-                    <div class="name">John & Jane Doe</div>
-                    <p class="phone">(555) 111-2222</p>
-                    <p class="email">owner.serenity@email.com</p>
-                </div>
-                <div class="contact-card">
-                     <div class="title">Agent Information</div>
-                    <div class="name">Olivia Sterling</div>
-                    <p class="phone">(555) 987-6543</p>
-                    <p class="email">olivia@elysianestates.com</p>
-                </div>
-            </div>
-        </div>
-    </div>
-
-</body>
-</html>
-`;
-  }
-
   // Error handling methods
   clearError() {
     this.error = "";
@@ -5134,8 +4847,7 @@ export default class PropertyTemplateSelector extends LightningElement {
 
     return true;
   }
-
-  // ENHANCED BULLET FUNCTION
+  // Modern bullet and numbered list handling (no execCommand)
   handleBulletList() {
     const editorContent = this.template.querySelector(
       ".enhanced-editor-content"
@@ -5144,13 +4856,9 @@ export default class PropertyTemplateSelector extends LightningElement {
       this.showError("Editor not found");
       return;
     }
-
-    editorContent.focus();
-    // Use native command so selection toggles bullet list and supports nesting
-    document.execCommand("insertUnorderedList", false, null);
-    editorContent.dispatchEvent(new Event("input", { bubbles: true }));
+    this.insertList("ul");
   }
-  // ENHANCED NUMBERED LIST FUNCTION
+
   handleNumberedList() {
     const editorContent = this.template.querySelector(
       ".enhanced-editor-content"
@@ -5159,14 +4867,181 @@ export default class PropertyTemplateSelector extends LightningElement {
       this.showError("Editor not found");
       return;
     }
-
-    editorContent.focus();
-    // Use native command so selection toggles ordered list and supports nesting
-    document.execCommand("insertOrderedList", false, null);
-    editorContent.dispatchEvent(new Event("input", { bubbles: true }));
+    this.insertList("ol");
   }
 
-  // Alias for numbered list
+  // Unified list insertion method
+  insertList(listType) {
+    const editorContent = this.template.querySelector(
+      ".enhanced-editor-content"
+    );
+    const selection = window.getSelection();
+
+    editorContent.focus();
+
+    let range;
+    let selectedText = "";
+
+    if (selection.rangeCount > 0) {
+      range = selection.getRangeAt(0);
+      selectedText = range.toString().trim();
+    } else {
+      range = document.createRange();
+      range.selectNodeContents(editorContent);
+      range.collapse(false);
+      selection.removeAllRanges();
+      selection.addRange(range);
+    }
+
+    const currentList = this.findParentList(range.commonAncestorContainer);
+
+    if (currentList && currentList.tagName.toLowerCase() === listType.toLowerCase()) {
+      this.convertListToParagraph(currentList);
+      return;
+    }
+
+    if (currentList && currentList.tagName.toLowerCase() !== listType.toLowerCase()) {
+      this.convertListType(currentList, listType);
+      return;
+    }
+
+    this.createNewList(listType, selectedText, range);
+  }
+
+  // Find parent UL/OL from a node
+  findParentList(node) {
+    let current = node;
+    while (current && current !== document.body) {
+      if (current.nodeType === Node.ELEMENT_NODE) {
+        if (current.tagName === "UL" || current.tagName === "OL") return current;
+        if (current.tagName === "LI") return current.parentElement;
+      }
+      current = current.parentElement;
+    }
+    return null;
+  }
+
+  // Convert a list to paragraphs
+  convertListToParagraph(list) {
+    const listItems = Array.from(list.querySelectorAll("li"));
+    const fragment = document.createDocumentFragment();
+    listItems.forEach((li) => {
+      const p = document.createElement("p");
+      p.innerHTML = li.innerHTML || "List item";
+      p.style.margin = "8px 0";
+      fragment.appendChild(p);
+    });
+    list.parentNode.replaceChild(fragment, list);
+    this.showSuccess("List converted to paragraphs");
+  }
+
+  // Convert list type
+  convertListType(currentList, newListType) {
+    const newList = document.createElement(newListType);
+    const listItems = Array.from(currentList.querySelectorAll("li"));
+    listItems.forEach((li) => {
+      const newLi = li.cloneNode(true);
+      newList.appendChild(newLi);
+    });
+    this.styleList(newList);
+    currentList.parentNode.replaceChild(newList, currentList);
+    const name = newListType === "ul" ? "bullet" : "numbered";
+    this.showSuccess(`Converted to ${name} list`);
+  }
+
+  // Create and insert a new list
+  createNewList(listType, selectedText, range) {
+    const list = document.createElement(listType);
+
+    if (selectedText) {
+      const lines = selectedText.split("\n").filter((l) => l.trim());
+      if (lines.length > 1) {
+        lines.forEach((line) => {
+          const li = document.createElement("li");
+          li.textContent = line.trim();
+          li.contentEditable = true;
+          list.appendChild(li);
+        });
+      } else {
+        const li = document.createElement("li");
+        li.textContent = selectedText || "List item";
+        li.contentEditable = true;
+        list.appendChild(li);
+      }
+    } else {
+      const li = document.createElement("li");
+      li.textContent = "List item";
+      li.contentEditable = true;
+      list.appendChild(li);
+    }
+
+    this.styleList(list);
+
+    try {
+      range.deleteContents();
+      range.insertNode(list);
+      const firstLi = list.querySelector("li");
+      if (firstLi) {
+        const newRange = document.createRange();
+        newRange.selectNodeContents(firstLi);
+        newRange.collapse(false);
+        const sel = window.getSelection();
+        sel.removeAllRanges();
+        sel.addRange(newRange);
+        firstLi.focus();
+      }
+      const name = listType === "ul" ? "bullet" : "numbered";
+      this.showSuccess(`${name} list created`);
+    } catch (error) {
+      this.showError("Failed to create list");
+    }
+  }
+
+  // Apply styling to list and items
+  styleList(list) {
+    if (list.tagName === "UL") list.style.listStyleType = "disc";
+    if (list.tagName === "OL") list.style.listStyleType = "decimal";
+    list.style.paddingLeft = "22px";
+    list.style.margin = "0 0 8px 0";
+    list.style.lineHeight = "1.6";
+    const items = list.querySelectorAll("li");
+    items.forEach((li) => {
+      li.style.margin = "4px 0";
+      li.style.paddingLeft = "4px";
+      if (!li.hasAttribute("contenteditable")) li.contentEditable = true;
+      li.addEventListener("keydown", (e) => {
+        if (e.key === "Enter") {
+          e.preventDefault();
+          this.handleListItemEnter(e.target, list);
+        }
+      });
+    });
+  }
+
+  // Handle Enter in list items to add new item
+  handleListItemEnter(currentLi, list) {
+    const newLi = document.createElement("li");
+    newLi.textContent = "";
+    newLi.contentEditable = true;
+    newLi.style.margin = "4px 0";
+    newLi.style.paddingLeft = "4px";
+    newLi.addEventListener("keydown", (e) => {
+      if (e.key === "Enter") {
+        e.preventDefault();
+        this.handleListItemEnter(e.target, list);
+      }
+    });
+    currentLi.parentNode.insertBefore(newLi, currentLi.nextSibling);
+    newLi.focus();
+    const range = document.createRange();
+    range.setStart(newLi, 0);
+    range.collapse(true);
+    const selection = window.getSelection();
+    selection.removeAllRanges();
+    selection.addRange(range);
+  }
+
+  // Keep alias for backward compatibility
   handleNumberList() {
     this.handleNumberedList();
   }
@@ -5321,7 +5196,6 @@ export default class PropertyTemplateSelector extends LightningElement {
       optionsPanel.remove();
     }
   }
-
   // Insert content at selected position
   insertAtSelection(type) {
     if (!this.selectedElement) return;
@@ -5514,7 +5388,6 @@ export default class PropertyTemplateSelector extends LightningElement {
       popup.remove();
     }
   }
-
   // Create table element with enhanced drag and resize functionality
   createTableElement() {
     // Create the main table container with absolute positioning for drag/resize
@@ -5714,7 +5587,6 @@ export default class PropertyTemplateSelector extends LightningElement {
       controls.style.opacity = "0";
     });
   }
-
   // Table manipulation methods (updated for new structure)
   addTableRow(table) {
     const newRow = document.createElement("tr");
@@ -5916,7 +5788,6 @@ export default class PropertyTemplateSelector extends LightningElement {
     event.dataTransfer.setData("text/plain", "image");
     event.dataTransfer.effectAllowed = "move";
   }
-
   // Handle image drag end
   handleImageDragEnd(event) {
     // Remove any drag feedback
@@ -6033,30 +5904,92 @@ export default class PropertyTemplateSelector extends LightningElement {
   }
 
   handleIndent() {
-    const editorContent = this.template.querySelector(
-      ".enhanced-editor-content"
-    );
-    if (!editorContent) {
+    const editor = this.template.querySelector(".enhanced-editor-content");
+    if (!editor) {
       this.showError("Editor not found");
       return;
     }
-    editorContent.focus();
-    // For list contexts, execCommand handles nesting properly
-    document.execCommand("indent", false, null);
-    editorContent.dispatchEvent(new Event("input", { bubbles: true }));
+
+    const selection = window.getSelection();
+    if (!selection || selection.rangeCount === 0) {
+      editor.focus();
+      return;
+    }
+
+    const range = selection.getRangeAt(0);
+    // If inside a list item, increase nesting by wrapping current LI into a new nested UL
+    let li = range.commonAncestorContainer;
+    while (li && li.nodeType === Node.ELEMENT_NODE && li.tagName !== "LI") {
+      li = li.parentElement;
+    }
+    if (li && li.tagName === "LI") {
+      // Move LI into a nested list if not already first-level child of a nested list
+      const parentList = li.parentElement;
+      let prev = li.previousElementSibling;
+      if (!prev) {
+        // If no previous sibling, create a new empty LI to hold the nested list
+        prev = document.createElement("li");
+        prev.innerHTML = "";
+        parentList.insertBefore(prev, li);
+      }
+      let nested = prev.querySelector("ul, ol");
+      if (!nested) {
+        nested = document.createElement(parentList.tagName.toLowerCase());
+        prev.appendChild(nested);
+      }
+      nested.appendChild(li);
+      return;
+    }
+
+    // Otherwise insert a visible tab (4 spaces) at caret
+    editor.focus();
+    document.execCommand("insertText", false, "    ");
   }
 
   handleOutdent() {
-    const editorContent = this.template.querySelector(
-      ".enhanced-editor-content"
-    );
-    if (!editorContent) {
+    const editor = this.template.querySelector(".enhanced-editor-content");
+    if (!editor) {
       this.showError("Editor not found");
       return;
     }
-    editorContent.focus();
-    document.execCommand("outdent", false, null);
-    editorContent.dispatchEvent(new Event("input", { bubbles: true }));
+
+    const sel1 = window.getSelection();
+    if (!sel1 || sel1.rangeCount === 0) {
+      editor.focus();
+      return;
+    }
+
+    const range1 = sel1.getRangeAt(0);
+    // If inside a nested list, move LI up one level
+    let li = range1.commonAncestorContainer;
+    while (li && li.nodeType === Node.ELEMENT_NODE && li.tagName !== "LI") {
+      li = li.parentElement;
+    }
+    if (li && li.tagName === "LI") {
+      const parentList = li.parentElement; // UL/OL
+      const listContainer = parentList.parentElement; // LI or block
+      if (listContainer && listContainer.tagName === "LI") {
+        // Move current LI to be after its parent LI
+        listContainer.parentElement.insertBefore(li, listContainer.nextSibling);
+        return;
+      }
+    }
+
+    // Otherwise, remove one indentation level (4 leading spaces) from current line
+    editor.focus();
+    const sel2 = window.getSelection();
+    const range2 = sel2.getRangeAt(0);
+    let container = range2.startContainer.nodeType === Node.TEXT_NODE
+      ? range2.startContainer.parentElement
+      : range2.startContainer;
+    // Move up to a block element
+    while (container && !/^(P|DIV|LI|H1|H2|H3|H4|H5|H6)$/i.test(container.tagName)) {
+      container = container.parentElement;
+    }
+    if (container) {
+      const text = container.innerHTML.replace(/^(&nbsp;|\s){1,4}/, "");
+      container.innerHTML = text;
+    }
   }
 
   handleFontFamilyChange(event) {
@@ -6115,12 +6048,6 @@ export default class PropertyTemplateSelector extends LightningElement {
     const type = this.propertyData.Property_Type__c || "Property Type";
     this.insertTextAtCursor(type);
   }
-
-  insertPropertyBedrooms() {
-    const bedrooms = this.propertyData.Bedrooms__c || "0";
-    this.insertTextAtCursor(bedrooms + " Bedrooms");
-  }
-
   insertPropertyBathrooms() {
     const bathrooms = this.propertyData.Bathrooms__c || "0";
     this.insertTextAtCursor(bathrooms + " Bathrooms");
@@ -6445,7 +6372,6 @@ export default class PropertyTemplateSelector extends LightningElement {
 
     editor.hasDeselectHandler = true;
   }
-
   // Keep the deselectAllElements method as I suggested
   deselectAllElements() {
     const editor = this.template.querySelector(".enhanced-editor-content");
@@ -6635,7 +6561,6 @@ export default class PropertyTemplateSelector extends LightningElement {
     // Force a re-render by updating a tracked property
     this.forceRerender();
   }
-
   // Reset upload area to default state
   resetUploadArea() {
     const uploadArea = this.template.querySelector(".upload-area");
@@ -6832,7 +6757,6 @@ export default class PropertyTemplateSelector extends LightningElement {
       this.closeImageModal();
     }
   }
-
   // Insert draggable image element
   insertDraggableImage() {
     const input = document.createElement("input");
@@ -7032,7 +6956,6 @@ export default class PropertyTemplateSelector extends LightningElement {
         document.body.style.overflow = "";
       }
     };
-
     element.addEventListener("mousedown", handleMouseDown);
     document.addEventListener("mousemove", handleMouseMove);
     document.addEventListener("mouseup", handleMouseUp);
@@ -7043,10 +6966,14 @@ export default class PropertyTemplateSelector extends LightningElement {
         e.stopPropagation();
         element.classList.add("selected");
 
+        // Ensure controls (resize + delete) are visible on click
+        this.addResizeHandles(element);
+        this.addDeleteButton(element);
+
         // Remove selection from other elements
         const editor = element.closest(".enhanced-editor-content");
         if (editor) {
-          const allDraggable = editor.querySelectorAll(".draggable-element");
+          const allDraggable = editor.querySelectorAll(".draggable-element, .draggable-image-container, .draggable-table-container");
           allDraggable.forEach((el) => {
             if (el !== element) el.classList.remove("selected");
           });
@@ -7234,7 +7161,6 @@ export default class PropertyTemplateSelector extends LightningElement {
       this.showError("Please select an element first");
     }
   }
-
   setZIndex() {
     const zIndexInput = this.template.querySelector("#zIndexInput");
     const zIndex = parseInt(zIndexInput.value) || 0;
@@ -7539,9 +7465,9 @@ export default class PropertyTemplateSelector extends LightningElement {
     );
     allElements.forEach((el) => {
       el.classList.remove("selected");
-      el.style.border = el.classList.contains("draggable-text-box")
-        ? "2px solid #ddd"
-        : "2px solid #ddd";
+      // Do not use border to avoid layout shifts; use outline which doesn't affect layout
+      el.style.outline = "none";
+      el.style.outlineOffset = "0px";
 
       // Hide delete buttons
       const deleteBtn = el.querySelector(".delete-btn");
@@ -7552,18 +7478,22 @@ export default class PropertyTemplateSelector extends LightningElement {
 
     // Select current element
     element.classList.add("selected");
-    element.style.border = "2px solid #667eea";
+    // Use outline to show selection without affecting layout/position
+    element.style.outline = "2px solid #667eea";
+    element.style.outlineOffset = "0px";
 
-    // Show delete button
-    const deleteBtn = element.querySelector(".delete-btn");
+    // Show delete button (support both legacy and new class names)
+    const deleteBtn =
+      element.querySelector(".delete-btn") ||
+      element.querySelector(".delete-handle");
     if (deleteBtn) {
       deleteBtn.style.opacity = "1";
+      deleteBtn.style.display = "flex";
     }
 
     // Show selection handles
     this.showSelectionHandles(element);
   }
-
   // Show selection handles like Word/Google Docs
   showSelectionHandles(element) {
     // Remove existing handles
@@ -7759,7 +7689,6 @@ export default class PropertyTemplateSelector extends LightningElement {
     this.currentImageIndex = 0;
     this.currentImage = null;
   }
-
   selectCategory(event) {
     let category;
 
@@ -7955,7 +7884,6 @@ export default class PropertyTemplateSelector extends LightningElement {
     } else {
     }
   }
-
   previousImage() {
     if (this.currentImageIndex > 0) {
       this.currentImageIndex--;
@@ -8008,6 +7936,13 @@ export default class PropertyTemplateSelector extends LightningElement {
       editor.style.webkitUserSelect = "text";
       editor.style.cursor = "text";
 
+      // Ensure editor is a positioned container so absolutely positioned children
+      // (e.g., wrapped draggable images) are anchored relative to it, preventing jumps
+      const editorComputed = window.getComputedStyle(editor);
+      if (editorComputed.position === "static") {
+        editor.style.position = "relative";
+      }
+
       // Remove any potential pointer-events restrictions
       editor.style.pointerEvents = "auto";
 
@@ -8131,7 +8066,6 @@ export default class PropertyTemplateSelector extends LightningElement {
       (isPositionedOverlay && this.checkBackgroundImages(element))
     );
   }
-
   isTransparentTextElement(element, style) {
     // Text elements that are likely overlays
     const textTags = [
@@ -8481,7 +8415,6 @@ export default class PropertyTemplateSelector extends LightningElement {
       category: img.category || img.pcrm__Category__c || "None",
     }));
   }
-
   selectReplacementImage(event) {
     const imageUrl = event.currentTarget.dataset.imageUrl;
 
@@ -8668,7 +8601,6 @@ export default class PropertyTemplateSelector extends LightningElement {
         this.showError("Failed to update background image. Please try again.");
         return;
       }
-
       // Handle regular img elements
       if (this.selectedImageElement.tagName === "IMG") {
         this.selectedImageElement.src = newImageUrl;
@@ -9026,7 +8958,6 @@ export default class PropertyTemplateSelector extends LightningElement {
 
     return "";
   }
-
   // Direct method to get maps image URL
   getMapsImageUrl() {
     if (!this.realPropertyImages || this.realPropertyImages.length === 0) {
@@ -9224,7 +9155,6 @@ export default class PropertyTemplateSelector extends LightningElement {
   }
 
   // ===== TABLE DRAG AND DROP FUNCTIONALITY =====
-
   // Handle table drag start
   handleTableDragStart(event) {
     this.isDraggingTable = true;
@@ -9418,7 +9348,6 @@ export default class PropertyTemplateSelector extends LightningElement {
       thead.appendChild(headerRow);
       table.appendChild(thead);
     }
-
     // Add body rows
     for (let row = 0; row < tableData.rows; row++) {
       const tr = document.createElement("tr");
@@ -9608,7 +9537,6 @@ export default class PropertyTemplateSelector extends LightningElement {
     tableContainer.remove();
     this.showSuccess("Table deleted successfully!");
   }
-
   // Handle table drag start (for moving tables)
   handleTableContainerDragStart(event) {
     if (event.target.classList.contains("table-control-btn")) {
@@ -9743,6 +9671,9 @@ export default class PropertyTemplateSelector extends LightningElement {
     textElement.style.fontSize = "14px";
     textElement.style.lineHeight = "1.4";
 
+    // Add delete button/cross to text
+    this.addDeleteButton(textElement);
+
     // Add to editor
     editor.appendChild(textElement);
 
@@ -9801,7 +9732,6 @@ export default class PropertyTemplateSelector extends LightningElement {
     // Re-setup event handlers for any dynamic elements
     this.setupEditorEventHandlers();
   }
-
   redo() {
     if (this.redoStack.length === 0) return;
 
@@ -10002,7 +9932,6 @@ export default class PropertyTemplateSelector extends LightningElement {
       container.appendChild(resizeHandle);
     });
   }
-
   // Add delete handle to image
   addDeleteHandle(container) {
     const deleteHandle = document.createElement("button");
@@ -10214,6 +10143,7 @@ export default class PropertyTemplateSelector extends LightningElement {
         this.makeDraggable(container);
         this.addDeleteButton(container);
         this.highlightSelectedElement(container);
+        // Do NOT change position here; keep intact unless dragged
         return;
       }
       // Wrap plain image and add handles; preserve on-screen size and position
@@ -10225,13 +10155,24 @@ export default class PropertyTemplateSelector extends LightningElement {
       const currentWidth = element.offsetWidth;
       const currentHeight = element.offsetHeight;
 
+      // Insert a placeholder to avoid layout shift in the original flow
+      const placeholder = document.createElement("div");
+      placeholder.style.width = currentWidth + "px";
+      placeholder.style.height = currentHeight + "px";
+      placeholder.style.display = window.getComputedStyle(element).display || "inline-block";
+
       const container = document.createElement("div");
       container.className = "draggable-image-container";
-      container.style.position = "absolute";
+      container.style.position = "absolute"; // anchored to editor (set to relative elsewhere)
+      // Account for preview zoom scale to avoid displacement
+      const scale = this.zoom || 1;
       container.style.left =
-        rect.left - editorRect.left + (editor ? editor.scrollLeft : 0) + "px";
+        (rect.left - editorRect.left + (editor ? editor.scrollLeft : 0)) /
+          scale +
+        "px";
       container.style.top =
-        rect.top - editorRect.top + (editor ? editor.scrollTop : 0) + "px";
+        (rect.top - editorRect.top + (editor ? editor.scrollTop : 0)) / scale +
+        "px";
       container.style.zIndex =
         window.getComputedStyle(element).zIndex || "auto";
       container.style.display = "inline-block";
@@ -10240,15 +10181,18 @@ export default class PropertyTemplateSelector extends LightningElement {
       // Set container and image sizing
       container.style.width = currentWidth + "px";
       container.style.height = currentHeight + "px";
-      element.style.width = "100%";
-      element.style.height = "100%";
+      element.style.width = currentWidth + "px";
+      element.style.height = currentHeight + "px";
       element.style.display = "block";
-      element.style.objectFit = "cover";
+      element.style.objectFit = window.getComputedStyle(element).objectFit || "cover";
 
+      // Replace the image in the flow with placeholder, then move image to absolute container
+      const originalParent = element.parentNode;
+      originalParent.insertBefore(placeholder, element);
       if (editor) {
         editor.appendChild(container);
       } else {
-        element.parentNode.insertBefore(container, element);
+        originalParent.insertBefore(container, placeholder);
       }
       container.appendChild(element);
       container.classList.add("no-frame");
@@ -10362,7 +10306,6 @@ export default class PropertyTemplateSelector extends LightningElement {
 
   // Debug method to log current state
   logCurrentState() {}
-
   // Test method to manually set an image (for debugging)
   testSetImage() {
     this.selectedImageUrl =
@@ -10375,4 +10318,4 @@ export default class PropertyTemplateSelector extends LightningElement {
   connectedCallback() {
     this.loadSavedTemplates();
   }
-}
+}
\ No newline at end of file