<div class="tags" *ngIf="item.features">
  <lib-icon *ngIf="item.features?.prebooked" name="tag_icon_preorder" height="48px"></lib-icon>
</div>
<div class="feature-spacing" *ngIf="item.features"></div>
<div class="isa-text-right isa-mb-9 isa-font-size-24" *ngIf="item.compartmentCode && displayCompartmentCode">
  <strong>{{ item.compartmentCode }}{{ item.compartmentInfo && '_' + item.compartmentInfo }} </strong>
</div>
<div class="paid isa-mt-9 isa-mb-9" *ngIf="item.features?.paid">
  <lib-icon height="24px" width="24px" name="Check_green_circle" class="isa-mr-10"></lib-icon>
  <strong> {{ item.features?.paid }} </strong>
</div>
<div class="grid-container">
  <div class="cover">
    <img class="thumbnail" src="https://produktbilder.ihugendubel.de/{{ item.product.ean }}.jpg?showDummy=true" alt="item.product.name" />
  </div>
  <div class="title">
    <strong class="product-name"> {{ [item.product.contributors, item.product.name] | title }}</strong>
    <strong class="processing-status">
      <lib-icon class="isa-mr-9" *ngIf="item.processingStatus | processingStatus: 'icon'; let icon" [name]="icon" [ngClass]="icon">
      </lib-icon>
      {{ item.processingStatus | processingStatus }}
    </strong>
  </div>
  <div class="comment">
    <strong>{{ item.specialComment }}</strong>
  </div>
  <div class="details">
    <div class="item-type">
      <lib-icon class="isa-mr-9" name="Icon_{{ item.product.format }}"></lib-icon>
      <strong>{{ item.product.formatDetail }}</strong>
    </div>
    <ng-container [ngSwitch]="item.processingStatus">
      <div class="order-date spec" *ngSwitchCase="256">
        <span>Geändert</span>
        <strong>{{ item.processingStatusDate | date: 'dd.MM.yy | HH:mm' }} Uhr</strong>
      </div>
      <div class="order-date spec" *ngSwitchCase="512">
        <span>Geändert</span>
        <strong>{{ item.processingStatusDate | date: 'dd.MM.yy | HH:mm' }} Uhr</strong>
      </div>
      <div class="order-date spec" *ngSwitchCase="2048">
        <span>Geändert</span>
        <strong>{{ item.processingStatusDate | date: 'dd.MM.yy | HH:mm' }} Uhr</strong>
      </div>
      <div class="order-date spec" *ngSwitchDefault>
        <span>Bestelldatum</span>
        <strong>{{ item.orderDate | date: 'dd.MM.yy | HH:mm' }} Uhr</strong>
      </div>
    </ng-container>
    <div class="item-number">
      <strong>{{ item.product.ean }}</strong>
    </div>
    <div class="quantity spec">
      <span>Menge</span>
      <strong>{{ item.quantity }}x</strong>
    </div>
    <div class="price">
      <strong>{{ item.price | currency: 'EUR':'code' }}</strong>
    </div>
    <div class="target-branch spec">
      <span>Zielfiliale</span>
      <strong>{{ item.targetBranch }}</strong>
    </div>
  </div>
</div>
