<div class="item-thumbnail">
  <a [routerLink]="['/kunde', application.activatedProcessId, 'product', 'details', 'ean', item?.product?.ean]">
    <img loading="lazy" *ngIf="item?.product?.ean | productImage; let thumbnailUrl" [src]="thumbnailUrl" [alt]="item?.product?.title" />
  </a>
</div>

<div class="item-contributors">
  <a
    *ngFor="let contributor of contributors$ | async; let last = last"
    [routerLink]="['/kunde', application.activatedProcessId, 'product', 'search', 'results']"
    [queryParams]="{ main_qs: contributor, main_author: 'author' }"
    (click)="$event?.stopPropagation()"
  >
    {{ contributor }}{{ last ? '' : ';' }}
  </a>
</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"
>
  <a [routerLink]="['/kunde', application.activatedProcessId, 'product', 'details', 'ean', item?.product?.ean]">{{
    item?.product?.name
  }}</a>
</div>

<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 }}

  <div class="item-date" *ngIf="orderType === 'Abholung'">Abholung ab {{ item?.availability?.estimatedShippingDate | date }}</div>
  <div class="item-date" *ngIf="orderType === 'Versand' || orderType === 'B2B-Versand' || orderType === 'DIG-Versand'">
    <ng-container *ngIf="item?.availability?.estimatedDelivery; else estimatedShippingDate">
      Zustellung zwischen {{ (item?.availability?.estimatedDelivery?.start | date: 'EEE, dd.MM.')?.replace('.', '') }} und
      {{ (item?.availability?.estimatedDelivery?.stop | date: 'EEE, dd.MM.')?.replace('.', '') }}
    </ng-container>
    <ng-template #estimatedShippingDate> Versand {{ item?.availability?.estimatedShippingDate | date }} </ng-template>
  </div>

  <div class="item-availability-message" *ngIf="olaError$ | async">
    Artikel nicht verfügbar
  </div>
</div>

<div class="item-price-stock">
  <div>{{ item?.availability?.price?.value?.value | currency: 'EUR':'code' }}</div>
  <div>
    <ui-quantity-dropdown
      *ngIf="!(isDummy$ | async); else quantityDummy"
      [ngModel]="item?.quantity"
      (ngModelChange)="onChangeQuantity($event)"
      [showSpinner]="(loadingOnQuantityChangeById$ | async) === item?.id"
      [disabled]="(loadingOnItemChangeById$ | async) === item?.id"
      [range]="quantityRange$ | async"
    >
    </ui-quantity-dropdown>
    <ng-template #quantityDummy>
      {{ item?.quantity }}
    </ng-template>
  </div>
  <div class="quantity-error" *ngIf="quantityError">
    {{ quantityError }}
  </div>
</div>

<div class="actions" *ngIf="orderType !== 'Download'">
  <button
    [disabled]="(loadingOnQuantityChangeById$ | async) === item?.id || (loadingOnItemChangeById$ | async) === item?.id"
    (click)="onChangeItem()"
    *ngIf="!(hasOrderType$ | async)"
  >
    <ui-spinner [show]="(loadingOnItemChangeById$ | async) === item?.id">
      Auswählen
    </ui-spinner>
  </button>
  <button
    [disabled]="(loadingOnQuantityChangeById$ | async) === item?.id || (loadingOnItemChangeById$ | async) === item?.id"
    (click)="onChangeItem()"
    *ngIf="(isDummy$ | async) || (hasOrderType$ | async)"
  >
    <ui-spinner [show]="(loadingOnItemChangeById$ | async) === item?.id">
      Ändern
    </ui-spinner>
  </button>
</div>
