<div class="customer-order-details" *ngIf="order">
  <div class="header">
    <div class="title">
      <div>{{ order.customerName }}</div>
      <div>{{ order.orderNumber }}</div>
    </div>
    <div class="info">
      <div class="order">
        <div class="order-container">
          <div class="label">Bestelldatum</div>
          <div class="data">{{ order.date | date: 'dd.MM.yy | HH:mm' }} Uhr</div>
        </div>
        <div class="order-container">
          <div class="label">Bestellkanal</div>
          <div class="data">{{ order.type }}</div>
        </div>
      </div>
      <div class="location">
        <div class="location-container">
          <div class="label">Status</div>
          <div class="data">{{ order.status }}</div>
        </div>
        <div class="location-container" *ngIf="order.orderType === 1">
          <div class="label">Zielfiliale</div>
          <div class="data">{{ order.branch }}</div>
        </div>
      </div>
    </div>
  </div>

  <ng-container *ngIf="order.orderType === 2 && (loadRows$ | async)">
    <div class="header-print">
      <div class="heading pick-up-heading">
        <lib-icon class="img-truck" *ngIf="!isDownload" width="26px" height="21px" name="truck_Icon" alt="type of order image"></lib-icon>
        <lib-icon class="img-truck" *ngIf="isDownload" width="26px" height="21px" name="download-type" alt="type of order image"></lib-icon>
        <span>{{ isDownload ? 'Download' : 'Versand' }}</span>
      </div>
      <div class="print align-right">
        <span (click)="printerSelect()">Drucken</span>
      </div>
    </div>
    <app-customer-order-item-row
      *ngFor="let deliveryItem of order.items; let lastDeliveryItem = last"
      [item]="deliveryItem"
      [order]="orderDTO"
      [customerId]="customerId"
      [isDelivery]="true"
      [isPayed]="isPayed"
      [isLast]="lastDeliveryItem"
      [isOnlyOne]="onlyOneItemAvailable"
      [disableEdit]="onlineCustomer || guestCustomer"
      [paymentDataDTO]="paymentDataDTO"
      [estimatedDateLabel]="isDownload ? 'Verfügbar ab' : 'Versand'"
    ></app-customer-order-item-row>
  </ng-container>

  <ng-container *ngIf="order.orderType === 1 && (loadRows$ | async)">
    <ng-container *ngFor="let takeNowItem of takeNowItems; let first = first; let lastTakeNowItem = last">
      <div class="header-print">
        <div class="heading pick-up-heading" *ngIf="first">
          <lib-icon class="img" width="20px" height="21px" name="Take_now" alt="type of order image"></lib-icon>
          <span>Rücklage</span>
        </div>
        <div class="print align-right" *ngIf="first">
          <span (click)="printerSelect()">Drucken</span>
        </div>
      </div>
      <app-customer-order-item-row
        [item]="takeNowItem"
        [order]="orderDTO"
        [customerId]="customerId"
        [isPayed]="isPayed"
        [isLast]="lastTakeNowItem"
        [isOnlyOne]="onlyOneItemAvailable"
        [paymentDataDTO]="paymentDataDTO"
        [estimatedDateLabel]="'Abholung ab'"
      ></app-customer-order-item-row>
    </ng-container>

    <ng-container *ngFor="let pickUpItem of pickUpItems; let first = first; let lastPickUpItem = last">
      <div class="header-print">
        <div class="heading pick-up-heading" *ngIf="first">
          <lib-icon class="img" width="20px" height="21px" name="Package_Icon" alt="type of order image"></lib-icon>
          <span>Abholung</span>
        </div>
        <div class="print align-right" *ngIf="first">
          <span (click)="printerSelect()">Drucken</span>
        </div>
      </div>
      <app-customer-order-item-row
        [item]="pickUpItem"
        [order]="orderDTO"
        [customerId]="customerId"
        [isPayed]="isPayed"
        [isLast]="lastPickUpItem"
        [isOnlyOne]="onlyOneItemAvailable"
        [paymentDataDTO]="paymentDataDTO"
        [estimatedDateLabel]="'Abholung ab'"
      ></app-customer-order-item-row>
    </ng-container>
  </ng-container>
</div>
<app-loading loading="true" *ngIf="!order" [text]="'Inhalte werden geladen'"></app-loading>
<app-printer-selection #printModal (print)="print($event)"></app-printer-selection>
