<ng-container *ngIf="orderItem$ | async; let orderItem">
  <div class="grid grid-flow-row gap-px-2">
    <div
      class="bg-[#F5F7FA] flex flex-row justify-between items-center p-4 rounded-t"
    >
      <div
        class="grid grid-flow-col gap-[0.4375rem] items-center"
        *ngIf="customerFeature$ | async; let feature; else: featureLoading"
      >
        <shared-icon *ngIf="!!feature" [size]="24" icon="person"></shared-icon>
        <div class="grid grid-flow-col gap-2 items-center font-bold text-p2">
          {{ feature?.description }}
        </div>
      </div>

      <button
        [disabled]="editButtonDisabled$ | async"
        class="page-customer-order-details-header__edit-cta bg-transparent text-brand font-bold border-none text-p1"
        *ngIf="editClick.observers.length"
        (click)="editClick.emit(orderItem)"
      >
        Bearbeiten
      </button>
    </div>

    <div
      class="page-customer-order-details-header__details bg-white px-4 pt-4 pb-5"
    >
      <h2
        class="page-customer-order-details-header__details-header items-center"
        [class.mb-8]="!orderItem?.features?.paid && !isKulturpass"
      >
        <div class="text-h2">
          {{ orderItem?.organisation }}
          <ng-container
            *ngIf="
              !!orderItem?.organisation &&
              (!!orderItem?.firstName || !!orderItem?.lastName)
            "
            >-</ng-container
          >
          {{ orderItem?.lastName }}
          {{ orderItem?.firstName }}
        </div>
        <div
          class="page-customer-order-details-header__header-compartment text-h3"
        >
          {{ orderItem?.compartmentCode
          }}{{ orderItem?.compartmentInfo && '_' + orderItem?.compartmentInfo }}
        </div>
      </h2>

      <div
        class="page-customer-order-details-header__paid-marker mt-[0.375rem]"
        *ngIf="orderItem?.features?.paid && !isKulturpass"
      >
        <div
          class="font-bold w-fit desktop-small:text-p2 px-3 py-[0.125rem] rounded text-white bg-[#26830C]"
        >
          {{ orderItem?.features?.paid }}
        </div>
      </div>
      <div
        class="page-customer-order-details-header__paid-marker mt-[0.375rem] text-[#26830C]"
        *ngIf="isKulturpass"
      >
        <svg
          class="fill-current mr-2"
          xmlns="http://www.w3.org/2000/svg"
          height="22"
          viewBox="0 -960 960 960"
          width="22"
        >
          <path
            d="M880-740v520q0 24-18 42t-42 18H140q-24 0-42-18t-18-42v-520q0-24 18-42t42-18h680q24 0 42 18t18 42ZM140-631h680v-109H140v109Zm0 129v282h680v-282H140Zm0 282v-520 520Z"
          />
        </svg>
        <strong>Bezahlt über KulturPass</strong>
      </div>

      <div class="page-customer-order-details-header__details-wrapper -mt-3">
        <div
          class="flex flex-row page-customer-order-details-header__buyer-number"
          data-detail-id="Kundennummer"
        >
          <div class="min-w-[9rem]">Kundennummer</div>
          <div class="flex flex-row font-bold">
            {{ orderItem?.buyerNumber }}
          </div>
        </div>
        <div
          class="flex flex-row page-customer-order-details-header__order-number"
          data-detail-id="VorgangId"
        >
          <div class="min-w-[9rem]">Vorgang-ID</div>
          <div class="flex flex-row font-bold">
            {{ orderItem?.orderNumber }}
          </div>
        </div>
        <div
          class="flex flex-row page-customer-order-details-header__order-date"
          data-detail-id="Bestelldatum"
        >
          <div class="min-w-[9rem]">Bestelldatum</div>
          <div class="flex flex-row font-bold">
            {{ orderItem?.orderDate | date: 'dd.MM.yy | HH:mm' }} Uhr
          </div>
        </div>
        <div
          class="flex flex-row page-customer-order-details-header__processing-status justify-between"
          data-detail-id="Status"
        >
          <div class="min-w-[9rem]">Status</div>
          <div
            *ngIf="!(changeStatusLoader$ | async)"
            class="flex flex-row font-bold -mr-[0.125rem]"
          >
            <shared-icon
              class="mr-2 text-black flex items-center justify-center"
              [size]="16"
              *ngIf="
                orderItem.processingStatus | processingStatus: 'icon';
                let icon
              "
              [icon]="icon"
            ></shared-icon>

            <span *ngIf="!(canEditStatus$ | async)">
              {{ orderItem?.processingStatus | processingStatus }}
            </span>
            <ng-container *ngIf="canEditStatus$ | async">
              <button
                class="cta-status-dropdown"
                [uiOverlayTrigger]="statusDropdown"
                [disabled]="changeStatusDisabled$ | async"
                #dropdown="uiOverlayTrigger"
              >
                <div class="mr-[0.375rem]">
                  {{ orderItem?.processingStatus | processingStatus }}
                </div>
                <shared-icon
                  [size]="24"
                  [class.rotate-0]="!dropdown.opened"
                  [class.-rotate-180]="dropdown.opened"
                  icon="arrow-drop-down"
                ></shared-icon>
              </button>
              <ui-dropdown
                #statusDropdown
                yPosition="below"
                xPosition="after"
                [xOffset]="8"
              >
                <button
                  uiDropdownItem
                  *ngFor="let action of statusActions$ | async"
                  (click)="handleActionClick(action)"
                >
                  {{ action.label }}
                </button>
              </ui-dropdown>
            </ng-container>
          </div>
          <ui-spinner
            *ngIf="changeStatusLoader$ | async; let loader"
            class="flex flex-row font-bold loader"
            [show]="loader"
          ></ui-spinner>
        </div>
        <div
          class="flex flex-row page-customer-order-details-header__order-source"
          data-detail-id="Bestellkanal"
        >
          <div class="min-w-[9rem]">Bestellkanal</div>
          <div class="flex flex-row font-bold">
            {{ order?.features?.orderSource }}
          </div>
        </div>
        <div
          class="flex flex-row page-customer-order-details-header__change-date justify-between"
          [ngSwitch]="orderItem.processingStatus"
          data-detail-id="Geaendert"
        >
          <!-- orderType 1 === Abholung / Rücklage; orderType 2 === Versand / B2B-Versand; orderType 4 === Download (ist manchmal auch orderType 2) -->
          <ng-container *ngIf="orderItem.orderType === 1; else changeDate">
            <ng-container *ngSwitchCase="16">
              <ng-container *ngTemplateOutlet="vslLieferdatum"></ng-container>
            </ng-container>
            <ng-container *ngSwitchCase="8192">
              <ng-container *ngTemplateOutlet="vslLieferdatum"></ng-container>
            </ng-container>
            <ng-container *ngSwitchCase="128">
              <ng-container *ngTemplateOutlet="abholfrist"></ng-container>
            </ng-container>
          </ng-container>

          <ng-template #changeDate>
            <div class="min-w-[9rem]">Geändert</div>
            <div class="flex flex-row font-bold">
              {{
                orderItem?.processingStatusDate | date: 'dd.MM.yy | HH:mm'
              }}
              Uhr
            </div>
          </ng-template>
        </div>

        <div
          class="flex flex-row page-customer-order-details-header__pick-up justify-between"
          data-detail-id="Wunschdatum"
          *ngIf="
            orderItem.orderType === 1 &&
            (orderItem.processingStatus === 16 ||
              orderItem.processingStatus === 8192)
          "
        >
          <ng-container *ngTemplateOutlet="preferredPickUpDate"></ng-container>
        </div>

        <div
          class="flex flex-col page-customer-order-details-header__dig-and-notification"
        >
          <div
            *ngIf="orderItem.orderType === 1"
            class="flex flex-row page-customer-order-details-header__notification"
            data-detail-id="Benachrichtigung"
          >
            <div class="min-w-[9rem]">Benachrichtigung</div>
            <div class="flex flex-row font-bold">
              {{ (notificationsChannel | notificationsChannel) || '-' }}
            </div>
          </div>

          <div
            *ngIf="!!digOrderNumber && orderItem.orderType !== 1"
            class="flex flex-row page-customer-order-details-header__dig-number"
            data-detail-id="Dig-Bestellnummer"
          >
            <div class="min-w-[9rem]">Dig-Bestell Nr.</div>
            <div class="flex flex-row font-bold">{{ digOrderNumber }}</div>
          </div>
        </div>
      </div>
    </div>

    <div class="flex flex-row items-center relative bg-[#F5F7FA] p-4 rounded-t">
      <div *ngIf="showFeature" class="flex flex-row items-center mr-3">
        <ng-container [ngSwitch]="order.features.orderType">
          <ng-container *ngSwitchCase="'Versand'">
            <div
              class="flex items-center justify-center bg-[#D8DFE5] w-[2.25rem] h-[2.25rem] rounded rounded-br-none mr-2"
            >
              <shared-icon [size]="24" icon="isa-truck"></shared-icon>
            </div>
            <p class="font-bold text-p1">Versand</p>
          </ng-container>
          <ng-container *ngSwitchCase="'DIG-Versand'">
            <div
              class="flex items-center justify-center bg-[#D8DFE5] w-[2.25rem] h-[2.25rem] rounded rounded-br-none mr-2"
            >
              <shared-icon [size]="24" icon="isa-truck"></shared-icon>
            </div>
            <p class="font-bold text-p1">Versand</p>
          </ng-container>
          <ng-container *ngSwitchCase="'B2B-Versand'">
            <div
              class="flex items-center justify-center bg-[#D8DFE5] w-[2.25rem] h-[2.25rem] rounded rounded-br-none mr-2"
            >
              <shared-icon [size]="24" icon="isa-b2b-truck"></shared-icon>
            </div>
            <p class="font-bold text-p1">B2B-Versand</p>
          </ng-container>
          <ng-container *ngSwitchCase="'Abholung'">
            <div
              class="flex items-center justify-center bg-[#D8DFE5] w-[2.25rem] h-[2.25rem] rounded rounded-br-none mr-2"
            >
              <shared-icon [size]="24" icon="isa-box-out"></shared-icon>
            </div>
            <p class="font-bold text-p1 mr-3">Abholung</p>
            {{ orderItem.targetBranch }}
          </ng-container>
          <ng-container *ngSwitchCase="'Rücklage'">
            <div
              class="flex items-center justify-center bg-[#D8DFE5] w-[2.25rem] h-[2.25rem] rounded rounded-br-none mr-2"
            >
              <shared-icon [size]="24" icon="isa-shopping-bag"></shared-icon>
            </div>
            <p class="font-bold text-p1">Rücklage</p>
          </ng-container>
          <ng-container *ngSwitchCase="'Download'">
            <div
              class="flex items-center justify-center bg-[#D8DFE5] w-[2.25rem] h-[2.25rem] rounded rounded-br-none mr-2"
            >
              <shared-icon [size]="24" icon="isa-download"></shared-icon>
            </div>
            <p class="font-bold text-p1">Download</p>
          </ng-container>
        </ng-container>
      </div>

      <div
        class="page-customer-order-details-header__additional-addresses"
        *ngIf="showAddresses"
      >
        <button (click)="openAddresses = !openAddresses" class="text-[#0556B4]">
          Lieferadresse / Rechnungsadresse
          {{ openAddresses ? 'ausblenden' : 'anzeigen' }}
        </button>

        <div
          class="page-customer-order-details-header__addresses-popover"
          *ngIf="openAddresses"
        >
          <button (click)="openAddresses = !openAddresses" class="close">
            <shared-icon icon="close" [size]="24"></shared-icon>
          </button>

          <div
            class="page-customer-order-details-header__addresses-popover-data"
          >
            <div
              *ngIf="order.shipping"
              class="page-customer-order-details-header__addresses-popover-delivery"
            >
              <p>Lieferadresse</p>
              <div
                class="page-customer-order-details-header__addresses-popover-delivery-data"
              >
                <ng-container *ngIf="order.shipping?.data?.organisation">
                  <p>{{ order.shipping?.data?.organisation?.name }}</p>
                  <p>{{ order.shipping?.data?.organisation?.department }}</p>
                </ng-container>
                <p>
                  {{ order.shipping?.data?.firstName }}
                  {{ order.shipping?.data?.lastName }}
                </p>
                <p>{{ order.shipping?.data?.address?.info }}</p>
                <p>
                  {{ order.shipping?.data?.address?.street }}
                  {{ order.shipping?.data?.address?.streetNumber }}
                </p>
                <p>
                  {{ order.shipping?.data?.address?.zipCode }}
                  {{ order.shipping?.data?.address?.city }}
                </p>
              </div>
            </div>
            <div
              *ngIf="order.billing"
              class="page-customer-order-details-header__addresses-popover-billing"
            >
              <p>Rechnungsadresse</p>
              <div
                class="page-customer-order-details-header__addresses-popover-billing-data"
              >
                <ng-container *ngIf="order.billing?.data?.organisation">
                  <p>{{ order.billing?.data?.organisation?.name }}</p>
                  <p>{{ order.billing?.data?.organisation?.department }}</p>
                </ng-container>
                <p>
                  {{ order.billing?.data?.firstName }}
                  {{ order.billing?.data?.lastName }}
                </p>
                <p>{{ order.billing?.data?.address?.info }}</p>
                <p>
                  {{ order.billing?.data?.address?.street }}
                  {{ order.billing?.data?.address?.streetNumber }}
                </p>
                <p>
                  {{ order.billing?.data?.address?.zipCode }}
                  {{ order.billing?.data?.address?.city }}
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div
        class="page-customer-order-details-header__select grow"
        *ngIf="showMultiselect$ | async"
      >
        <button class="cta-select-all" (click)="selectAll()">
          Alle auswählen
        </button>
        {{ selectedOrderItemCount$ | async }} von
        {{ orderItemCount$ | async }} Titeln
      </div>
    </div>
  </div>

  <ng-template #featureLoading>
    <div class="fetch-wrapper">
      <div class="fetching"></div>
      <div class="fetching"></div>
      <div class="fetching"></div>
    </div>
  </ng-template>

  <ng-template #abholfrist>
    <div class="min-w-[9rem]">Abholfrist</div>
    <div *ngIf="!(changeDateLoader$ | async)" class="flex flex-row font-bold">
      <button
        [uiOverlayTrigger]="deadlineDatepicker"
        #deadlineDatepickerTrigger="uiOverlayTrigger"
        [disabled]="
          !isKulturpass &&
          (!!orderItem?.features?.paid || (changeDateDisabled$ | async))
        "
        class="cta-pickup-deadline"
      >
        <strong class="border-r border-[#AEB7C1] pr-4">
          {{ orderItem?.pickUpDeadline | date: 'dd.MM.yy' }}
        </strong>
        <shared-icon
          class="text-[#596470] ml-4"
          [size]="24"
          icon="isa-calendar"
        ></shared-icon>
      </button>
      <ui-datepicker
        #deadlineDatepicker
        yPosition="below"
        xPosition="after"
        [xOffset]="8"
        [min]="minDateDatepicker"
        [disabledDaysOfWeek]="[0]"
        [selected]="orderItem?.pickUpDeadline"
        (save)="updatePickupDeadline($event)"
      ></ui-datepicker>
    </div>
    <ui-spinner
      *ngIf="changeDateLoader$ | async; let loader"
      class="flex flex-row font-bold loader"
      [show]="loader"
    ></ui-spinner>
  </ng-template>

  <ng-template #preferredPickUpDate>
    <div class="min-w-[9rem]">Zurücklegen bis</div>
    <div
      *ngIf="!(changePreferredDateLoader$ | async)"
      class="flex flex-row font-bold"
    >
      <button
        [uiOverlayTrigger]="preferredPickUpDatePicker"
        #preferredPickUpDatePickerTrigger="uiOverlayTrigger"
        [disabled]="
          (!isKulturpass && !!orderItem?.features?.paid) ||
          (changeDateDisabled$ | async)
        "
        class="cta-pickup-preferred"
      >
        <strong
          class="border-r border-[#AEB7C1] pr-4"
          *ngIf="
            preferredPickUpDate$ | async;
            let pickUpDate;
            else: selectTemplate
          "
        >
          {{ pickUpDate | date: 'dd.MM.yy' }}
        </strong>
        <ng-template #selectTemplate>
          <strong class="border-r border-[#AEB7C1] pr-4">Auswählen</strong>
        </ng-template>
        <shared-icon
          class="text-[#596470] ml-4"
          [size]="24"
          icon="isa-calendar"
        ></shared-icon>
      </button>
      <ui-datepicker
        #preferredPickUpDatePicker
        yPosition="below"
        xPosition="after"
        [xOffset]="8"
        [min]="minDateDatepicker"
        [disabledDaysOfWeek]="[0]"
        [selected]="(preferredPickUpDate$ | async) || today"
        (save)="updatePreferredPickUpDate($event)"
      ></ui-datepicker>
    </div>
    <ui-spinner
      *ngIf="changePreferredDateLoader$ | async; let loader"
      class="flex flex-row font-bold loader"
      [show]="loader"
    ></ui-spinner>
  </ng-template>

  <ng-template #vslLieferdatum>
    <div class="min-w-[9rem]">vsl. Lieferdatum</div>
    <div *ngIf="!(changeDateLoader$ | async)" class="flex flex-row font-bold">
      <button
        class="cta-datepicker"
        [disabled]="changeDateDisabled$ | async"
        [uiOverlayTrigger]="uiDatepicker"
        #datepicker="uiOverlayTrigger"
      >
        <span class="border-r border-[#AEB7C1] pr-4">
          {{ orderItem?.estimatedShippingDate | date: 'dd.MM.yy' }}
        </span>
        <shared-icon
          class="text-[#596470] ml-4"
          [size]="24"
          icon="isa-calendar"
        ></shared-icon>
      </button>
      <ui-datepicker
        #uiDatepicker
        yPosition="below"
        xPosition="after"
        [xOffset]="8"
        [min]="minDateDatepicker"
        [disabledDaysOfWeek]="[0]"
        [selected]="orderItem?.estimatedShippingDate"
        (save)="updateEstimatedShippingDate($event)"
      ></ui-datepicker>
    </div>
    <ui-spinner
      *ngIf="changeDateLoader$ | async; let loader"
      class="flex flex-row font-bold loader"
      [show]="loader"
    ></ui-spinner>
  </ng-template>
</ng-container>
