@if (bootstrap(); as bootstrap) {
<app-section-card [title]="'builder.header' | translate">
  <div class="editor-grid two">
    <app-form-field [label]="'builder.headerLayout' | translate" [hint]="'builder.headerLayoutDesc' | translate">
      <app-select [options]="layoutSelectOptions()" [ngModel]="bootstrap.header?.layout || 'default'" (ngModelChange)="updateLayout($event)" />
    </app-form-field>
    <label class="toggle-row">
      <app-toggle [ngModel]="isSticky()" (ngModelChange)="toggleSticky($event)" [ariaLabel]="'builder.headerSticky' | translate" />
      <span>{{ 'builder.headerSticky' | translate }}</span>
      <small class="field-desc">{{ 'builder.headerStickyDesc' | translate }}</small>
    </label>
  </div>
  <div class="editor-grid three toggles">
    @for (item of items; track item.key) {
      <label class="toggle-row">
        <app-toggle [ngModel]="isChecked(item.key)" (ngModelChange)="toggle(item.key, $event)" [ariaLabel]="item.label | translate" />
        <span>{{ item.label | translate }}</span>
        <small class="field-desc">{{ item.descKey | translate }}</small>
      </label>
    }
  </div>
</app-section-card>
}
