<div class="item-thumbnail">
  <a
    [routerLink]="productSearchDetailsPath"
    [queryParams]="{ main_qs: item?.product?.ean }"
  >
    @if (item?.product?.ean | productImage; as thumbnailUrl) {
      <img loading="lazy" [src]="thumbnailUrl" [alt]="item?.product?.name" />
    }
  </a>
</div>

<div class="item-contributors">
  @for (
    contributor of contributors$ | async;
    track contributor;
    let last = $last
  ) {
    <a
      [routerLink]="productSearchResultsPath"
      [queryParams]="{ main_qs: contributor, main_author: 'author' }"
      (click)="$event?.stopPropagation()"
    >
      {{ contributor }}{{ last ? '' : ';' }}
    </a>
  }
</div>

<div
  class="item-title font-bold text-h2 mb-4"
  [class.text-h3]="item?.product?.name?.length >= 40 && isTablet"
  [class.text-p1]="item?.product?.name?.length >= 50 || !isTablet"
  [class.text-p2]="item?.product?.name?.length >= 60 && isTablet"
  [class.text-p3]="item?.product?.name?.length >= 100"
>
  <a
    [routerLink]="productSearchDetailsPath"
    [queryParams]="{ main_qs: item?.product?.ean }"
    >{{ item?.product?.name }}</a
  >
</div>

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

<div class="item-info text-p2">
  <div class="mb-1">
    {{ item?.product?.manufacturer | substr: 25 }} | {{ item?.product?.ean }}
  </div>
  <div class="mb-1">
    {{ item?.product?.volume }}
    @if (item?.product?.volume && item?.product?.publicationDate) {
      <span>|</span>
    }
    {{ item?.product?.publicationDate | date }}
  </div>
  @if (notAvailable$ | async) {
    <div>
      <span class="text-brand item-date">Nicht verfügbar</span>
    </div>
  }

  @if (refreshingAvailabilit$ | async) {
    <shared-skeleton-loader class="w-40"></shared-skeleton-loader>
  } @else {
    @if (orderType === 'Abholung') {
      <div
        class="item-date"
        [class.availability-changed]="estimatedShippingDateChanged$ | async"
      >
        Abholung ab {{ item?.availability?.estimatedShippingDate | date }}
      </div>
    }
    @if (
      orderType === 'Versand' ||
      orderType === 'B2B-Versand' ||
      orderType === 'DIG-Versand'
    ) {
      <div
        class="item-date"
        [class.availability-changed]="estimatedShippingDateChanged$ | async"
      >
        @if (item?.availability?.estimatedDelivery) {
          Zustellung zwischen
          {{
            (
              item?.availability?.estimatedDelivery?.start | date: 'EEE, dd.MM.'
            )?.replace('.', '')
          }}
          und
          {{
            (
              item?.availability?.estimatedDelivery?.stop | date: 'EEE, dd.MM.'
            )?.replace('.', '')
          }}
        } @else {
          Versand {{ item?.availability?.estimatedShippingDate | date }}
        }
      </div>
    }
  }

  @if (olaError$ | async) {
    <div class="item-availability-message">Artikel nicht verfügbar</div>
  }
</div>

<div class="item-price-stock flex flex-col">
  <div class="text-p2 font-bold">
    {{ item?.availability?.price?.value?.value | currency: 'EUR' : 'code' }}
  </div>
  <div class="text-p2 font-normal">
    @if (!(isDummy$ | async)) {
      <ui-quantity-dropdown
        [ngModel]="item?.quantity"
        (ngModelChange)="onChangeQuantity($event)"
        [showSpinner]="(loadingOnQuantityChangeById$ | async) === item?.id"
        [disabled]="(loadingOnItemChangeById$ | async) === item?.id"
        [range]="quantityRange$ | async"
      ></ui-quantity-dropdown>
    } @else {
      <div class="mt-2">{{ item?.quantity }}x</div>
    }
  </div>
  @if (quantityError) {
    <div class="quantity-error">
      {{ quantityError }}
    </div>
  }
</div>

@if (orderType !== 'Download') {
  <div class="actions">
    @if (!(hasOrderType$ | async)) {
      <button
        [disabled]="
          (loadingOnQuantityChangeById$ | async) === item?.id ||
          (loadingOnItemChangeById$ | async) === item?.id
        "
        (click)="onChangeItem()"
      >
        <ui-spinner [show]="(loadingOnItemChangeById$ | async) === item?.id"
          >Lieferweg auswählen</ui-spinner
        >
      </button>
    }
    @if (canEdit$ | async) {
      <button
        [disabled]="
          (loadingOnQuantityChangeById$ | async) === item?.id ||
          (loadingOnItemChangeById$ | async) === item?.id
        "
        (click)="onChangeItem()"
      >
        <ui-spinner [show]="(loadingOnItemChangeById$ | async) === item?.id"
          >Lieferweg ändern</ui-spinner
        >
      </button>
    }
  </div>
}
