<div class="item-list">
  <ng-container *ngFor="let item of displaySelectedOrderItems; let i = index">
    <hr />
    <div class="item-content">
      <div class="book-title-container">
        <img class="book-img" src="{{ item.imgUrl | bookImageUrl | async }}" alt="book" />
        <span class="book-title">{{ item.book.name }}</span>
      </div>
      <div class="order-details">
        <div class="order-icon">
          <lib-icon pt="5px" name="OF_Icon_{{ item.book.format }}" alt="book-icon" class="book-img-type"></lib-icon>
        </div>
        <div class="separator" *ngIf="item && item.book && item.book.format">I</div>
        <div class="format">{{ item.book.format }}</div>
        <div class="separator" *ngIf="item && item.book && item.book.contributors">I</div>
        <div class="book-manufactor">{{ item.book.contributors }}</div>
        <div class="separator">I</div>
        <div class="order-details-type">
          <ng-container *ngIf="item.orderType === 1 && !item.isTakeNow && !item.isDownload"
            >&nbsp;Abholung ab {{ item.pickUpDate | date: 'dd.MM.yy' }}</ng-container
          >
          <ng-container *ngIf="item.orderType === 1 && item.isTakeNow && !item.isDownload">&nbsp;Rücklage</ng-container>
          <ng-container *ngIf="item.orderType === 2 && !item.isDownload"
            >&nbsp;Versand {{ item.deliveryDate | date: 'dd.MM.yy' }}</ng-container
          >
          <ng-container *ngIf="item.isDownload">&nbsp;Download</ng-container>
        </div>
      </div>
      <div class="quantity-wrapper align-center">
        <span class="quantity">{{ item.quantity }}x</span>
      </div>
      <div class="price-wrapper align-right" *ngIf="!isItemFailed(item.id, item.orderType === 2, item.orderType === 1 && item.isTakeNow)">
        <span class="price">{{ item.price | bookPrice }} {{ item.currency }}</span>
      </div>
      <div
        class="failed-item-help-wrapper align-center"
        *ngIf="isItemFailed(item.id, item.orderType === 2, item.orderType === 1 && item.isTakeNow)"
        (click)="openTooltip(item.id, item.orderType === 2, item.orderType === 1 && item.isTakeNow)"
      >
        <lib-icon width="20px" name="help"></lib-icon>
      </div>
    </div>
    <div
      *ngIf="
        isItemFailed(item.id, item.orderType === 2, item.orderType === 1 && item.isTakeNow) &&
        isTooltipOpen(item.id, item.orderType === 2, item.orderType === 1 && item.isTakeNow)
      "
      class="tooltip"
    >
      <span>
        Dieser Artikel konnte nicht bestellt werden
      </span>
      <span class="tooltip-close" (click)="closeTooltip()"><lib-icon width="11px" name="Delete-white"></lib-icon></span>
    </div>
    <div
      class="arrow-down"
      *ngIf="
        isItemFailed(item.id, item.orderType === 2, item.orderType === 1 && item.isTakeNow) &&
        isTooltipOpen(item.id, item.orderType === 2, item.orderType === 1 && item.isTakeNow)
      "
    ></div>
  </ng-container>
  <hr />
</div>
