@if (homePage()) {
<app-homepage-overview />
<app-section-card [title]="'builder.homepage' | translate">
  @if (fieldError('pages'); as msg) {
    <p class="editor-error">{{ msg }}</p>
  }
  <div cdkDropList class="sortable-list" (cdkDropListDropped)="drop($event)">
    @for (section of sections(); track section.id) {
      <div class="sortable-item" cdkDrag>
        <div class="editor-grid four compact">
          <strong>{{ section.id }}</strong>
          <label class="toggle-row">
            <app-toggle [ngModel]="section.visible !== false" (ngModelChange)="updateSection(section.id, 'visible', $event)" [ariaLabel]="'builder.visible' | translate" />
            <span>{{ 'builder.visible' | translate }}</span>
            <small class="field-desc">{{ 'builder.sectionVisibleDesc' | translate }}</small>
          </label>
          <label>
            <span>{{ 'builder.layoutStrategyLabel' | translate }}</span>
            <small class="field-desc">{{ 'builder.layoutStrategyDesc' | translate }}</small>
            <select [ngModel]="section.layout?.strategy || 'stack'" (ngModelChange)="updateLayout(section.id, 'strategy', $event)">
              @for (option of layoutStrategyOptions; track option.value) {
                <option [value]="option.value">{{ option.labelKey | translate }}</option>
              }
            </select>
            <small class="field-desc">{{ layoutStrategyDescKey(section.layout?.strategy || 'stack') | translate }}</small>
          </label>
          <label>
            <span>{{ 'builder.columns' | translate }}</span>
            <small class="field-desc">{{ 'builder.sectionColumnsDesc' | translate }}</small>
            <app-input type="number" [ngModel]="section.layout?.columns || 1" (ngModelChange)="updateLayout(section.id, 'columns', $event)" />
          </label>
        </div>
      </div>
    }
  </div>
</app-section-card>
}