@if (bootstrap(); as bootstrap) {
<app-section-card [title]="'builder.footer' | translate">
  <div class="editor-grid two">
    <app-form-field [label]="'builder.companyName' | translate" [hint]="'builder.companyNameDesc' | translate"><app-input [ngModel]="bootstrap.company.companyName" (ngModelChange)="updateCompanyName($event)" /></app-form-field>
    <app-form-field [label]="'builder.address' | translate" [hint]="'builder.addressDesc' | translate"><app-input [ngModel]="bootstrap.company.address.street || ''" (ngModelChange)="updateAddress($event)" /></app-form-field>
    <app-form-field [label]="'builder.phone' | translate" [hint]="'builder.phoneDesc' | translate"><app-input [ngModel]="bootstrap.company.contacts.phone || ''" (ngModelChange)="updatePhone($event)" /></app-form-field>
    <app-form-field [label]="'builder.email' | translate" [hint]="'builder.emailDesc' | translate" [error]="fieldError('company.contacts.email')"><app-input [ngModel]="bootstrap.company.contacts.email" (ngModelChange)="updateEmail($event)" /></app-form-field>
    <app-form-field class="full" [label]="'builder.copyright' | translate" [hint]="'builder.copyrightDesc' | translate"><app-input [ngModel]="copyrightValue()" (ngModelChange)="updateCopyright($event)" /></app-form-field>
    <app-form-field class="full" [label]="'builder.footerLogo' | translate" [hint]="'builder.footerLogoDesc' | translate">
      <app-image-field [value]="bootstrap.footer?.logoUrl || ''" (valueChange)="updateLogo($event)" />
    </app-form-field>

    <div class="full">
      <label><span>{{ 'builder.paymentIcons' | translate }}</span><small class="field-desc">{{ 'builder.paymentIconsDesc' | translate }}</small></label>
      @if (fieldError('footer.paymentIcons'); as msg) {
        <p class="editor-error">{{ msg }}</p>
      }
      <app-key-value-editor
        [rows]="paymentIconRows()"
        [addLabel]="'builder.addPaymentIcon' | translate"
        [removeLabel]="'builder.removePaymentIcon' | translate"
        [createRow]="createPaymentIconRow"
        (rowsChange)="onPaymentIconsChange($event)"
      >
        <ng-template let-row let-index="index">
          <div class="media-field-row">
            <app-image-field [value]="row.src" (valueChange)="updatePaymentIconSrc(index, $event)" />
            <app-input [ngModel]="row.alt" (ngModelChange)="updatePaymentIconAlt(index, $event)" [placeholder]="'builder.iconAltLabel' | translate" />
          </div>
        </ng-template>
      </app-key-value-editor>
    </div>

    <div class="full">
      <label><span>{{ 'builder.socialLinks' | translate }}</span><small class="field-desc">{{ 'builder.socialLinksDesc' | translate }}</small></label>
      @if (fieldError('footer.socialLinks'); as msg) {
        <p class="editor-error">{{ msg }}</p>
      }
      <app-key-value-editor
        [rows]="socialLinkRows()"
        [addLabel]="'builder.addSocialLink' | translate"
        [removeLabel]="'builder.removeSocialLink' | translate"
        [createRow]="createSocialLinkRow"
        (rowsChange)="onSocialLinksChange($event)"
      >
        <ng-template let-row let-index="index">
          <div class="editor-grid two compact">
            <app-form-field [label]="'builder.socialLinkLabel' | translate">
              <app-input [ngModel]="row.label" (ngModelChange)="updateSocialLinkLabel(index, $event)" />
            </app-form-field>
            <app-form-field
              [label]="'builder.socialLinkUrl' | translate"
              [hint]="isValidUrl(row.url) ? ('builder.socialLinkUrlDesc' | translate) : null"
              [error]="isValidUrl(row.url) ? null : ('builder.invalidUrl' | translate)"
            >
              <app-input type="url" [ngModel]="row.url" (ngModelChange)="updateSocialLinkUrl(index, $event)" />
            </app-form-field>
          </div>
        </ng-template>
      </app-key-value-editor>
    </div>

    <app-form-field class="full" [label]="'builder.staticPages' | translate" [hint]="'builder.staticPagesFieldDesc' | translate"><app-input [ngModel]="staticPagesValue()" (ngModelChange)="updateStaticPages($event)" /></app-form-field>
  </div>
</app-section-card>
}