<a class="product-list-result-content" [routerLink]="['/kunde', applicationService.activatedProcessId, 'product', 'details', item?.id]">
  <div class="item-thumbnail">
    <img loading="lazy" *ngIf="item?.imageId | thumbnailUrl; let thumbnailUrl" [src]="thumbnailUrl" [alt]="item?.product?.title" />
  </div>

  <div class="item-contributors">
    <a
      *ngFor="let contributor of contributors; let last = last"
      [routerLink]="['/kunde', applicationService.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"
  >
    {{ item?.product?.name }}
  </div>

  <div class="item-price">
    {{ item?.catalogAvailability?.price?.value?.value | currency: 'EUR':'code' }}
  </div>

  <div *ngIf="selectable" class="item-data-selector">
    <ui-select-bullet [ngModel]="selected" (ngModelChange)="setSelected($event)"></ui-select-bullet>
  </div>

  <div class="item-stock"><ui-icon icon="home" size="1em"></ui-icon> {{ item?.stockInfos | stockInfos }} x</div>

  <div class="item-ssc" [class.xs]="item?.catalogAvailability?.sscText?.length >= 60">
    {{ item?.catalogAvailability?.ssc }} - {{ item?.catalogAvailability?.sscText }}
  </div>

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

  <div class="item-misc">
    {{ item?.product?.manufacturer | substr: 18 }} | {{ item?.product?.ean }} <br />
    {{ item?.product?.volume }} <span *ngIf="item?.product?.volume && item?.product?.publicationDate">|</span>
    {{ publicationDate }}
  </div>
</a>
