<img [src]="item.imgUrl | bookImageUrl | async" alt="book" class="thumbnail" (click)="details.emit(item.book)" />
<div class="content">
  <div class="data-row">
    <span class="book-title" (click)="details.emit(item.book)">{{ item.book.product.name }}</span>
    <div class="order-details">
      <span
        ><img class="order-book-icon" src="/assets/images/Icon_{{ item.book.product.format }}.svg" alt="book-icon" />
        {{ item.book.product.manufacturer }} I {{ item.book.product.contributors }}</span
      >
      <span class="order-details-delivery-info delivery-date" *ngIf="item.pickUpDate"
        >Abholung ab {{ item.pickUpDate | date: 'dd.MM.yyyy' }}</span
      >
      <span class="order-details-delivery-info delivery-date" *ngIf="!item.pickUpDate"></span>
    </div>
    <span class="price">{{ price | bookPrice }} {{ item.currency }}</span>
    <app-delete-dropdown
      class="quantity"
      #ref
      [deactivateTenPlus]="deactivateTenPlus"
      [selected]="item.quantity"
      [options]="availableQuantity"
      [load]="loadingBtn && (open$ | async)"
      (valueChanges)="onQuantityChanged($event)"
      (delete)="deleteItem()"
      (switch)="openChangeOrderItemDialog()"
      [ddload]="true"
    ></app-delete-dropdown>
  </div>

  <div class="secondary-info">
    <div class="errors">
      <span *ngIf="quantityError">{{ quantityError }}</span>
    </div>
  </div>
</div>
<app-change-order-type
  *ngIf="open$ | async"
  #changeOrder
  (loaded)="modalReady()"
  [item]="item"
  [id]="'change-order-type-pick-up'"
  (closed)="modalClosed()"
></app-change-order-type>
