<!-- <div class="node-card">
  <h3>{{ node.title }}</h3>
  <div class="section" *ngFor="let sec of getSections(node.data)">
    <h4>{{ sec.title }}</h4>
    <p>{{ sec.description }}</p>
  </div>
</div>

<div class="children-container" *ngIf="getChildren(node.data).length">
  <svg class="connector-line">
    <path d="M 100 0 C 150 50, 150 50, 200 100" stroke="gray" fill="transparent"/>
  </svg>
  <div class="children">
    <app-tree-node *ngFor="let child of getChildren(node.data)" [node]="child"></app-tree-node>
  </div>
</div>
 -->

 <div class="visual-editor-container">
  <!-- Header Toolbar -->
  <!-- <div class="editor-header">
    <h2>Visual Site Structure Editor</h2>
    <div class="actions">
      <button class="btn secondary" (click)="resetEditor()">Reset</button>
      <button class="btn primary" *ngIf="rootPage" (click)="downloadJson()">Export JSON</button>
    </div>
  </div> -->

  <!-- JSON Input Form -->
  <!-- <div class="json-input-container" *ngIf="showJsonInput">
    <div class="card">
      <h3>Import Site Structure</h3>
      <textarea class="json-textarea" [(ngModel)]="jsonInput" placeholder="Paste your JSON here..."></textarea>
      <div class="error-message" *ngIf="errorMessage">{{ errorMessage }}</div>
      <button class="btn primary" (click)="parseJsonInput()">Load Structure</button>
    </div>
  </div> -->

  <!-- Visual Editor -->
  <div class="visual-editor" *ngIf="rootPage">
    <div class="sitemap-container">
      <!-- Root Page -->
      <div class="sitemap-row">
        <div class="sitemap-node root-node">
          <div class="node-header" [class.selected]="selectedPage === rootPage" (click)="selectPage(rootPage)">
            <i class="fas fa-sitemap"></i> Primary Sitemap
          </div>
        </div>
      </div>

      <!-- First Level - Home -->
      <div class="sitemap-row" *ngIf="rootPage.children && rootPage.children.length > 0">
        <div class="connector-vertical"></div>
        <div class="sitemap-node" *ngFor="let homePage of rootPage.children" 
             [class.selected]="selectedPage === homePage" 
             (click)="selectPage(homePage)">
          <div class="node-header">
            <i class="fas fa-home"></i> {{ homePage.name }}
          </div>
          <div class="node-content">
            <div class="section-item" *ngFor="let section of homePage.sections" 
                 [class.selected]="selectedSection === section" 
                 (click)="selectSection(section); $event.stopPropagation()">
              <div class="section-title">{{ section.type }}</div>
              <div class="section-content">{{ getSectionContentPreview(section.content) }}</div>
            </div>
          </div>
        </div>
      </div> 

      <!-- Second Level - Children Pages -->
      <ng-container *ngIf="getHomePageFromRoot() as homePage">
        <div class="sitemap-row multi-node-row" *ngIf="homePage?.children?.length">
          <div class="connector-horizontal"></div>
          <div class="sitemap-node child-node" *ngFor="let childPage of homePage.children" 
               [class.selected]="selectedPage === childPage" 
               (click)="selectPage(childPage)">
            <div class="connector-vertical"></div>
            <div class="node-header">
              <i class="fas fa-file"></i> {{ childPage.name }}
            </div>
            <div class="node-content">
              <div class="section-item" *ngFor="let section of childPage.sections" 
                   [class.selected]="selectedSection === section" 
                   (click)="selectSection(section); $event.stopPropagation()">
                <div class="section-title">{{ section.type }}</div>
                <div class="section-content">{{ getSectionContentPreview(section.content) }}</div>
              </div>
            </div>
          </div> <!-- closing .sitemap-node -->
        </div> <!-- closing .sitemap-row -->

        <!-- Third Level - Grandchildren Pages -->
        <ng-container *ngFor="let childPage of homePage.children">
          <div class="sitemap-row multi-node-row" *ngIf="childPage.children && childPage.children.length > 0">
            <div class="connector-sub"></div>
            <div class="sitemap-node grandchild-node" *ngFor="let grandchildPage of childPage.children" 
                 [class.selected]="selectedPage === grandchildPage" 
                 (click)="selectPage(grandchildPage)">
              <div class="connector-vertical"></div>
              <div class="node-header">
                <i class="fas fa-file-alt"></i> {{ grandchildPage.name }}
              </div>
              <div class="node-content">
                <div class="section-item" *ngFor="let section of grandchildPage.sections" 
                     [class.selected]="selectedSection === section" 
                     (click)="selectSection(section); $event.stopPropagation()">
                  <div class="section-title">{{ section.type }}</div>
                  <div class="section-content">{{ getSectionContentPreview(section.content) }}</div>
                </div>
              </div>
            </div> <!-- closing .sitemap-node -->
          </div> <!-- closing .sitemap-row -->
        </ng-container>
      </ng-container>
    </div>

    <!-- Property Editor Panel -->
    <div class="properties-panel" *ngIf="editMode">
      <div class="panel-header">
        <h3>{{ editMode === 'page' ? 'Page Properties' : 'Section Properties' }}</h3>
      </div>

      <div class="panel-content">
        <!-- Page Properties -->
        <div class="property-form" *ngIf="editMode === 'page' && selectedPage">
          <div class="form-group">
            <label>Page Name</label>
            <input type="text" [(ngModel)]="selectedPage.name" (change)="updatePage()">
          </div>

          <div class="form-actions">
            <button class="btn primary" (click)="updatePage()">Update</button>
            <button class="btn secondary" *ngIf="selectedPage !== rootPage && getParentPage(selectedPage)" 
                    (click)="deletePage(selectedPage, getParentPage(selectedPage))">Delete</button>
            <button class="btn secondary" *ngIf="canAddChildPage(selectedPage)" 
                    (click)="showAddChildForm = true">Add Child Page</button>
          </div>

          <div class="form-group" *ngIf="showAddChildForm">
            <label>New Child Page Name</label>
            <input type="text" [(ngModel)]="newPageName">
            <div class="form-actions">
              <button class="btn primary" [disabled]="!newPageName" 
                      (click)="addChildPage(selectedPage); showAddChildForm = false">Add</button>
              <button class="btn secondary" (click)="showAddChildForm = false">Cancel</button>
            </div>
          </div>

          <div class="form-group">
            <label>Add Section</label>
            <div class="section-type-input">
              <input type="text" [(ngModel)]="newSectionType" placeholder="Section type...">
              <button class="btn sm primary" (click)="addSectionType()">Add Type</button>
            </div>
            <select [(ngModel)]="newSectionType" *ngIf="availableSectionTypes.length > 0">
              <option value="">Select Section Type</option>
              <option *ngFor="let type of availableSectionTypes" [value]="type">{{ type }}</option>
            </select>
            <textarea *ngIf="newSectionType" [(ngModel)]="newSectionContent" placeholder="Section content..."></textarea>
            <button class="btn primary" [disabled]="!newSectionType" 
                    (click)="addSectionToPage(selectedPage)">Add Section</button>
          </div>
        </div>

        <!-- Section Properties -->
        <div class="property-form" *ngIf="editMode === 'section' && selectedSection && selectedPage">
          <div class="form-group">
            <label>Section Type</label>
            <div class="section-type-input">
              <input type="text" [(ngModel)]="selectedSection.type" (change)="updateSection()">
              <select [(ngModel)]="selectedSection.type" (change)="updateSection()" *ngIf="availableSectionTypes.length > 0">
                <option *ngFor="let type of availableSectionTypes" [value]="type">{{ type }}</option>
              </select>
            </div>
          </div>

          <div class="form-group">
            <label>Content</label>
            <textarea rows="8" [(ngModel)]="selectedSection.content" (change)="updateSection()"></textarea>
          </div>

          <div class="form-actions">
            <button class="btn primary" (click)="updateSection()">Update</button>
            <button class="btn secondary" (click)="deleteSection(selectedSection, selectedPage)">Delete</button>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Live JSON Output -->
  <!-- <div class="json-output-container" *ngIf="rootPage && currentOutputJson">
    <div class="card">
      <h3>Current JSON Structure</h3>
      <pre class="json-output">{{ currentOutputJson }}</pre>
    </div>
  </div> -->
</div>
