@if (bootstrap(); as bootstrap) {
<app-section-card [title]="'builder.general' | translate">
  <div class="editor-grid two">
    <app-form-field [label]="'builder.marketplaceName' | translate" [hint]="'builder.marketplaceNameDesc' | translate" [error]="fieldError('branding.brandName')">
      <app-input [ngModel]="bootstrap.branding.brandName" (ngModelChange)="updateMarketplaceName($event)" />
    </app-form-field>
    <app-form-field [label]="'builder.domain' | translate" [hint]="'builder.domainDesc' | translate" [error]="fieldError('tenant.host') || fieldError('tenant.websiteBaseUrl')">
      <app-input [ngModel]="bootstrap.tenant.host" (ngModelChange)="updateDomain($event)" />
    </app-form-field>
    <label class="full">
      <span>{{ 'builder.descriptionLabel' | translate }}</span>
      <small class="field-desc">{{ 'builder.descriptionFieldDesc' | translate }}</small>
      <textarea rows="3" [ngModel]="bootstrap.seo.default.description" (ngModelChange)="updateDescription($event)"></textarea>
    </label>
    <div class="full languages-summary">
      <span>{{ 'builder.supportedLanguages' | translate }}</span>
      <small class="field-desc">{{ 'builder.languagesSummaryDesc' | translate }}</small>
      <div class="languages-summary__chips">
        @for (code of orderedLocales(); track code) {
          <span class="languages-summary__chip" [class.languages-summary__chip--default]="isDefaultLocale(code)">
            {{ code.toUpperCase() }}
            @if (isDefaultLocale(code)) {
              <em>{{ 'builder.defaultLanguageLabel' | translate }}</em>
            }
          </span>
        }
        <a class="languages-summary__manage" [routerLink]="languagesRoute()">{{ 'builder.manageLanguages' | translate }}</a>
      </div>
    </div>
  </div>
</app-section-card>
}