@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>

    <div class="full">
      <label><span>{{ 'builder.additionalPhones' | translate }}</span><small class="field-desc">{{ 'builder.additionalPhonesDesc' | translate }}</small></label>
      @for (phone of additionalPhones(); track $index) {
        <div class="contact-row">
          <app-input [ngModel]="phone" (ngModelChange)="updatePhoneAt($index, $event)" [placeholder]="'builder.phone' | translate" />
          <button type="button" class="contact-row__remove" (click)="removePhoneAt($index)" [attr.aria-label]="'builder.removePhone' | translate">&times;</button>
        </div>
      }
      <app-button variant="secondary" size="sm" (click)="addPhone()">{{ 'builder.addPhone' | translate }}</app-button>
    </div>

    <div class="full">
      <label><span>{{ 'builder.additionalEmails' | translate }}</span><small class="field-desc">{{ 'builder.additionalEmailsDesc' | translate }}</small></label>
      @for (email of additionalEmails(); track $index) {
        <div class="contact-row">
          <app-input type="email" [ngModel]="email" (ngModelChange)="updateEmailAt($index, $event)" [placeholder]="'builder.email' | translate" />
          <button type="button" class="contact-row__remove" (click)="removeEmailAt($index)" [attr.aria-label]="'builder.removeEmail' | translate">&times;</button>
        </div>
      }
      <app-button variant="secondary" size="sm" (click)="addEmail()">{{ 'builder.addEmail' | translate }}</app-button>
    </div>
    <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" role="alert">{{ 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" role="alert">{{ 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>

    <div class="full">
      <label><span>{{ 'builder.footerColumns' | translate }}</span><small class="field-desc">{{ 'builder.footerColumnsDesc' | translate }}</small></label>

      <div class="footer-columns" cdkDropList cdkDropListOrientation="horizontal" (cdkDropListDropped)="dropColumn($event)">
        @for (column of columns(); track column.id; let firstColumn = $first; let lastColumn = $last) {
          <div class="footer-column" cdkDrag>
            <div class="footer-column__head" cdkDragHandle>
              <app-icon name="grip" [size]="16" class="footer-column__grip" />
              <app-input [ngModel]="column.title" (ngModelChange)="updateColumnTitle(column.id, $event)" [placeholder]="'builder.footerColumnTitlePlaceholder' | translate" />
              <button type="button" class="footer-column__reorder" [attr.aria-label]="'builder.widgetMoveUp' | translate" [disabled]="firstColumn" (click)="moveColumn(column.id, -1)">
                <app-icon name="arrowUp" [size]="14" />
              </button>
              <button type="button" class="footer-column__reorder" [attr.aria-label]="'builder.widgetMoveDown' | translate" [disabled]="lastColumn" (click)="moveColumn(column.id, 1)">
                <app-icon name="arrowDown" [size]="14" />
              </button>
              <button type="button" class="footer-column__remove" (click)="removeColumn(column.id)" [attr.aria-label]="'builder.removeColumn' | translate">&times;</button>
            </div>

            <div class="footer-column__links" cdkDropList [cdkDropListData]="column.links" (cdkDropListDropped)="dropLink(column.id, $event)">
              @for (link of column.links; track link.id; let firstLink = $first; let lastLink = $last) {
                <div class="footer-link" cdkDrag>
                  <app-icon name="grip" [size]="14" cdkDragHandle class="footer-link__grip" />
                  <app-input [ngModel]="link.label" (ngModelChange)="updateLink(column.id, link.id, { label: $event })" [placeholder]="'builder.footerLinkLabelPlaceholder' | translate" />

                  <select class="footer-link__source" [ngModel]="linkSourceMode(link)" (ngModelChange)="setLinkSourceMode(column.id, link.id, $event)">
                    <option value="page">{{ 'builder.footerLinkExistingPage' | translate }}</option>
                    <option value="custom">{{ 'builder.footerLinkCustomUrl' | translate }}</option>
                  </select>

                  @if (linkSourceMode(link) === 'page') {
                    <select [ngModel]="link.pageKey" (ngModelChange)="updateLink(column.id, link.id, { pageKey: $event })">
                      @for (page of availablePages(); track page.id) {
                        <option [value]="page.id">{{ page.title }}</option>
                      }
                    </select>
                  } @else {
                    <app-input type="url" [ngModel]="link.url" (ngModelChange)="updateLink(column.id, link.id, { url: $event })" placeholder="https://" />
                  }

                  <div class="footer-link__actions">
                    <button type="button" [attr.aria-label]="'builder.widgetMoveUp' | translate" [disabled]="firstLink" (click)="moveLink(column.id, link.id, -1)">
                      <app-icon name="arrowUp" [size]="14" />
                    </button>
                    <button type="button" [attr.aria-label]="'builder.widgetMoveDown' | translate" [disabled]="lastLink" (click)="moveLink(column.id, link.id, 1)">
                      <app-icon name="arrowDown" [size]="14" />
                    </button>
                    <button type="button" class="footer-link__remove" (click)="removeLink(column.id, link.id)" [attr.aria-label]="'builder.removeColumnLink' | translate">&times;</button>
                  </div>
                </div>
              }
            </div>

            <app-button variant="secondary" size="sm" (click)="addLink(column.id)">{{ 'builder.addColumnLink' | translate }}</app-button>
          </div>
        }
      </div>

      <app-button variant="secondary" size="sm" (click)="addColumn()">{{ 'builder.addColumn' | translate }}</app-button>
    </div>
  </div>
</app-section-card>
}