<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]="changeStatusLoader$ | 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">
        <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">
        <ui-icon size="12px" icon="check"></ui-icon>
        <strong> {{ orderItem?.features?.paid }} </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="!(statusActions$ | async)?.length">
              {{ orderItem?.processingStatus | processingStatus }}
            </span>
            <ng-container *ngIf="!!(statusActions$ | async)?.length">
              <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">{{ orderItem?.clientChannel | environmentChannel }}</div>
        </div>
        <div class="detail justify-space-between" [ngSwitch]="orderItem.processingStatus" data-detail-id="Geaendert">
          <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>
        </div>
        <div class="detail" data-detail-id="Benachrichtigung">
          <div class="label">Benachrichtigung</div>
          <div class="value">{{ (notificationsChannel$ | async | notificationsChannel) || '-' }}</div>
        </div>
      </div>
    </div>

    <div class="goods-in-out-header-actions" *ngIf="showMultiselect$ | async">
      <button class="cta-select-all" (click)="selectAll()">Alle auswählen</button>
      <br />
      {{ selectedOrderItemCount$ | async }} von {{ orderItemCount$ | async }} Titeln
    </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]="!!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 #vslLieferdatum>
    <div class="label">vsl. Lieferdatum</div>
    <div *ngIf="!(changeDateLoader$ | async)" class="value">
      <button
        class="cta-datepicker"
        [disabled]="changeDateDisabled$ | 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>
