@if (!homePage()) {
<app-section-card [title]="'builder.homepage' | translate">
  <app-empty-state [title]="'builder.homepageEmptyTitle' | translate" [description]="'builder.homepageEmptyDesc' | translate" />
</app-section-card>
} @else {
<app-homepage-overview />
<app-section-card [title]="'builder.homepage' | translate">
  @if (fieldError('pages'); as msg) {
    <p class="editor-error" role="alert">{{ msg }}</p>
  }
  <p class="field-desc">{{ 'builder.homepageBlocksHint' | translate }}</p>

  <div cdkDropList class="block-list" (cdkDropListDropped)="drop($event)">
    @for (section of sections(); track section.id; let first = $first; let last = $last) {
      <div class="block-card" cdkDrag [class.block-card--hidden]="section.visible === false">
        <div class="block-card__handle" cdkDragHandle [attr.aria-label]="'builder.dragToReorder' | translate">
          <app-icon name="grip" [size]="16" />
        </div>

        <div class="block-card__preview" [appHighlightSource]="'block:' + section.id">
          <app-icon [name]="blockIcon(section.type)" [size]="20" />
        </div>

        <div class="block-card__body">
          <div class="block-card__title-row">
            <strong>{{ blockLabel(section.type) }}</strong>
            @if (section.visible === false) {
              <span class="block-card__hidden-badge">{{ 'builder.widgetHidden' | translate }}</span>
            }
          </div>
          <p class="block-card__desc">{{ blockDescription(section.type) }}</p>

          <div class="editor-grid two compact">
            <app-form-field
              appHighlightSource="layout"
              [label]="'builder.layoutStrategyLabel' | translate"
              [usedBy]="[blockLabel(section.type)]"
              [usedByLabel]="'builder.usedByLabel' | translate"
            >
              <app-visual-layout-picker
                [options]="layoutStrategyPickerOptions"
                [ariaLabel]="'builder.layoutStrategyLabel' | translate"
                [ngModel]="section.layout?.strategy || 'stack'"
                (ngModelChange)="updateLayout(section.id, 'strategy', $event)"
              />
            </app-form-field>
            <app-form-field
              appHighlightSource="spacing"
              [label]="'builder.columns' | translate"
              [hint]="'builder.sectionColumnsDesc' | translate"
              [usedBy]="[blockLabel(section.type)]"
              [usedByLabel]="'builder.usedByLabel' | translate"
            >
              <app-input type="number" [ngModel]="section.layout?.columns || 1" (ngModelChange)="updateLayout(section.id, 'columns', $event)" />
            </app-form-field>
          </div>
        </div>

        <div class="block-card__actions">
          <button type="button" [attr.aria-label]="'builder.widgetMoveUp' | translate" [disabled]="first" (click)="moveBlock(section.id, -1)">
            <app-icon name="arrowUp" [size]="16" />
          </button>
          <button type="button" [attr.aria-label]="'builder.widgetMoveDown' | translate" [disabled]="last" (click)="moveBlock(section.id, 1)">
            <app-icon name="arrowDown" [size]="16" />
          </button>
          <label class="block-card__visible-toggle">
            <app-toggle [ngModel]="section.visible !== false" (ngModelChange)="updateSection(section.id, 'visible', $event)" [ariaLabel]="'builder.visible' | translate" />
            <span>{{ 'builder.visible' | translate }}</span>
          </label>
          <button type="button" [attr.aria-label]="'builder.widgetDuplicate' | translate" (click)="duplicateBlock(section.id)">
            <app-icon name="copy" [size]="16" />
          </button>
          <button type="button" class="block-card__remove" [attr.aria-label]="'builder.widgetRemove' | translate" (click)="removeBlock(section.id)">
            <app-icon name="trash" [size]="16" />
          </button>
        </div>
      </div>
    }
  </div>

  <div class="block-catalog">
    <p class="field-desc">{{ 'builder.addBlockHint' | translate }}</p>
    <div class="block-catalog__grid">
      @for (entry of blockCatalog; track entry.type) {
        <button type="button" class="block-catalog__item" (click)="addBlock(entry.type)">
          <app-icon [name]="entry.icon" [size]="18" />
          <span>{{ entry.labelKey | translate }}</span>
        </button>
      }
    </div>
  </div>
</app-section-card>

<app-confirm-dialog
  [open]="!!pendingRemoveBlockId()"
  [titleText]="'builder.blockRemoveConfirm' | translate"
  [message]="'builder.blockRemoveConfirm' | translate"
  [destructive]="true"
  (confirmed)="confirmRemoveBlock()"
  (cancelled)="pendingRemoveBlockId.set(null)"
/>
}