<div class="item-thumbnail">
  <img loading="lazy" *ngIf="item?.product?.ean | productImage; let thumbnailUrl" [src]="thumbnailUrl" [alt]="item?.product?.title" />
</div>

<div class="item-contributors">
  {{ item.product.contributors }}
</div>

<div
  class="item-title"
  [class.xl]="item?.product?.name?.length >= 35"
  [class.lg]="item?.product?.name?.length >= 40"
  [class.md]="item?.product?.name?.length >= 50"
  [class.sm]="item?.product?.name?.length >= 60"
  [class.xs]="item?.product?.name?.length >= 100"
>
  {{ item?.product?.name }}
</div>

<ng-container *ngIf="canAdd$ | async; let canAdd">
  <div class="item-can-add" *ngIf="canAdd !== true">
    {{ canAdd }}
  </div>
</ng-container>

<div class="item-format" *ngIf="item?.product?.format && item?.product?.formatDetail">
  <img
    *ngIf="item?.product?.format !== '--'"
    src="assets/images/Icon_{{ item?.product?.format }}.svg"
    [alt]="item?.product?.formatDetail"
  />
  {{ item?.product?.formatDetail }}
</div>

<div class="item-info">
  {{ item?.product?.manufacturer | substr: 18 }} | {{ item?.product?.ean }} <br />
  {{ item?.product?.volume }} <span *ngIf="item?.product?.volume && item?.product?.publicationDate">|</span>
  {{ item?.product?.publicationDate | date: 'dd. MMMM yyyy' }}
</div>

<div class="item-price-stock">
  <div class="price">
    <ng-container *ngIf="showTooltip$ | async">
      <button [uiOverlayTrigger]="tooltipContent" #tooltip="uiOverlayTrigger" class="info-tooltip-button" type="button">
        i
      </button>
      <ui-tooltip #tooltipContent yPosition="above" xPosition="after" [yOffset]="-16">
        Günstigerer Preis aus Hugendubel Katalog wird übernommen
      </ui-tooltip>
    </ng-container>

    <div *ngIf="price$ | async; let price">{{ price?.value?.value | currency: price?.value?.currency:'code' }}</div>
  </div>

  <div>
    <ui-quantity-dropdown
      [disabled]="fetchingAvailabilities$ | async"
      [ngModel]="item.quantity"
      (ngModelChange)="changeQuantity($event)"
      [range]="quantityRange$ | async"
    >
    </ui-quantity-dropdown>
  </div>
</div>

<div class="item-select">
  <ui-select-bullet
    *ngIf="selectVisible$ | async"
    [disabled]="selectDisabled$ | async"
    [ngModel]="isSelected$ | async"
    (ngModelChange)="selected($event)"
  ></ui-select-bullet>
</div>

<div class="item-availability">
  <div class="fetching" *ngIf="fetchingAvailabilities$ | async; else availabilities"></div>
  <ng-template #availabilities>
    <ng-container *ngIf="notAvailable$ | async; else available">
      <span class="hint">Derzeit nicht bestellbar</span>
    </ng-container>

    <ng-template #available>
      <span>Verfügbar als</span>
      <div *ngIf="takeAwayAvailabilities$ | async; let takeAwayAvailabilites">
        <ui-icon icon="shopping_bag" size="18px"></ui-icon>
        <span class="instock">{{ takeAwayAvailabilites?.inStock }}x</span> ab sofort
      </div>

      <div *ngIf="!!(pickUpAvailabilities$ | async)">
        <ui-icon icon="box_out" size="18px"></ui-icon>
        {{ (pickUpAvailabilities$ | async)?.estimatedShippingDate | date: 'dd. MMMM yyyy' }}
      </div>

      <div *ngIf="!!(deliveryDigAvailabilities$ | async); else b2b">
        <ui-icon class="truck" icon="truck" size="30px"></ui-icon>
        <ng-container *ngIf="deliveryDigAvailabilities$ | async; let deliveryDigAvailabilities">
          <ng-container *ngIf="deliveryDigAvailabilities?.estimatedDelivery; else estimatedShippingDate">
            {{ (deliveryDigAvailabilities?.estimatedDelivery?.start | date: 'EEE, dd.MM.')?.replace('.', '') }} -
            {{ (deliveryDigAvailabilities?.estimatedDelivery?.stop | date: 'EEE, dd.MM.')?.replace('.', '') }}
          </ng-container>
          <ng-template #estimatedShippingDate>
            {{ deliveryDigAvailabilities.estimatedShippingDate | date: 'dd. MMMM yyyy' }}
          </ng-template>
        </ng-container>
      </div>

      <ng-template #b2b>
        <div *ngIf="!!(deliveryB2bAvailabilities$ | async)">
          <ui-icon class="truck-b2b" icon="truck_b2b" size="40px"></ui-icon>
          {{ (deliveryB2bAvailabilities$ | async)?.estimatedShippingDate | date: 'dd. MMMM yyyy' }}
        </div>
      </ng-template>
    </ng-template>
  </ng-template>
</div>
