<div class="wireframe-container">
  <!-- GrapesJS Editor + Sidebar -->
  <div class="app-container" *ngIf="currentPageHtml">
    <div class="canvas-container">
      <div #gjsContainer class="page-canvas"></div>
    </div>
  </div>

  <!-- No content message -->
  <div class="no-content" *ngIf="!currentPageHtml">
    <p *ngIf="totalPages === 0">No HTML pages found in localStorage.</p>
    <p *ngIf="totalPages > 0 && !currentPageHtml">Current page has no HTML content.</p>
  </div>


  <!-- Sticky Navigation buttons at bottom center -->
  <div class="sticky-navigation" *ngIf="totalPages > 1">
    <button 
      class="nav-btn prev-btn" 
      [disabled]="!hasPrevPage()" 
      (click)="prevPage()">
      ← Previous
    </button>
    <span class="page-indicator">
      {{ getCurrentPageNumber() }} / {{ totalPages }}
    </span>
    <button 
      class="nav-btn next-btn" 
      [disabled]="!hasNextPage()" 
      (click)="nextPage()">
      Next →
    </button>
  </div>
</div>