<div
  class="item-container"
  *ngIf="item"
  (click)="details()"
  [ngClass]="{
    'first-item': first,
    'last-item': last,
    'child-item': isChildItem,
    'has-trailing-item': hasTrailingItem,
    'middle-item': isChildItem && hasTrailingItem
  }"
>
  <div class="tag-wrapper" *ngIf="isSubscription || isGift || isPreorder">
    <app-goods-in-order-tag *ngIf="isSubscription" type="subscribe"></app-goods-in-order-tag>
    <app-goods-in-order-tag *ngIf="isGift" type="gift"></app-goods-in-order-tag>
    <app-goods-in-order-tag *ngIf="isPreorder" type="preorder"></app-goods-in-order-tag>
  </div>
  <div class="customer" *ngIf="!isChildItem">
    <span>
      {{ item.firstName + ' ' + item.lastName }}
    </span>
  </div>
  <div class="book">
    <div class="book-image">
      <img [src]="item.product.ean | bookImageUrl | async" alt="book" class="thumbnail" />
    </div>
    <div class="details">
      <div class="book-name">
        {{ (item.product.contributors ? item.product.contributors + ' - ' : '') + item.product.name }}
      </div>
      <div class="book-details">
        <div class="labels">
          <span>Format</span>
          <span>Bestelldatum</span>
          <span>Menge</span>
          <span>Preis</span>
          <span>ISBN</span>
          <span>Zielfiliale</span>
          <span *ngIf="item.specialComment">Anmerkung</span>
        </div>
        <div class="data">
          <span
            ><lib-icon name="Icon_{{ item.product.format }}" mt="4px" height="17px"></lib-icon
            >{{ item.product.formatDetail ? item.product.formatDetail : '&nbsp;' }}</span
          >
          <span *ngIf="item.orderDate">{{ item.orderDate | date: 'dd.MM.yy | HH:mm' }} Uhr</span>
          <span *ngIf="!item.orderDate">&nbsp;</span>
          <span>{{ item.quantity ? item.quantity : 0 }}x</span>
          <span>{{ item.price | bookPrice }}&nbsp;{{ item.currency }}</span>
          <span>{{ item.product.ean ? item.product.ean : '&nbsp;' }}</span>
          <span>{{ item.targetBranch ? item.targetBranch : '&nbsp;' }}</span>
          <span class="comment" *ngIf="item.specialComment">{{ item.specialComment }}</span>
        </div>
      </div>
      <div class="status" [ngClass]="{ 'with-tags': (isGift || isPreorder) && !first }">
        <span>
          <lib-icon *ngIf="showStatusCheckMark" name="Check_branch"></lib-icon>
          <lib-icon *ngIf="showStatusXMark" name="Icon_Close_branch"></lib-icon>
        </span>
        <span class="desc">
          {{ processingStatus }}
        </span>
      </div>
    </div>
  </div>
</div>
