<div class="order-container">
  <div class="order-items">
    <div class="item">
      <div class="icon-container">
        <img [src]="order.product.ean | bookImageUrl | async" alt="book" class="thumbnail" />
      </div>
      <div class="overview">
        <span class="title">{{ order.product.contributors }} - {{ order.product.name }}</span>
        <div class="labels">
          <span class="label">Preis</span>
          <span class="label">Menge</span>
          <span class="label">Bestelldatum</span>
        </div>
        <div class="data">
          <span class="text">{{ order.price | bookPrice }} {{ order.currency }}</span>
          <span class="text">{{ order.quantity }}x</span>
          <div class="time-wrapper">
            <span class="text">{{ order.orderDate | date: 'dd.MM.yy' }}</span>
            <div class="separator"></div>
            <span class="text"> {{ order.orderDate | date: 'HH:mm' }} Uhr</span>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="tag-wrapper" [ngClass]="{ 'customer-level-tag': order.shelfOrderItemLevel === 0 }">
    <app-shelf-order-tag *ngIf="order.isPrebooked" type="preorder"></app-shelf-order-tag>
  </div>
  <div
    class="order-details"
    [ngClass]="{
      'order-item-details': order.hideCompartmentNumber === false,
      'order-item-details-tags': order.isPrebooked && order.shelfOrderItemLevel === 1
    }"
  >
    <div class="order-wrapper">
      <span class="order-id">{{ order.hideCompartmentNumber === false ? order.compartmentCode : '' }}</span>
    </div>
    <div class="order-status" [ngClass]="{ 'with-compartment': order.compartmentCode }">
      <span *ngIf="order.shelfOrderItemLevel !== 2"
        ><span
          class="status-icon-wrapper"
          *ngIf="order.hideCompartmentNumber === false && order.shelfOrderItemLevel !== 2 && order.processingStatus === 128"
        >
          <lib-icon name="Check"></lib-icon>
        </span>
        <span
          class="status-icon-wrapper"
          *ngIf="
            order.hideCompartmentNumber === false &&
            order.shelfOrderItemLevel !== 2 &&
            (order.processingStatus === 512 ||
              order.processingStatus === 1024 ||
              order.processingStatus === 2048 ||
              order.processingStatus === 4096 ||
              order.processingStatus === 16777216)
          "
        >
          <lib-icon name="Icon_Close_gray"></lib-icon>
        </span>
        {{ order.processingStatus | orderStatus }}</span
      >
      <span *ngIf="order.shelfOrderItemLevel === 2"></span>
    </div>
    <!-- <app-button [primary]="true">Auswählen</app-button> -->
  </div>
</div>
