<h1 class="text-center text-h3 desktop-large:text-h2 font-normal desktop-large:font-bold pb-10 desktop-large:py-10 px-12">
  Überprüfen Sie die Details.
</h1>

@if (buyer$ | async; as buyer) {
  @if (!(showAddresses$ | async)) {
    <div class="flex flex-row items-start justify-between p-5">
      <div class="flex flex-row flex-wrap pr-4">
        @if (getNameFromBuyer(buyer); as name) {
          <div class="mr-3">{{ name.label }}</div>
          <div class="font-bold">{{ name.value }}</div>
        }
      </div>
      <button (click)="changeAddress()" class="text-p1 font-bold text-[#F70400]">Ändern</button>
    </div>
  }
}

@if (showNotificationChannels$ | async) {
  @if (control) {
    <form class="pb-4" [formGroup]="control">
      <shared-notification-channel-control
        [communicationDetails]="communicationDetails$ | async"
        (channelActionEvent)="updateNotifications($event)"
        [channelActionName]="'Speichern'"
        [channelActionLoading]="notificationChannelLoading$ | async"
        formGroupName="notificationChannel"
      ></shared-notification-channel-control>
    </form>
  }
}

@if (payer$ | async; as payer) {
  @if (showAddresses$ | async) {
    <div class="flex flex-row items-start justify-between p-5 pt-0">
      <div class="flex flex-row flex-wrap pr-4" data-address-type="Rechnungsadresse" data-which="Rechnungsadresse">
        <div class="mr-3" data-what="title">Rechnungsadresse</div>
        <div class="font-bold" data-what="address">
          {{ payer | payerAddress }}
        </div>
      </div>
      <button (click)="changeAddress()" class="text-p1 font-bold text-[#F70400]">Ändern</button>
    </div>
  }
}

@if (payer$ | async; as payer) {
  @if (showAddresses$ | async) {
    <div class="flex flex-row items-start justify-between px-5">
      <div class="flex flex-row flex-wrap pr-4" data-address-type="Lieferadresse" data-which="Lieferadresse">
        <div class="mr-3" data-what="title">Lieferadresse</div>
        <div class="font-bold" data-what="address">
          {{ shippingAddress$ | async | shippingAddress }}
        </div>
      </div>
      <button (click)="changeAddress()" class="text-p1 font-bold text-[#F70400]">Ändern</button>
    </div>
  }
}

<page-special-comment
  class="mb-6 mt-4"
  [hasPayer]="!!(payer$ | async)"
  [hasBuyer]="!!(buyer$ | async)"
  [ngModel]="specialComment$ | async"
  (ngModelChange)="setAgentComment($event)"
></page-special-comment>
