<!-- 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> -->
<!-- Controls and Actions Row -->


<!-- Editable HTML Area -->
<!-- <div class="editable-area" *ngIf="editMode">
  <div class="editable-header">
    <h3>Editing: {{ editingSection?.page }} > {{ editingSection?.section }}</h3>
    <button class="close-btn" (click)="closeEditMode()">×</button>
  </div>
  
  <div class="editable-content">
    <div 
      [innerHTML]="editingSectionHtml" 
      contenteditable="true" 
      class="editable-html" 
      (blur)="onSectionEdit($event)">
    </div>
  </div>
  
  <div class="editable-footer">
    <button class="action-btn save-edit-btn" (click)="saveSectionEdit()">
      Save Changes
    </button>
    <button class="action-btn cancel-edit-btn" (click)="closeEditMode()">
      Cancel
    </button>
  </div>
</div> -->


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


<div class="wireframe-editor">


  <div class="zoom-controls-new">
    <button class="zoom-btn" (click)="zoomIn()" title="Zoom In">
      <i class="fa fa-plus"></i>
    </button>
    <button class="zoom-btn" (click)="zoomOut()" title="Zoom Out">
      <i class="fa fa-minus"></i>
    </button>
    <button class="zoom-btn" (click)="resetZoom()" title="Reset Zoom">
      <i class="fa fa-expand"></i>
    </button>
  </div>

  <!-- Fixed Right Sidebar -->
  <div class="wireframe-controls-sidebar" [class.collapsed]="sidebarCollapsed" [class.mobile-open]="sidebarOpen"
    [class.visible]="sidebarOpen || !isMobile">

    <!-- Loading Overlay -->
    <!-- <div *ngIf="isLoading" class="loading-overlay">
    <mat-spinner diameter="40"></mat-spinner>
    <div class="loading-text">Generating Pages...</div>
  </div> -->

    <!-- Updated Close Button -->
    <div class="sidebar-header">
      <button (click)="toggleSidebar()" class="close-btn" style="
      background: none;
      border: none;
      color: #060606;
      cursor: pointer;
      padding: 8px;
      border-radius: 50%;
      transition: all 0.2s ease-in-out;
      font-size: 16px;
      ">
        <i class="fas" [ngClass]="sidebarCollapsed ? 'fa-chevron-left' : 'fa-chevron-right'"></i>
      </button>
      <h2>Wireframe Controls</h2>
    </div>

    <!-- Main Actions Section -->
    <div class="sidebar-content">

      <div class="control-section search-section fade-in-up" [@fadeIn]>
        <h3>
          <i class="fas fa-search" style="margin-right: 6px; color: #17a2b8;"></i>
          Search Sections
        </h3>

        <div class="search-container">
          <input type="text" class="search-input" [(ngModel)]="searchTerm" (input)="onSearchChange()"
            placeholder="Search sections...">
        </div>
      </div>






      <!-- Global Sections -->
      <div class="control-section fade-in-left" [@fadeIn]>
        <h3>
          <i class="fas fa-globe" style="margin-right: 6px; color: #6f42c1;"></i>
          Global Sections
        </h3>

        <div class="wf-section-list" *ngIf="getFilteredSections(globalSections).length">
          <div class="wf-section-item" *ngFor="let section of getFilteredSections(globalSections)"
            (click)="addSectionFromTemplate(section)">
            <div class="section-icon">
              <i [class]="section.icon"></i>
            </div>
            <div class="section-info">
              <div class="section-name">{{ section.type }}</div>
              <div class="section-desc">{{ section.description }}</div>
            </div>
          </div>
        </div>
      </div>

      <!-- Standard Sections -->
      <div class="control-section fade-in-left" [@fadeIn]>
        <h3>
          <i class="fas fa-th-large" style="margin-right: 6px; color: #fd7e14;"></i>
          Standard Sections
        </h3>

        <div class="wf-section-list" *ngIf="getFilteredSections(standardSections).length">
          <div class="wf-section-item" *ngFor="let section of getFilteredSections(standardSections)"
            (click)="addSectionFromTemplate(section)">
            <div class="section-icon">
              <i [class]="section.icon"></i>
            </div>
            <div class="section-info">
              <div class="section-name">{{ section.type }}</div>
              <div class="section-desc">{{ section.description }}</div>
            </div>
          </div>
        </div>
      </div>

      <!-- Custom Sections -->
      <div class="control-section fade-in-left" [@fadeIn]>
        <h3>
          <i class="fas fa-puzzle-piece" style="margin-right: 6px; color: #e83e8c;"></i>
          Custom Sections
        </h3>

        <div class="wf-section-list" *ngIf="getFilteredSections(customSections).length">
          <div class="wf-section-item" *ngFor="let section of getFilteredSections(customSections)"
            (click)="addSectionFromTemplate(section)">
            <div class="section-icon">
              <i [class]="section.icon"></i>
            </div>
            <div class="section-info">
              <div class="section-name">{{ section.type }}</div>
              <div class="section-desc">{{ section.description }}</div>
            </div>
            <button class="delete-custom-btn" (click)="deleteCustomSection($event, section)">
              <i class="fas fa-trash"></i>
            </button>
          </div>
        </div>

        <!-- Add Custom Section -->
        <div class="add-custom-section">
          <button class="action-btn secondary full-width" (click)="showAddCustomSectionModal()">
            <i class="fas fa-plus"></i>
            Add Custom Section
          </button>
        </div>
      </div>


      <!-- Additional Features Section -->
      <div class="control-section fade-in-up" [@fadeIn]>
        <h3>
          <i class="fas fa-tools" style="margin-right: 6px; color: #20c997;"></i>
          Additional Features
        </h3>

        <button class="action-btn primary" (click)="createHtmlFiles()">
          <i class="fas fa-save"></i>
          Save All HTML Files
        </button>

        <button class="action-btn secondary" (click)="recreateWireframe()">
          <i class="fas fa-redo"></i>
          Regenerate Wireframe
        </button>

        <button class="action-btn primary" (click)="showNavbarEditor()">
          <i class="fas fa-bars"></i>
          Navbar Editor
        </button>

        <button class="action-btn secondary" (click)="buildWireframe(37688)" [@buttonHover]>
          <i class="fas fa-hammer"></i>
          Build Wireframe
        </button>

        <button class="action-btn secondary" (click)="buildSiteBuilder()" [@buttonHover]>
          <i class="fas fa-hammer"></i>
          Build Site Builder
        </button>

        <button class="action-btn primary" (click)="goToWireFrameEdit()">
          <i class="fas fa-sync-alt"></i>
          Edit WireFrame
        </button>

        <button class="action-btn secondary">
          <i class="fas fa-external-link-alt"></i>
          {{ deployedUrl ? 'DEPLOYED URL: ' + deployedUrl : 'NO URL YET' }}
        </button>

      </div>

      <!-- Commented out sections as requested -->
      <!--
    <div class="control-section bounce-in" [@fadeIn]>
      <h3>
        <i class="fas fa-palette" style="margin-right: 6px; color: #fd7e14;"></i>
        Style Controls
      </h3>
      
      <div class="style-grid">
        <div class="form-group">
          <label>Font Size:</label>
          <select class="form-control" [(ngModel)]="liveStyles.fontSize">
            <option value="">Default</option>
            <option *ngFor="let size of fontSizes" [value]="size">{{ size }}</option>
          </select>
        </div>

        <div class="form-group">
          <label>Font Weight:</label>
          <select class="form-control" [(ngModel)]="liveStyles.fontWeight">
            <option value="">Default</option>
            <option *ngFor="let weight of fontWeights" [value]="weight">{{ weight }}</option>
          </select>
        </div>
      </div>

      <div class="color-controls">
        <div class="color-input-group">
          <span class="color-label">
            <i class="fas fa-font" style="margin-right: 4px;"></i>
            Text Color
          </span>
          <input type="color" [(ngModel)]="liveStyles.color" class="color-picker" />
        </div>
        
        <div class="color-input-group">
          <span class="color-label">
            <i class="fas fa-fill-drip" style="margin-right: 4px;"></i>
            Background
          </span>
          <input type="color" [(ngModel)]="liveStyles.background" class="color-picker" />
        </div>
      </div>

      <button class="action-btn primary full-width" (click)="applyStyleToSelection()">
        <i class="fas fa-paint-brush"></i>
        Apply Style to Selection
      </button>
    </div>
    -->

      <!--
    <div class="control-section fade-in-up" [@fadeIn]>
      <h3>
        <i class="fas fa-file-alt" style="margin-right: 6px; color: #dc3545;"></i>
        Page Management
      </h3>
      
      <button class="action-btn secondary" (click)="addNewPage()">
        <i class="fas fa-plus"></i>
        Add New Page
      </button>

      <button class="action-btn secondary" (click)="duplicateCurrentPage()">
        <i class="fas fa-copy"></i>
        Duplicate Current Page
      </button>

      <button class="action-btn secondary" (click)="deleteCurrentPage()" 
              [disabled]="pageRenderOrder.length <= 1">
        <i class="fas fa-trash"></i>
        Delete Current Page
      </button>
    </div>
    -->

      <!--
    <div class="control-section fade-in-up" [@fadeIn]>
      <h3>
        <i class="fas fa-tools" style="margin-right: 6px; color: #6f42c1;"></i>
        Additional Tools
      </h3>
      
      <button class="action-btn secondary" (click)="exportProject()">
        <i class="fas fa-download"></i>
        Export Project
      </button>

      <button class="action-btn secondary" (click)="importProject()">
        <i class="fas fa-upload"></i>
        Import Project
      </button>

      <button class="action-btn secondary" (click)="previewMode()">
        <i class="fas fa-eye"></i>
        Preview Mode
      </button>

      <button class="action-btn secondary" (click)="addNewSectionToCurrentPage()">
        <i class="fas fa-plus-square"></i>
        Add Section
      </button>
    </div>
    -->
    </div>
  </div>

  <!-- Main Canvas Area -->
  <div class="canvas-main-area" [class.sidebar-collapsed]="sidebarCollapsed">
    <div class="wireframe-controls-sidebar-overlay" *ngIf="sidebarOpen && !isMobile" (click)="sidebarOpen = false">

    </div>


    <!-- Infinite Grid Background -->
    <div class="infinite-grid" [style.transform]="getGridTransform()"></div>

    <!-- Zoom Controls -->

    <!-- Canvas Container -->
    <div class="canvas-container" [class.panning]="isPanning" (mousedown)="startPan($event)" (mousemove)="doPan($event)"
      (mouseup)="endPan()" (mouseleave)="endPan()" (wheel)="onWheel($event)">

      <!-- Loading Overlay -->
      <!-- Updated Loading Overlay -->
      <div *ngIf="isLoading" class="loading-overlay" [@fadeIn]>
        <div class="loading-container">
          <mat-spinner diameter="50" color="accent"></mat-spinner>
          <div class="loading-text">Building Interface...</div>
          <div class="loading-subtext">Please wait while we prepare your components</div>
          <div class="progress-bar">
            <div class="progress-fill" [style.width.%]="loadProgress"></div>
          </div>
        </div>
      </div>

      <!-- Updated single page container with minimal header and full height -->
      <!-- Replace your current "all-pages-grid-container" section with this -->
      <div *ngIf="!isLoading" class="single-page-container" [style.transform]="getPageTransform()">
        <div class="page-info">
          <h2 class="current-page-title">{{ getCurrentPageName() }}</h2>
          <span class="page-counter">Page {{ currentPageIndex + 1 }} of {{ pageRenderOrder.length }}</span>
        </div>
        <div class="single-page-wrapper">
          <div *ngIf="pageRenderOrder.length > 0" class="current-page-card">

            <!-- Page Content -->
            <div class="page-content-area">
              <!-- Sections for current page -->
              <div class="connected-sections" cdkDropList [cdkDropListData]="getPageSections(getCurrentPageName())"
                [cdkDropListConnectedTo]="allConnectedLists"
                (cdkDropListDropped)="onSectionDrop($event, getCurrentPageName())">

                <div *ngFor="let sectionKey of getPageSections(getCurrentPageName())" cdkDrag [cdkDragData]="sectionKey"
                  class="section-container" [class.editing]="isCurrentSectionEditing(sectionKey)">

                  <!-- Drag Handle -->
                  <div class="drag-handle" cdkDragHandle>
                    <i class="fas fa-grip-vertical"></i>
                  </div>

                  <!-- Section Content -->
                  <div class="section-content" [innerHTML]="getSectionHtml(getCurrentPageName(), sectionKey)"
                    [attr.contenteditable]="isCurrentSectionEditing(sectionKey)"
                    (blur)="handleDirectContentEdit($event, getCurrentPageName(), sectionKey)">
                  </div>

                  <!-- Section Overlay -->
                  <div class="section-overlay" *ngIf="!isCurrentSectionEditing(sectionKey)">
                    <div class="section-label">{{sectionKey}}</div>
                  </div>
                </div>

                <!-- Empty State for Sections -->
                <div *ngIf="getPageSections(getCurrentPageName()).length === 0" class="empty-sections">
                  <div class="empty-state-modern">
                    <i class="fas fa-plus-circle"></i>
                    <h3>No sections yet</h3>
                    <p>Add sections from the sidebar to get started</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- Empty State for No Pages -->
        <div *ngIf="pageRenderOrder.length === 0" class="empty-pages-modern">
          <div class="empty-state-modern">
            <i class="fas fa-file-plus"></i>
            <h2>No Pages Created Yet</h2>
            <p>Create your first page to start building your wireframe</p>
            <button class="action-btn-modern primary-btn" (click)="createFirstPage()">
              <i class="fas fa-plus"></i>
              <span>Create First Page</span>
            </button>
          </div>
        </div>
      </div>

      <div class="page-actions">

        <!-- Show Code Button -->
        <button class="action-btn-modern copy-btn" (click)="showCode()">
          <i class="fas fa-code"></i>
          Show Code
        </button>

        <button class="action-btn-modern copy-btn" (click)="copyPageToClipboard()">
          <i class="fas fa-copy"></i>
          Copy Page
        </button>

        <button class="action-btn-modern download-btn" (click)="downloadHtml(getCurrentPageName())">
          <i class="fas fa-download"></i>
          Download Page
        </button>
      </div>

      <!-- Show Code Modal -->

      <!-- Code Edit Modal -->
      <div *ngIf="showCodeModal" class="code-modal-overlay">
        <div class="code-modal">
          <div class="code-modal-header">
            <h3>Edit Code – {{ currentEditingPage }}</h3>
            <button class="close-btn" (click)="cancelEdit()">×</button>
          </div>

          <textarea [(ngModel)]="editableHtml" class="code-textarea"></textarea>

          <div class="code-modal-footer">
            <button class="action-btn-modern" (click)="saveEditedCode()">Save</button>
            <button class="action-btn-modern" (click)="cancelEdit()">Cancel</button>
          </div>
        </div>
      </div>

      <!-- Page Navigation Controls -->
      <div *ngIf="!isLoading && pageRenderOrder.length > 0" class="page-navigation">
        <button class="nav-btn" (click)="previousPage()" [disabled]="currentPageIndex <= 0" title="Previous Page">
          <i class="fas fa-chevron-left"></i>
          Previous
        </button>

        <div class="page-indicator">
          <span class="page-number">{{ currentPageIndex + 1 }}</span>
          <span class="page-separator">/</span>
          <span class="total-pages">{{ pageRenderOrder.length }}</span>
          <div class="page-title">{{ getCurrentPageName() }}</div>
        </div>

        <button class="nav-btn" (click)="nextPage()" [disabled]="currentPageIndex >= pageRenderOrder.length - 1"
          title="Next Page">
          Next
          <i class="fas fa-chevron-right"></i>
        </button>
      </div>
    </div>

    <!-- Mobile Sidebar Toggle (Hidden on Desktop) -->
    <button class="mobile-sidebar-toggle" (click)="toggleMobileSidebar()" [class.active]="sidebarOpen"
      style="display: none; position: fixed; top: 20px; right: 20px; z-index: 1600; background: #212529; color: white; border: none; padding: 12px; border-radius: 50%; font-size: 16px;"
      *ngIf="isMobile">
      <i class="fas" [ngClass]="sidebarOpen ? 'fa-times' : 'fa-bars'"></i>
    </button>

    <!-- Navbar Editor Modal -->

    <!-- Updated Navbar Editor Modal -->
    <div class="modal-overlay" *ngIf="showNavbarEditorModal" [@fadeIn] (click)="closeNavbarEditorModal()">
      <div class="modal-content navbar-editor-modal" (click)="$event.stopPropagation()" [@slideIn]>

        <div class="modal-header">
          <h3>
            <i class="fas fa-bars" style="margin-right: 8px; color: #17a2b8;"></i>
            Navbar Editor
          </h3>
          <button class="close-btn" (click)="closeNavbarEditorModal()">
            <i class="fas fa-times"></i>
          </button>
        </div>

        <div class="modal-body">
          <!-- Page Selection -->
          <div class="form-group">
            <label for="navbarPageSelect">Select Page:</label>
            <select id="navbarPageSelect" class="form-control" [(ngModel)]="selectedNavbarPage"
              (change)="onNavbarPageChange()" [@focusBorder]>
              <option value="">Choose a page...</option>
              <option *ngFor="let page of pageRenderOrder" [value]="page">
                <i class="fas fa-file-alt"></i> {{ page }}
              </option>
            </select>
          </div>

          <!-- Navbar Links -->
          <div *ngIf="selectedNavbarPage" class="navbar-links-section">
            <h4>Navbar Links</h4>
            <div class="navbar-link-item" *ngFor="let link of currentNavbarLinks; let i = index" [@fadeIn]>
              <div class="link-inputs">
                <div class="form-group">
                  <label>Link Text:</label>
                  <input type="text" [(ngModel)]="link.label" placeholder="Link Label" class="form-control">
                </div>
                <div class="form-group">
                  <label>Link URL:</label>
                  <select [(ngModel)]="link.href" class="form-control">
                    <option value="">Select page...</option>
                    <option *ngFor="let page of availablePages" [value]="page.href">{{ page.label }}</option>
                    <option value="custom">Custom URL...</option>
                  </select>
                  <input *ngIf="link.href === 'custom'" type="text" [(ngModel)]="link.customUrl"
                    placeholder="Enter custom URL" class="form-control mt-2">
                </div>
                <button class="remove-btn" (click)="removeNavbarLink(i)" title="Remove Link">
                  <i class="fas fa-trash"></i>
                </button>
              </div>
            </div>

            <button class="action-btn secondary full-width" (click)="addNavbarLink()">
              <i class="fas fa-plus"></i>
              Add New Link
            </button>
          </div>
        </div>

        <div class="modal-footer">
          <button class="action-btn secondary" (click)="closeNavbarEditorModal()">
            <i class="fas fa-times" style="margin-right: 5px;"></i>
            Cancel
          </button>
          <button class="action-btn primary" (click)="saveNavbarChanges()">
            <i class="fas fa-check" style="margin-right: 5px;"></i>
            Save Changes
          </button>
        </div>
      </div>
    </div>

    <!-- Add Custom Section Modal -->
    <div class="modal-overlay" *ngIf="showAddCustomModal" [@fadeIn] (click)="closeAddCustomModal()">
      <div class="modal-content" (click)="$event.stopPropagation()" [@slideIn]>

        <div class="modal-header">
          <h3>
            <i class="fas fa-plus-circle" style="margin-right: 8px; color: #28a745;"></i>
            Add Custom Section
          </h3>
          <button class="close-btn" (click)="closeAddCustomModal()">
            <i class="fas fa-times"></i>
          </button>
        </div>

        <div class="modal-body">
          <div class="form-group">
            <label for="customSectionName">
              <i class="fas fa-tag" style="margin-right: 4px;"></i>
              Section Name:
            </label>
            <input id="customSectionName" type="text" [(ngModel)]="newCustomSectionName"
              placeholder="Enter section name (e.g., Custom Header, Special CTA)" class="form-control">
          </div>

          <div class="form-group">
            <label for="customSectionDesc">
              <i class="fas fa-align-left" style="margin-right: 4px;"></i>
              Section Description:
            </label>
            <textarea id="customSectionDesc" [(ngModel)]="newCustomSectionDesc" rows="4"
              placeholder="Describe the content and purpose of this custom section..." class="form-control"></textarea>
          </div>

          <div class="form-group">
            <label for="customSectionIcon">
              <i class="fas fa-icons" style="margin-right: 4px;"></i>
              Icon Class:
            </label>
            <input id="customSectionIcon" type="text" [(ngModel)]="newCustomSectionIcon"
              placeholder="e.g., fas fa-star, fas fa-rocket" class="form-control">
          </div>
        </div>

        <div class="modal-footer">
          <button class="action-btn secondary" (click)="closeAddCustomModal()">
            <i class="fas fa-times" style="margin-right: 5px;"></i>
            Cancel
          </button>
          <button class="action-btn primary" [disabled]="!newCustomSectionName || !newCustomSectionDesc"
            (click)="confirmAddCustomSection()">
            <i class="fas fa-plus" style="margin-right: 5px;"></i>
            Add Custom Section
          </button>
        </div>
      </div>
    </div>
    <!-- Modal for Adding New Page -->
    <div class="modal-overlay" *ngIf="showNewPageModal" [@fadeIn] (click)="closeNewPageModal()">
      <div class="modal-content" (click)="$event.stopPropagation()" [@slideIn]>

        <div class="modal-header">
          <h3>
            <i class="fas fa-file-plus" style="margin-right: 8px; color: #28a745;"></i>
            Add New Page
          </h3>
          <button class="close-btn" (click)="closeNewPageModal()">
            <i class="fas fa-times"></i>
          </button>
        </div>

        <div class="modal-body">
          <div class="form-group">
            <label for="pageName">
              <i class="fas fa-file-alt" style="margin-right: 4px;"></i>
              Page Name:
            </label>
            <input id="pageName" type="text" [(ngModel)]="newPageName"
              placeholder="Enter page name (e.g., Home, About, Contact)" class="form-control">
          </div>

          <div class="form-group">
            <label for="pageDescription">
              <i class="fas fa-align-left" style="margin-right: 4px;"></i>
              Page Description:
            </label>
            <textarea id="pageDescription" [(ngModel)]="newPageDescription" rows="3"
              placeholder="Describe the purpose and content of this page..." class="form-control"></textarea>
          </div>
        </div>

        <div class="modal-footer">
          <button class="action-btn secondary" (click)="closeNewPageModal()">
            <i class="fas fa-times" style="margin-right: 5px;"></i>
            Cancel
          </button>
          <button class="action-btn primary" [disabled]="!newPageName.trim()" (click)="confirmAddPage()">
            <i class="fas fa-plus" style="margin-right: 5px;"></i>
            Add Page
          </button>
        </div>
      </div>
    </div>

  </div>