<h2 class="isa-flex isa-justify-content-space-between">
  <span>{{ orderDetails?.firstName }} {{ orderDetails?.lastName }}</span>
  <span
    >{{ orderDetails?.compartmentCode
    }}{{
      orderDetails?.compartmentInfo && '_' + orderDetails?.compartmentInfo
    }}</span
  >
</h2>
<div class="isa-flex isa-justify-content-space-between">
  <div class="isa-flex isa-flex-direction-column isa-container-width-380">
    <div class="detail">
      <div class="name">Vorgang-ID</div>
      <div class="value">{{ orderDetails?.orderNumber }}</div>
    </div>
    <div class="detail">
      <div class="name">Bestelldatum</div>
      <div class="value">
        {{ orderDetails?.orderDate | date: 'dd.MM.yy | HH:mm' }} Uhr
      </div>
    </div>
    <div class="detail">
      <div class="name">Bestellkanal</div>
      <div class="value">
        {{ orderDetails?.orderChannel | environmentChannel }}
      </div>
    </div>
  </div>
  <div class="isa-flex isa-flex-direction-column isa-container-width-305">
    <div class="detail">
      <div class="name">Kundennummer</div>
      <div class="value isa-text-right">{{ orderDetails?.customerNumber }}</div>
    </div>
    <div class="detail">
      <div class="name">Status</div>
      <div class="value">
        <button
          class="isa-btn isa-p-0 isa-btn-block isa-text-right isa-white-space-nowrap"
          (click)="statusDropdown.toggle()"
        >
          <lib-icon
            class="isa-mr-8"
            [ngClass]="icon"
            *ngIf="
              orderDetails?.processingStatus | processingStatus: 'icon';
              let icon
            "
            [name]="icon"
          >
          </lib-icon>
          <strong>{{
            orderDetails?.processingStatus | processingStatus
          }}</strong>
          <lib-icon
            class="dp-button-icon"
            [class.up]="statusDropdown.visible"
            [class.down]="!statusDropdown.visible"
            name="Arrow_right"
            [height]="'16px'"
          ></lib-icon>
        </button>
        <app-ui-dropdown
          #statusDropdown
          [value]="orderDetails?.processingStatus"
          (valueChange)="changeProcessingStatus.emit($event)"
        >
          <ng-container
            *ngFor="
              let status of processingKeys
                | keyvalue
                | processingStatusOptionsKeyValuePipe
            "
          >
            <button
              appUiDropdownItem
              class="isa-btn isa-text-left isa-p-16"
              [value]="status.key"
              *ngIf="status.key !== orderDetails?.processingStatus"
            >
              {{ status?.value?.value }}
            </button>
          </ng-container>
        </app-ui-dropdown>
      </div>
    </div>
    <ng-container [ngSwitch]="orderDetails?.processingStatus">
      <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>
      <div class="detail" *ngSwitchDefault>
        <div class="name">Geändert</div>
        <div class="value isa-text-right">
          {{ orderDetails?.processingStatusDate | date: 'dd.MM.yy | HH:mm' }}
          Uhr
        </div>
      </div>
    </ng-container>
  </div>
</div>

<ng-template #vslLieferdatum>
  <div class="detail">
    <div class="name">vsl. Lieferdatum</div>
    <div class="value">
      <button
        class="isa-btn isa-p-0 isa-btn-block isa-text-right"
        (click)="uiDatepicker.toggle()"
      >
        <strong>
          {{ orderDetails?.estimatedShippingDate | date: 'dd.MM.yy' }}
        </strong>
        <lib-icon
          class="dp-button-icon"
          [class.up]="uiDatepicker.opened"
          [class.down]="!uiDatepicker.opened"
          name="Arrow_right"
          [height]="'16px'"
        ></lib-icon>
      </button>
      <app-ui-datepicker
        #uiDatepicker
        [right]="'-1rem'"
        [min]="minDate"
        [disabledDaysOfWeek]="[0]"
        [selected]="orderDetails?.estimatedShippingDate"
        (save)="changeEstimatedDeliveryDate.emit($event); uiDatepicker.close()"
      >
      </app-ui-datepicker>
    </div>
  </div>
</ng-template>

<ng-template #abholfrist>
  <div class="detail">
    <div class="name">Abholfrist</div>
    <div class="value">
      <button
        class="isa-btn isa-p-0 isa-btn-block isa-text-right"
        (click)="deadlineDropdown.toggle()"
      >
        <strong>
          {{ orderDetails?.pickupDeadline | date: 'dd.MM.yy' }}
        </strong>
        <lib-icon
          class="dp-button-icon"
          [class.up]="deadlineDropdown.visible"
          [class.down]="!deadlineDropdown.visible"
          name="Arrow_right"
          [height]="'16px'"
        ></lib-icon>
      </button>
      <app-ui-dropdown
        #deadlineDropdown
        [value]="orderDetails?.pickupDeadline"
        (valueChange)="changePickUpDeadline.emit($event)"
      >
        <ng-container *ngFor="let dl of pickupDeadlines | keyvalue">
          <button
            appUiDropdownItem
            class="isa-btn isa-text-left isa-p-16"
            [value]="dl.value"
          >
            {{ dl.key }}
          </button>
        </ng-container>
      </app-ui-dropdown>
    </div>
  </div>
</ng-template>
