<!-- wireframe-renderer.component.html -->

<!-- <div class="p-4 border border-dashed m-2 bg-white">
    <h2 class="text-xl font-bold">{{ title }}</h2>
  
    <div *ngFor="let key of getKeys(node)">
      <div *ngIf="key !== 'Children'" class="pl-4">
        <p class="font-medium">{{ key }}</p>
        <div class="border p-2 m-2 bg-gray-50">{{ node[key] || 'Empty block' }}</div>
      </div>
    </div> -->

<!-- Recursively render children -->
<!-- <div class="pl-6 mt-4" *ngIf="node.Children">
      <app-wireframe-renderer
        *ngFor="let childKey of getKeys(node.Children)"
        [title]="childKey"
        [node]="node.Children[childKey]">
      </app-wireframe-renderer>
    </div>
  </div> -->



<!-- new  -->


<!-- All Pages Side-by-Side -->

<!-- Use safe binding with [innerHTML] -->
<!-- <style [innerHTML]="commonCss"></style> -->


<!-- <div class="canvas-wrapper">
  <div class="canvas-page" *ngFor="let pageName of objectKeys(pageSections)">
    <div class="canvas-header">
      <h3>{{ pageName }}</h3>
      <div class="canvas-actions">
        <button (click)="copyToClipboard(pageName)">📋</button>
        <button (click)="downloadHtml(pageName)">⬇️</button>
      </div>
    </div>

    <div *ngFor="let sectionName of objectKeys(pageSections[pageName])" class="canvas-section">
      <div [innerHTML]="pageSections[pageName][sectionName]"></div>
    </div>
  </div>
</div> -->


<!-- 🔁 Regenerate Button at top of wireframe page -->
<!-- part 2 code -->
<!-- 
<div style="text-align: right; margin: 10px 0;">
  <button (click)="regenerateAllModifiedSections()"
    style="background: orange; color: white; border: none; padding: 8px 14px; border-radius: 4px; cursor: pointer;">
    ♻️ Regenerate Modified
  </button>
</div>

<div style="text-align: right; margin: 10px 0;">

  <button (click)="uploadHtmlFiles(11096)"
    style="background: orange; color: white; border: none; padding: 8px 14px; border-radius: 4px; cursor: pointer;">
    >💾 Save All HTML Files</button>
</div>

<div class="canvas-wrapper">
  <div class="canvas-page" *ngFor="let pageName of objectKeys(pageSections)">
    <div class="canvas-header">
      <button (click)="regenerateWireframe(pageName)">♻️</button>

      <h3>{{ pageName }}</h3>
      <div class="canvas-actions">
        <button (click)="copyToClipboard(pageName)">📋</button>
        <button (click)="downloadHtml(pageName)">⬇️</button>
      </div>
    </div> -->

    <!-- ✅ Render whole page in one block -->
    <!-- <div class="canvas-section">
      <div [innerHTML]="pageSections[pageName]['FullPage']"></div>
    </div>
  </div>
</div> -->


<!-- part 3 -->
<!-- 🔁 Regenerate + Save Buttons -->
<div style="display: flex; justify-content: space-between; margin-bottom: 10px;">
  <div>
    <button (click)="regenerateAllModifiedSections()" style="background: orange; color: white; border: none; padding: 8px 14px; border-radius: 4px; cursor: pointer;">
      ♻️ Regenerate Modified
    </button>
    <button (click)="uploadHtmlFiles(37388)" style="background: green; color: white; border: none; padding: 8px 14px; border-radius: 4px; cursor: pointer;">
      💾 Save All HTML Files
    </button>
  </div>

  <div>
    <!-- Global Style Controls -->
    <select [(ngModel)]="liveStyles.fontSize">
      <option value="">Font Size</option>
      <option *ngFor="let size of ['12px', '14px', '16px', '18px', '20px', '24px', '28px']" [value]="size">{{ size }}</option>
    </select>

    <select [(ngModel)]="liveStyles.fontWeight">
      <option value="">Font Weight</option>
      <option *ngFor="let weight of ['normal', 'bold', 'lighter']" [value]="weight">{{ weight }}</option>
    </select>

    <select [(ngModel)]="liveStyles.textAlign">
      <option value="">Align</option>
      <option value="left">Left</option>
      <option value="center">Center</option>
      <option value="right">Right</option>
    </select>

    <input type="color" [(ngModel)]="liveStyles.color" title="Text Color" />
    <input type="color" [(ngModel)]="liveStyles.background" title="Background Color" />

    <button (click)="applyStyleToSelection()" style="background: #555; color: white; padding: 6px 10px; border-radius: 4px;">🎨 Apply Style</button>
  </div>
</div>

<!-- Navbar Link Manager -->
<!-- <div *ngIf="selectedNavbarPage" class="navbar-link-manager">
  <h3>🔗 Navbar Link Manager ({{ selectedNavbarPage }})</h3>

  <ul>
    <li *ngFor="let link of navbarLinks[selectedNavbarPage]; let i = index">
      <input [(ngModel)]="link.label" placeholder="Link Label" />
      <select [(ngModel)]="link.href">
        <option *ngFor="let page of availablePages" [value]="page.href">{{ page.label }}</option>
      </select>
      <button (click)="removeLink(selectedNavbarPage, i)">❌</button>
    </li>
  </ul>

  <button (click)="addLink(selectedNavbarPage)">➕ Add Link</button>
  <button (click)="applyNavbarChanges(selectedNavbarPage)">✅ Apply Changes</button>
</div> -->


 <!-- 🔗 Navbar Link Editor Modal -->
<div *ngIf="selectedNavbarPage" class="navbar-popup-overlay">
  <div class="navbar-popup-content">
    <h3>🔗 Navbar Link Manager ({{ selectedNavbarPage }})</h3>

    <ul>
      <li *ngFor="let link of navbarLinks[selectedNavbarPage]; let i = index">
        <input [(ngModel)]="link.label" placeholder="Link Label" />
        <select [(ngModel)]="link.href">
          <option *ngFor="let page of availablePages" [value]="page.href">{{ page.label }}</option>
        </select>
        <button (click)="removeLink(selectedNavbarPage, i)">❌</button>
      </li>
    </ul>

    <div style="margin-top: 10px;">
      <button (click)="addLink(selectedNavbarPage)">➕ Add Link</button>
      <button (click)="applyNavbarChanges(selectedNavbarPage)">✅ Apply</button>
      <button (click)="selectedNavbarPage = null">❌ Close</button>
    </div>
  </div>
</div>



<!-- ✅ Pages List -->
<div class="canvas-wrapper">
  <div class="canvas-page" *ngFor="let pageName of pageRenderOrder">
    <div class="canvas-header">
      <button (click)="regenerateWireframe(pageName)">♻️</button>
      <h3 (click)="selectNavbar(pageName)" style="cursor: pointer;">
        {{ pageName }} <span title="Edit Navbar">🧭</span>
      </h3>
      
      <div class="canvas-actions">
        <button (click)="copyToClipboard(pageName)">📋</button>
        <button (click)="downloadHtml(pageName)">⬇️</button>
      </div>
    </div>

    <!-- ✅ Render and Edit Section -->
    <div class="canvas-section">
      <div [innerHTML]="pageSections[pageName]?.FullPage"

           contenteditable="true"
           class="editable-html"
           (blur)="onEdit(pageName, $event)">
      </div>
    </div>
  </div>
</div>
