<ng-container *ngIf="orderItem$ | async; let orderItem">
  <div class="goods-in-out-header-wrapper">
    <div class="goods-in-out-header-header">
      <div class="goods-in-out-header-features" *ngIf="features$ | async; let features; else: featureLoading">
        <div class="goods-in-out-header-feature" *ngFor="let feature of features">
          {{ feature?.description }}
        </div>
      </div>

      <button
        [disabled]="editButtonDisabled$ | async"
        class="goods-in-out-header-edit-cta"
        *ngIf="editClick.observers.length"
        (click)="editClick.emit(orderItem)"
      >
        Bearbeiten
      </button>
    </div>

    <div class="goods-in-out-header-details">
      <h2 class="goods-in-out-header-details-header text-2xl">
        <div class="goods-in-out-header-details-header-name">
          {{ orderItem?.organisation }}
          <ng-container *ngIf="!!orderItem?.organisation && (!!orderItem?.firstName || !!orderItem?.lastName)">-</ng-container>
          {{ orderItem?.lastName }}
          {{ orderItem?.firstName }}
        </div>
        <div class="goods-in-out-header-details-header-compartment">
          {{ orderItem?.compartmentCode }}{{ orderItem?.compartmentInfo && '_' + orderItem?.compartmentInfo }}
        </div>
      </h2>

      <div class="goods-in-out-header-details-paid-marker" *ngIf="orderItem?.features?.paid && !isKulturpass">
        <ui-icon size="12px" icon="check"></ui-icon>
        <strong>{{ orderItem?.features?.paid }}</strong>
      </div>
      <div class="goods-in-out-header-details-paid-marker 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="goods-in-out-header-details-wrapper">
        <div class="detail" data-detail-id="VorgangId">
          <div class="label">Vorgang-ID</div>
          <div class="value">{{ orderItem?.orderNumber }}</div>
        </div>
        <div class="detail justify-space-between" data-detail-id="Kundennummer">
          <div class="label">Kundennummer</div>
          <div class="value">{{ orderItem?.buyerNumber }}</div>
        </div>
        <div class="detail" data-detail-id="Bestelldatum">
          <div class="label">Bestelldatum</div>
          <div class="value">{{ orderItem?.orderDate | date: 'dd.MM.yy | HH:mm' }} Uhr</div>
        </div>
        <div class="detail justify-space-between" data-detail-id="Status">
          <div class="label">Status</div>
          <div *ngIf="!(changeStatusLoader$ | async)" class="value">
            <ui-icon
              class="status-icon"
              *ngIf="orderItem?.processingStatus | processingStatus: 'icon'; let icon"
              [icon]="icon"
              size="12px"
            ></ui-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"
              >
                {{ orderItem?.processingStatus | processingStatus }}
                <ui-icon [rotate]="dropdown.opened ? '270deg' : '90deg'" icon="arrow_head"></ui-icon>
              </button>
              <ui-dropdown #statusDropdown yPosition="below" xPosition="after" [xOffset]="8">
                <button uiDropdownItem *ngFor="let action of statusActions$ | async" (click)="handleAction(action)">
                  {{ action.label }}
                </button>
              </ui-dropdown>
            </ng-container>
          </div>
          <ui-spinner *ngIf="changeStatusLoader$ | async; let loader" class="value loader" [show]="loader"></ui-spinner>
        </div>
        <div class="detail" data-detail-id="Bestellkanal">
          <div class="label">Bestellkanal</div>
          <div class="value">{{ order?.features?.orderSource }}</div>
        </div>
        <div class="detail justify-space-between" [ngSwitch]="orderItem.processingStatus" data-detail-id="Geaendert">
          <ng-container *ifRole="'Store'; else dateCallCenter">
            <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 *ngSwitchDefault>
              <div class="label">Geändert</div>
              <div class="value">{{ orderItem?.processingStatusDate | date: 'dd.MM.yy | HH:mm' }} Uhr</div>
            </ng-container>
          </ng-container>

          <ng-template #dateCallCenter>
            <!-- 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="label">Geändert</div>
              <div class="value">{{ orderItem?.processingStatusDate | date: 'dd.MM.yy | HH:mm' }} Uhr</div>
            </ng-template>
          </ng-template>
        </div>

        <ng-container *ifRole="'Store'; else notificationCallCenter">
          <div class="detail" data-detail-id="Benachrichtigung">
            <div class="label">Benachrichtigung</div>
            <div class="value">{{ (notificationsChannel | notificationsChannel) || '-' }}</div>
          </div>
        </ng-container>

        <ng-template #notificationCallCenter>
          <div *ngIf="orderItem.orderType === 1" class="detail" data-detail-id="Benachrichtigung">
            <div class="label">Benachrichtigung</div>
            <div class="value">{{ (notificationsChannel | notificationsChannel) || '-' }}</div>
          </div>
        </ng-template>

        <ng-container *ifRole="'Store'; else preferredPickUpDateCallCenter">
          <div
            class="detail justify-space-between"
            data-detail-id="Wunschdatum"
            *ngIf="orderItem.processingStatus === 16 || orderItem.processingStatus === 8192"
          >
            <ng-container *ngTemplateOutlet="preferredPickUpDate"></ng-container>
          </div>
        </ng-container>

        <ng-template #preferredPickUpDateCallCenter>
          <div
            class="detail justify-space-between"
            data-detail-id="Wunschdatum"
            *ngIf="orderItem.orderType === 1 && (orderItem.processingStatus === 16 || orderItem.processingStatus === 8192)"
          >
            <ng-container *ngTemplateOutlet="preferredPickUpDate"></ng-container>
          </div>
        </ng-template>

        <ng-container *ifRole="'CallCenter'">
          <div *ngIf="!!digOrderNumber && orderItem.orderType !== 1" class="detail" data-detail-id="Dig-Bestellnummer">
            <div class="label">Dig-Bestell Nr.</div>
            <div class="value">{{ digOrderNumber }}</div>
          </div>
        </ng-container>
      </div>
    </div>

    <div class="goods-in-out-header-select" *ngIf="showMultiselect$ | async">
      <button class="cta-select-all" (click)="selectAll()">Alle auswählen</button>
      {{ selectedOrderItemCount$ | async }} von {{ orderItemCount$ | async }} Titeln
    </div>

    <div *ifRole="'CallCenter'" class="goods-in-out-header-additional-information">
      <div *ngIf="showFeature" class="goods-in-out-header-additional-feature">
        <ng-container [ngSwitch]="order.features.orderType">
          <ng-container *ngSwitchCase="'Versand'">
            <ui-icon size="22px" icon="truck"></ui-icon>
            <p>Versand</p>
          </ng-container>
          <ng-container *ngSwitchCase="'DIG-Versand'">
            <ui-icon size="22px" icon="truck"></ui-icon>
            <p>Versand</p>
          </ng-container>
          <ng-container *ngSwitchCase="'B2B-Versand'">
            <ui-icon size="22px" icon="truck_b2b"></ui-icon>
            <p>B2B-Versand</p>
          </ng-container>
          <ng-container *ngSwitchCase="'Abholung'">
            <ui-icon size="22px" icon="box_out"></ui-icon>
            <p>Abholung</p>
          </ng-container>
          <ng-container *ngSwitchCase="'Rücklage'">
            <ui-icon size="22px" icon="shopping_bag"></ui-icon>
            <p>Rücklage</p>
          </ng-container>
          <ng-container *ngSwitchCase="'Download'">
            <ui-icon size="22px" icon="download"></ui-icon>
            <p>Download</p>
          </ng-container>
        </ng-container>
      </div>

      <div class="goods-in-out-header-additional-addresses" *ngIf="showAddresses">
        <button (click)="openAddresses = !openAddresses" class="goods-in-out-header-addresses-button">
          Lieferadresse / Rechnungsadresse {{ openAddresses ? 'ausblenden' : 'anzeigen' }}
        </button>

        <div class="goods-in-out-header-addresses-popover" *ngIf="openAddresses">
          <button (click)="openAddresses = !openAddresses" class="close"><ui-icon icon="close" size="17px"></ui-icon></button>

          <div class="goods-in-out-header-addresses-popover-data">
            <div *ngIf="order.shipping" class="goods-in-out-header-addresses-popover-delivery">
              <p>Lieferadresse</p>
              <div class="goods-in-out-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?.street }} {{ order.shipping?.data?.address?.streetNumber }}</p>
                <p>{{ order.shipping?.data?.address?.zipCode }} {{ order.shipping?.data?.address?.city }}</p>
                <p>{{ order.shipping?.data?.address?.info }}</p>
              </div>
            </div>
            <div *ngIf="order.billing" class="goods-in-out-header-addresses-popover-billing">
              <p>Rechnungsadresse</p>
              <div class="goods-in-out-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?.street }} {{ order.billing?.data?.address?.streetNumber }}</p>
                <p>{{ order.billing?.data?.address?.zipCode }} {{ order.billing?.data?.address?.city }}</p>
                <p>{{ order.billing?.data?.address?.info }}</p>
              </div>
            </div>
          </div>
        </div>
      </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="label">Abholfrist</div>
    <div *ngIf="!(changeDateLoader$ | async)" class="value">
      <button
        [uiOverlayTrigger]="deadlineDatepicker"
        #deadlineDatepickerTrigger="uiOverlayTrigger"
        [disabled]="!isKulturpass && (!!orderItem?.features?.paid || (changeDateDisabled$ | async))"
        class="cta-pickup-deadline"
      >
        <strong>
          {{ orderItem?.pickUpDeadline | date: 'dd.MM.yy' }}
        </strong>
        <ui-icon [rotate]="deadlineDatepickerTrigger.opened ? '270deg' : '90deg'" icon="arrow_head"></ui-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="value loader" [show]="loader"></ui-spinner>
  </ng-template>

  <ng-template #preferredPickUpDate>
    <div class="label">Zurücklegen bis</div>
    <div *ngIf="!(changePreferredDateLoader$ | async)" class="value">
      <button
        [uiOverlayTrigger]="preferredPickUpDatePicker"
        #preferredPickUpDatePickerTrigger="uiOverlayTrigger"
        [disabled]="preferredPickUpDateDisabled$ | async"
        class="cta-pickup-preferred"
      >
        <strong *ngIf="preferredPickUpDate$ | async; let pickUpDate; else: selectTemplate">
          {{ pickUpDate | date: 'dd.MM.yy' }}
        </strong>
        <ng-template #selectTemplate>
          <strong>Auswählen</strong>
        </ng-template>
        <ui-icon [rotate]="preferredPickUpDatePickerTrigger.opened ? '270deg' : '90deg'" icon="arrow_head"></ui-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="value loader" [show]="loader"></ui-spinner>
  </ng-template>

  <ng-template #vslLieferdatum>
    <div class="label">vsl. Lieferdatum</div>
    <div *ngIf="!(changeDateLoader$ | async)" class="value">
      <button
        class="cta-datepicker"
        [disabled]="vslLieferdatumDisabled$ | async"
        [uiOverlayTrigger]="uiDatepicker"
        #datepicker="uiOverlayTrigger"
      >
        <span>
          {{ orderItem?.estimatedShippingDate | date: 'dd.MM.yy' }}
        </span>
        <ui-icon icon="arrow_head" [rotate]="datepicker.opened ? '270deg' : '90deg'"></ui-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="value loader" [show]="loader"></ui-spinner>
  </ng-template>
</ng-container>
