@if (bootstrap(); as bootstrap) {
<section class="editor-section-card">
  <h2>{{ 'builder.branding' | translate }}</h2>
  <div class="editor-grid two">
    <app-form-field [label]="'builder.logo' | translate" [hint]="'builder.logoDesc' | translate">
      <div class="media-field-row">
        <app-input [ngModel]="bootstrap.branding.logoUrl" (ngModelChange)="updateField('logoUrl', $event)" />
        <app-button variant="secondary" size="sm" (click)="openMediaPicker('logoUrl')">{{ 'adminCategories.chooseImage' | translate }}</app-button>
      </div>
    </app-form-field>
    <app-form-field [label]="'builder.smallLogo' | translate" [hint]="'builder.smallLogoDesc' | translate">
      <div class="media-field-row">
        <app-input [ngModel]="bootstrap.branding.logoCompactUrl || ''" (ngModelChange)="updateField('logoCompactUrl', $event)" />
        <app-button variant="secondary" size="sm" (click)="openMediaPicker('logoCompactUrl')">{{ 'adminCategories.chooseImage' | translate }}</app-button>
      </div>
    </app-form-field>
    <app-form-field [label]="'builder.favicon' | translate" [hint]="'builder.faviconDesc' | translate">
      <div class="media-field-row">
        <app-input [ngModel]="bootstrap.branding.faviconUrl" (ngModelChange)="updateField('faviconUrl', $event)" />
        <app-button variant="secondary" size="sm" (click)="openMediaPicker('faviconUrl')">{{ 'adminCategories.chooseImage' | translate }}</app-button>
      </div>
    </app-form-field>
    <app-form-field [label]="'builder.marketplaceTitle' | translate" [hint]="'builder.marketplaceTitleDesc' | translate">
      <app-input [ngModel]="bootstrap.seo.default.title" (ngModelChange)="updateMarketplaceTitle($event)" />
    </app-form-field>
  </div>
  <app-media-picker [open]="mediaPickerOpen" (selected)="onImagePicked($event)" (closed)="mediaPickerOpen = false" />
</section>
}