<img [src]="item.book.imageId | 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"></span>
    </div>
    <span class="price">{{ price | bookPrice }} {{ item.currency }}</span>
    <app-delete-dropdown
      class="quantity"
      #ref
      [selected]="1"
      [deactivateTenPlus]="deactivateTenPlus"
      [options]="availableQuantity"
      [load]="loadingBtn && (open$ | async)"
      [notUpdatable]="true"
      (delete)="deleteItem()"
    ></app-delete-dropdown>
  </div>
</div>
