@if (bootstrap(); as bootstrap) {
<section class="editor-section-card">
  <h2>{{ 'builder.theme' | translate }}</h2>
  <div class="editor-grid two">
    <app-form-field [label]="'builder.primaryColor' | translate" [hint]="'builder.primaryColorDesc' | translate"><input type="color" [ngModel]="bootstrap.theme.palette.primary" (ngModelChange)="updatePalette('primary', $event)" /></app-form-field>
    <app-form-field [label]="'builder.secondaryColor' | translate" [hint]="'builder.secondaryColorDesc' | translate"><input type="color" [ngModel]="bootstrap.theme.palette.secondary" (ngModelChange)="updatePalette('secondary', $event)" /></app-form-field>
    <app-form-field [label]="'builder.backgroundColor' | translate" [hint]="'builder.backgroundColorDesc' | translate"><input type="color" [ngModel]="bootstrap.theme.palette.backgroundPrimary" (ngModelChange)="updatePalette('backgroundPrimary', $event)" /></app-form-field>
    <app-form-field [label]="'builder.surfaceColor' | translate" [hint]="'builder.surfaceColorDesc' | translate"><input type="color" [ngModel]="bootstrap.theme.palette.backgroundSecondary" (ngModelChange)="updatePalette('backgroundSecondary', $event)" /></app-form-field>
    <app-form-field [label]="'builder.textColor' | translate" [hint]="'builder.textColorDesc' | translate"><input type="color" [ngModel]="bootstrap.theme.palette.textPrimary" (ngModelChange)="updatePalette('textPrimary', $event)" /></app-form-field>
    <app-form-field [label]="'builder.successColor' | translate" [hint]="'builder.successColorDesc' | translate"><input type="color" [ngModel]="bootstrap.theme.palette.success" (ngModelChange)="updatePalette('success', $event)" /></app-form-field>
    <app-form-field [label]="'builder.warningColor' | translate" [hint]="'builder.warningColorDesc' | translate"><input type="color" [ngModel]="bootstrap.theme.palette.warning" (ngModelChange)="updatePalette('warning', $event)" /></app-form-field>
    <app-form-field [label]="'builder.dangerColor' | translate" [hint]="'builder.dangerColorDesc' | translate"><input type="color" [ngModel]="bootstrap.theme.palette.danger" (ngModelChange)="updatePalette('danger', $event)" /></app-form-field>
    <label>
      <span>{{ 'builder.themeModeLabel' | translate }}</span>
      <small class="field-desc">{{ 'builder.themeModeDesc' | translate }}</small>
      <select [ngModel]="bootstrap.theme.mode" (ngModelChange)="updateThemeMode($event)">
        @for (option of themeModeOptions; track option.value) {
          <option [value]="option.value">{{ option.labelKey | translate }}</option>
        }
      </select>
      <small class="field-desc">{{ themeModeDescKey(bootstrap.theme.mode) | translate }}</small>
    </label>
    <label>
      <span>{{ 'builder.siteLayoutLabel' | translate }}</span>
      <small class="field-desc">{{ 'builder.siteLayoutDesc' | translate }}</small>
      <select [ngModel]="bootstrap.layout?.type || 'default'" (ngModelChange)="updateSiteLayout($event)">
        @for (option of siteLayoutOptions; track option.value) {
          <option [value]="option.value">{{ option.labelKey | translate }}</option>
        }
      </select>
      <small class="field-desc">{{ siteLayoutDescKey(bootstrap.layout?.type || 'default') | translate }}</small>
    </label>
  </div>
</section>
}