<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="fetchingCustomerDone$ | async; else featureLoading"
      >
        <ng-container *ngIf="customerFeature$ | async; let feature">
          <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>
        </ng-container>
      </div>

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

    <ng-template #featureLoading>
      <shared-skeleton-loader class="w-64 h-6"></shared-skeleton-loader>
    </ng-template>

    <div
      class="page-pickup-shelf-details-header__details bg-white px-4 pt-4 pb-5"
    >
      <div
        class="flex flex-row items-center"
        [class.mb-8]="!orderItem?.features?.paid && !isKulturpass"
      >
        <page-pickup-shelf-details-header-nav-menu
          class="mr-2"
          [customer]="customer$ | async"
        ></page-pickup-shelf-details-header-nav-menu>
        <h2
          class="page-pickup-shelf-details-header__details-header items-center"
        >
          <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-pickup-shelf-details-header__header-compartment text-h3"
          >
            {{ orderItem?.compartmentCode
            }}{{
              orderItem?.compartmentInfo && '_' + orderItem?.compartmentInfo
            }}
          </div>
        </h2>
      </div>

      <div
        class="page-pickup-shelf-details-header__paid-marker mt-[0.375rem]"
        *ngIf="orderItem?.features?.paid && !isKulturpass"
      >
        <div
          class="font-bold flex flex-row items-center justify-center text-p2 text-[#26830C]"
        >
          <shared-icon
            class="flex items-center justify-center mr-[0.375rem]"
            [size]="24"
            icon="credit-card"
          ></shared-icon>
          {{ orderItem?.features?.paid }}
        </div>
      </div>
      <div
        class="page-pickup-shelf-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-pickup-shelf-details-header__details-wrapper -mt-3">
        <div
          class="flex flex-row page-pickup-shelf-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-pickup-shelf-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-pickup-shelf-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-pickup-shelf-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]"
          >
            <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"
                matomoClickCategory="pickup-shelf-details-header"
                matomoClickAction="click"
                matomoClickName="status-dropdown"
              >
                <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)"
                  matomoClickCategory="pickup-shelf-details-header"
                  matomoClickAction="select"
                  [matomoClickName]="action.label"
                >
                  {{ 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-pickup-shelf-details-header__order-source"
          data-detail-id="Bestellkanal"
        >
          <div class="min-w-[9rem]">Bestellkanal</div>
          <div class="flex flex-row font-bold">
            <shared-skeleton-loader
              class="w-32"
              *ngIf="fetchingOrder$ | async; else orderSourceTmpl"
            ></shared-skeleton-loader>
            <ng-template #orderSourceTmpl>
              {{ order()?.features?.orderSource }}
            </ng-template>
          </div>
        </div>
        <div
          class="flex flex-row page-pickup-shelf-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-pickup-shelf-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-pickup-shelf-details-header__dig-and-notification"
        >
          <div
            *ngIf="orderItem.orderType === 1"
            class="flex flex-row page-pickup-shelf-details-header__notification"
            data-detail-id="Benachrichtigung"
          >
            <div class="min-w-[9rem]">Benachrichtigung</div>
            <div class="flex flex-row font-bold">
              <shared-skeleton-loader
                class="w-32"
                *ngIf="fetchingOrder$ | async; else notificationsChannelTpl"
              ></shared-skeleton-loader>
              <ng-template #notificationsChannelTpl>
                {{
                  (notificationsChannel$ | async | notificationsChannel) || '-'
                }}
              </ng-template>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <ng-template #abholfrist>
    <div class="min-w-[9rem]">Abholfrist</div>
    <div
      *ngIf="!(orderItemSubsetLoading$ | async); else featureLoading"
      class="flex flex-row font-bold"
    >
      <button
        [uiOverlayTrigger]="deadlineDatepicker"
        #deadlineDatepickerTrigger="uiOverlayTrigger"
        [disabled]="
          !isKulturpass &&
          (!!orderItem?.features?.paid || (changeDateDisabled$ | async))
        "
        class="cta-pickup-deadline"
        matomoClickCategory="pickup-shelf-details-header"
        matomoClickAction="click"
        matomoClickName="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>
  </ng-template>

  <ng-template #preferredPickUpDate>
    <div class="min-w-[9rem]">Zurücklegen bis</div>
    <div
      *ngIf="!(orderItemSubsetLoading$ | async); else featureLoading"
      class="flex flex-row font-bold"
    >
      <button
        [uiOverlayTrigger]="preferredPickUpDatePicker"
        #preferredPickUpDatePickerTrigger="uiOverlayTrigger"
        [disabled]="
          (!isKulturpass && !!orderItem?.features?.paid) ||
          (changeDateDisabled$ | async)
        "
        class="cta-pickup-preferred"
        matomoClickCategory="pickup-shelf-details-header"
        matomoClickAction="click"
        matomoClickName="pickup-preferred"
      >
        <strong
          class="border-r border-[#AEB7C1] pr-4"
          *ngIf="
            findLatestPreferredPickUpDate$ | 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]="(findLatestPreferredPickUpDate$ | async) || today"
        (save)="updatePreferredPickUpDate($event)"
      ></ui-datepicker>
    </div>
  </ng-template>

  <ng-template #vslLieferdatum>
    <div class="min-w-[9rem]">vsl. Lieferdatum</div>
    <div
      *ngIf="!(orderItemSubsetLoading$ | async); else featureLoading"
      class="flex flex-row font-bold"
    >
      <button
        class="cta-datepicker"
        [disabled]="changeDateDisabled$ | async"
        [uiOverlayTrigger]="uiDatepicker"
        #datepicker="uiOverlayTrigger"
        matomoClickCategory="pickup-shelf-details-header"
        matomoClickAction="click"
        matomoClickName="vsl-lieferdatum"
      >
        <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>
  </ng-template>
</ng-container>

<ng-template #featureLoading>
  <shared-skeleton-loader class="w-64 h-6"></shared-skeleton-loader>
</ng-template>
