<div
  class="page-search-result-item__item-card hover p-5 desktop-small:px-4 desktop-small:py-[0.625rem] h-[13.25rem] desktop-small:h-[11.3125rem] bg-white border border-solid border-transparent rounded"
  [class.page-search-result-item__item-card-primary]="primaryOutletActive"
  [class.active]="isActive"
  >
  <div class="page-search-result-item__item-thumbnail text-center mr-4 w-[3.125rem] h-[4.9375rem]">
    @if (item?.imageId | thumbnailUrl; as thumbnailUrl) {
      <img
        class="page-search-result-item__item-image w-[3.125rem] max-h-[4.9375rem]"
        loading="lazy"
        [src]="thumbnailUrl"
        [alt]="item?.product?.name"
        />
    }
  </div>

  <div
    class="page-search-result-item__item-grid-container"
    [class.page-search-result-item__item-grid-container-primary]="primaryOutletActive"
    >
    <div
      class="page-search-result-item__item-contributors desktop-small:text-p3 font-bold text-[#0556B4] text-ellipsis overflow-hidden max-w-[24rem] whitespace-nowrap"
      >
      @for (contributor of contributors; track contributor; let last = $last) {
        <a
          [routerLink]="resultsPath"
          [queryParams]="{ main_qs: contributor, main_author: 'author' }"
          (click)="$event?.stopPropagation()"
          >
          {{ contributor }}{{ last ? '' : ';' }}
        </a>
      }
    </div>

    <div
      class="page-search-result-item__item-title font-bold text-h3"
      [class.text-xl]="item?.product?.name?.length >= 35 && isTablet"
      [class.text-lg]="item?.product?.name?.length >= 40 && isTablet"
      [class.text-md]="item?.product?.name?.length >= 50 && isTablet"
      [class.text-p3]="item?.product?.name?.length >= 60 || !isTablet"
      [class.text-xs]="item?.product?.name?.length >= 100"
      >
      {{ item?.product?.name }}
    </div>

    <div class="page-search-result-item__item-format desktop-small:text-p3">
      @if (item?.product?.format && item?.product?.formatDetail) {
        <div class="font-bold flex flex-row">
          @if (item?.product?.format !== '--') {
            <img
              class="mr-3"
              loading="lazy"
              src="assets/images/Icon_{{ item?.product?.format }}.svg"
              [alt]="item?.product?.formatDetail"
              />
          }
          {{ item?.product?.formatDetail | substr: 30 }}
        </div>
      }
    </div>

    <div class="page-search-result-item__item-manufacturer desktop-small:text-p3">
      {{ item?.product?.manufacturer | substr: 18 }} | {{ item?.product?.ean }}
    </div>

    <div class="page-search-result-item__item-misc desktop-small:text-p3">
      {{ item?.product?.volume }}
      @if (item?.product?.volume && item?.product?.publicationDate) {
        <span>|</span>
      }
      {{ publicationDate }}
    </div>

    <div
      class="page-search-result-item__item-price desktop-small:text-p3 font-bold justify-self-end"
      [class.page-search-result-item__item-price-primary]="primaryOutletActive"
      >
      {{ item?.catalogAvailability?.price?.value?.value | currency: 'EUR' : 'code' }}
    </div>

    <div class="page-search-result-item__item-select-bullet justify-self-end">
      @if (selectable) {
        <input
          (click)="$event.stopPropagation()"
          [ngModel]="selected"
        (ngModelChange)="
          setSelected();
          tracker.trackEvent({ category: 'Trefferliste', action: 'select', name: item.product.name, value: selected ? 1 : 0 })
        "
          class="isa-select-bullet"
          type="checkbox"
          matomoTracker
          #tracker="matomo"
          />
      }
    </div>

    <button
      class="page-search-result-item__item-stock desktop-small:text-p3 font-bold z-dropdown justify-self-start flex flex-row items-center justify-center"
      [class.justify-self-end]="!primaryOutletActive"
      [uiOverlayTrigger]="tooltip"
      [overlayTriggerDisabled]="!(stockTooltipText$ | async)"
      type="button"
      (click)="$event.stopPropagation(); $event.preventDefault(); showTooltip()"
      >
      <ui-icon class="mr-[0.125rem] -mt-[0.275rem]" icon="home" size="1rem"></ui-icon>
      @if (isOrderBranch$ | async) {
        @if (inStock$ | async; as stock) {
          <span
            [class.skeleton]="stock.inStock === undefined"
            class="min-w-[0.75rem] text-right inline-block"
            >
            {{ stock?.inStock }}
          </span>
        }
      }
      @if (!(isOrderBranch$ | async)) {
        <span class="min-w-[1rem] text-center inline-block">-</span>
      }
      <span>x</span>
    </button>
    <ui-tooltip #tooltip yPosition="above" xPosition="after" [yOffset]="-12" [closeable]="true">
      {{ stockTooltipText$ | async }}
    </ui-tooltip>

    <div
      class="page-search-result-item__item-ssc desktop-small:text-p3 w-full text-right overflow-hidden text-ellipsis whitespace-nowrap"
      [class.page-search-result-item__item-ssc-primary]="primaryOutletActive"
      >
      @if (ssc$ | async; as ssc) {
        <div class="hidden" [class.page-search-result-item__item-ssc-tooltip]="primaryOutletActive">
          {{ ssc?.ssc }} - {{ ssc?.sscText }}
        </div>
        <strong>{{ ssc?.ssc }}</strong>
        - {{ ssc?.sscText }}
      }
    </div>
  </div>
</div>
