<!-- 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 -->
<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>