@if (bootstrap(); as bootstrap) {
<app-brand-overview />
<app-section-card [title]="'builder.branding' | translate">
  <div class="editor-grid two">
    <app-form-field [label]="'builder.logo' | translate" [hint]="'builder.logoDesc' | translate" [error]="fieldError('branding.logoUrl')">
      <app-image-field [value]="bootstrap.branding.logoUrl" (valueChange)="updateField('logoUrl', $event)" />
    </app-form-field>
    <app-form-field [label]="'builder.smallLogo' | translate" [hint]="'builder.smallLogoDesc' | translate">
      <app-image-field [value]="bootstrap.branding.logoCompactUrl || ''" (valueChange)="updateField('logoCompactUrl', $event)" />
    </app-form-field>
    <app-form-field [label]="'builder.favicon' | translate" [hint]="'builder.faviconDesc' | translate">
      <app-image-field [value]="bootstrap.branding.faviconUrl" (valueChange)="updateField('faviconUrl', $event)" />
    </app-form-field>
    <app-form-field [label]="'builder.socialImage' | translate" [hint]="'builder.socialImageDesc' | translate">
      <app-image-field [value]="bootstrap.branding.socialImageUrl || ''" (valueChange)="updateField('socialImageUrl', $event)" />
    </app-form-field>
    <app-form-field class="full" [label]="'builder.marketplaceTitle' | translate" [hint]="'builder.marketplaceTitleDesc' | translate">
      <app-input [ngModel]="bootstrap.seo.default.title" (ngModelChange)="updateMarketplaceTitle($event)" />
    </app-form-field>
  </div>

  <app-form-field class="full" [label]="'builder.gallery' | translate" [hint]="'builder.galleryDesc' | translate">
    <div class="stack-list">
      @for (url of bootstrap.branding.galleryUrls ?? []; track $index) {
        <div class="sub-card media-field-row">
          <app-image-field [value]="url" (valueChange)="updateGalleryImage($index, $event)" />
          <app-button variant="ghost" size="sm" (click)="removeGalleryImage($index)">{{ 'common.remove' | translate }}</app-button>
        </div>
      }
      <app-button variant="secondary" size="sm" (click)="addGalleryImage()">{{ 'builder.addGalleryImage' | translate }}</app-button>
    </div>
  </app-form-field>
</app-section-card>
}