<div class="project-editor-layout" [class.project-editor-layout--drawer-open]="mobileDrawerOpen()">
  <a class="skip-link" href="#builder-main-content">{{ 'adminShell.skipToContent' | translate }}</a>
  @if (mobileDrawerOpen()) {
    <div class="project-editor-layout__backdrop" (click)="closeMobileDrawer()"></div>
  }

  <aside class="project-editor-layout__sidebar">
    <a class="project-editor-layout__brand" [routerLink]="overviewRoute()">
      <app-icon name="arrowLeft" [size]="16" />
      {{ 'builder.appName' | translate }}
    </a>
    <a class="project-editor-layout__dashboard-link" [routerLink]="dashboardRoute()">
      <app-icon name="home" [size]="16" />
      {{ 'builder.backToDashboard' | translate }}
    </a>
    <app-builder-property-search class="project-editor-layout__search" />
    <app-project-editor-nav (linkClicked)="closeMobileDrawer()" />
  </aside>

  <main id="builder-main-content" class="project-editor-layout__content" tabindex="-1">
    <header class="project-editor-layout__header">
      <button
        type="button"
        class="project-editor-layout__menu-toggle"
        [attr.aria-expanded]="mobileDrawerOpen()"
        [attr.aria-label]="(mobileDrawerOpen() ? 'builder.closeSidebar' : 'builder.openSidebar') | translate"
        (click)="toggleMobileDrawer()"
      >
        <app-icon name="menu" [size]="20" />
      </button>

      <div class="project-editor-layout__heading">
        <nav class="project-editor-layout__breadcrumb" [attr.aria-label]="'builder.breadcrumbRoot' | translate">
          <ol>
            <li><a [routerLink]="overviewRoute()">{{ 'builder.breadcrumbRoot' | translate }}</a></li>
            @if (activeGroup(); as group) {
              <li><span class="project-editor-layout__breadcrumb-sep" aria-hidden="true">/</span>{{ group.labelKey | translate }}</li>
            }
            <li><span class="project-editor-layout__breadcrumb-sep" aria-hidden="true">/</span><span aria-current="page">{{ sectionTitleKey() | translate }}</span></li>
          </ol>
        </nav>
        <div class="project-editor-layout__title-row">
          <h1>{{ sectionTitleKey() | translate }}</h1>
          @if (facade.status() === 'draft') {
            <span class="project-editor-layout__badge project-editor-layout__badge--draft">{{ 'builder.draftBadge' | translate }}</span>
          } @else {
            <span class="project-editor-layout__badge project-editor-layout__badge--published">{{ 'builder.publishedBadge' | translate }}</span>
          }
          @if (isModifiedActiveSection()) {
            <span class="project-editor-layout__badge project-editor-layout__badge--modified">{{ 'builder.modifiedBadge' | translate }}</span>
          }
        </div>
        @if (activeGroup(); as group) {
          <p class="project-editor-layout__description">{{ group.descriptionKey | translate }}</p>
        }
      </div>

      <button type="button" class="project-editor-layout__help-toggle" [attr.aria-expanded]="helpOpen()" (click)="toggleHelp()">
        <app-icon name="help" [size]="16" />
        {{ (helpOpen() ? 'builder.helpToggleHide' : 'builder.helpToggleShow') | translate }}
      </button>
    </header>

    @if (helpOpen() && activeGroup(); as group) {
      <section class="project-editor-layout__help" aria-label="{{ 'builder.helpToggleShow' | translate }}">
        <div>
          <h2>{{ 'builder.helpWhatIsThis' | translate }}</h2>
          <p>{{ group.purposeKey | translate }}</p>
        </div>
        <div>
          <h2>{{ 'builder.helpWhereVisible' | translate }}</h2>
          <p>{{ group.whereKey | translate }}</p>
        </div>
        <div>
          <h2>{{ 'builder.helpWhatIfSkip' | translate }}</h2>
          <p>{{ group.skipKey | translate }}</p>
        </div>
      </section>
    }

    @if (!bootstrap()) {
      <section class="project-editor-empty">
        <p>{{ 'common.loading' | translate }}</p>
      </section>
    } @else {
      <div class="project-editor-work-area" [class.project-editor-work-area--with-preview]="showLivePreview()">
        <section class="project-editor-stack">
          @if (canResetActiveSection()) {
            <div class="project-editor-section-actions">
              <app-button variant="danger" size="sm" (click)="resetActiveSection()">{{ 'builder.resetSection' | translate }}</app-button>
            </div>
          }
          @switch (activeSection()) {
            @case ('general') { <app-project-editor-general-section /> }
            @case ('branding') { <app-project-editor-branding-section /> }
            @case ('theme') { <app-project-editor-theme-section /> }
            @case ('header') { <app-project-editor-header-section /> }
            @case ('footer') { <app-project-editor-footer-section /> }
            @case ('homepage') { <app-project-editor-homepage-section /> }
            @case ('widgets') { <app-project-editor-widgets-section /> }
            @case ('static-pages') { <app-static-pages-editor /> }
            @case ('features') { <app-project-editor-features-section /> }
            @case ('languages') { <app-project-editor-languages-section /> }
            @case ('navigation') { <app-project-editor-navigation-section /> }
            @case ('preview') { <app-project-editor-preview-section /> }
          }
        </section>
        @if (showLivePreview()) {
          <aside class="project-editor-live-preview" aria-label="{{ 'builder.livePreviewTitle' | translate }}">
            <h2 class="project-editor-live-preview__title">{{ 'builder.livePreviewTitle' | translate }}</h2>
            <p class="project-editor-live-preview__hint">{{ 'builder.livePreviewHint' | translate }}</p>
            <app-builder-live-preview />
          </aside>
        }
      </div>
      <app-project-editor-save-bar />
    }
  </main>
</div>

<app-confirm-dialog
  [open]="resetSectionConfirmOpen()"
  [titleText]="'builder.confirmResetSection' | translate"
  [message]="'builder.confirmResetSection' | translate"
  [destructive]="true"
  (confirmed)="confirmResetActiveSection()"
  (cancelled)="resetSectionConfirmOpen.set(false)"
/>
