<a
  class="page-pickup-shelf-list-item__item-card hover p-4 bg-white border border-solid border-transparent rounded"
  [routerLink]="itemDetailsLink"
  [routerLinkActive]="!isTablet && !primaryOutletActive ? 'active' : ''"
  queryParamsHandling="preserve"
  (click)="onDetailsClick()"
>
  <div
    class="page-pickup-shelf-list-item__item-grid-container"
    [class.page-pickup-shelf-list-item__item-grid-container-main]="
      primaryOutletActive
    "
    [class.page-pickup-shelf-list-item__item-grid-container-secondary]="
      primaryOutletActive && isItemSelectable === undefined
    "
  >
    <div class="page-pickup-shelf-list-item__item-thumbnail text-center">
      @if (item?.product?.ean | productImage; as productImage) {
        <img
          class="page-pickup-shelf-list-item__item-image w-[3.125rem] max-h-[4.9375rem]"
          loading="lazy"
          [productImageNavigation]="item?.product?.ean"
          [src]="productImage"
          [alt]="item?.product?.name"
        />
      }
    </div>

    <div
      class="page-pickup-shelf-list-item__item-title-contributors flex flex-col"
      [class.mr-32]="
        showCompartmentCode &&
        item.features?.paid &&
        (isTablet || isDesktopSmall || primaryOutletActive)
      "
    >
      @if (hasRewardPoints) {
        <ui-label class="w-10 mb-2">Prämie</ui-label>
      }

      <div
        class="page-pickup-shelf-list-item__item-contributors text-p2 font-normal text-ellipsis overflow-hidden max-w-[24rem] whitespace-nowrap mb-[0.375rem]"
      >
        @for (
          contributor of contributors;
          track contributor;
          let last = $last
        ) {
          {{ contributor }}{{ last ? '' : ';' }}
        }
      </div>

      <div
        class="page-pickup-shelf-list-item__item-title font-bold text-p1 desktop-small:text-p2"
        [class.page-pickup-shelf-list-item__item-title-bigger-text-size]="
          !primaryOutletActive
        "
      >
        {{ item?.product?.name }}
      </div>
    </div>

    <div
      class="page-pickup-shelf-list-item__item-ean-quantity-changed flex flex-col"
    >
      <div
        class="page-pickup-shelf-list-item__item-ean text-p2 flex flex-row mb-[0.375rem]"
        [attr.data-ean]="item?.product?.ean"
      >
        <div class="min-w-[7.5rem]">EAN</div>
        <div class="font-bold">{{ item?.product?.ean }}</div>
      </div>

      <div
        class="page-pickup-shelf-list-item__item-quantity flex flex-row text-p2 mb-[0.375rem]"
        [attr.data-menge]="item.quantity"
      >
        <div class="min-w-[7.5rem]">Menge</div>
        <div class="font-bold">{{ item.quantity }} x</div>
      </div>

      <div
        class="page-pickup-shelf-list-item__item-changed text-p2"
        [attr.data-geaendert]="item?.processingStatusDate"
      >
        @if (showChangeDate) {
          <div class="flex flex-row">
            <div class="min-w-[7.5rem]">Geändert</div>
            <div class="font-bold">
              {{ item?.processingStatusDate | date: 'dd.MM.yy | HH:mm' }} Uhr
            </div>
          </div>
        } @else {
          <div class="flex flex-row" [attr.data-bestelldatum]="item?.orderDate">
            <div class="min-w-[7.5rem]">Bestelldatum</div>
            <div class="font-bold">
              {{ item?.orderDate | date: 'dd.MM.yy | HH:mm' }} Uhr
            </div>
          </div>
        }
      </div>
    </div>

    <div
      class="page-pickup-shelf-list-item__item-order-number-processing-status-paid flex flex-col"
    >
      @if (showCompartmentCode) {
        <div
          class="page-pickup-shelf-list-item__item-order-number text-h3 mb-[0.375rem] self-end font-bold break-all text-right"
          [attr.data-compartment-code]="item?.compartmentCode"
          [attr.data-compartment-info]="item?.compartmentInfo"
        >
          {{ item?.compartmentCode
          }}{{ item?.compartmentInfo && '_' + item?.compartmentInfo }}
        </div>
      }

      <div
        class="page-pickup-shelf-list-item__item-processing-paid-status flex flex-col font-bold self-end text-p2 mb-[0.375rem]"
      >
        <div
          class="page-pickup-shelf-list-item__item-processing-status flex flex-row mb-[0.375rem] rounded p-3 py-[0.125rem] text-white"
          [style]="processingStatusColor"
          [attr.data-processing-status]="item.processingStatus"
        >
          {{ item.processingStatus | processingStatus }}
        </div>

        <div
          class="page-pickup-shelf-list-item__item-paid self-end flex flex-row"
        >
          @if (
            item.features?.paid &&
            (isTablet || isDesktopSmall || primaryOutletActive)
          ) {
            <div
              class="font-bold flex flex-row items-center justify-center text-p2 text-[#26830C]"
              [attr.data-paid]="item.features?.paid"
            >
              <shared-icon
                class="flex items-center justify-center mr-[0.375rem]"
                [size]="24"
                icon="credit-card"
              ></shared-icon>
              {{ item.features?.paid }}
            </div>
          }
        </div>
      </div>
    </div>

    @if (isItemSelectable) {
      <div
        class="page-pickup-shelf-list-item__item-select-bullet justify-self-end self-center mb-2"
        [class.page-pickup-shelf-list-item__item-select-bullet-primary]="
          primaryOutletActive
        "
      >
        <input
          (click)="$event.stopPropagation()"
          [ngModel]="selectedItem"
          (ngModelChange)="
            setSelected();
            tracker.trackEvent({
              category: 'pickup-shelf-list-item',
              action: 'select',
              name: item?.product?.name,
              value: $event ? 1 : 0,
            })
          "
          class="isa-select-bullet"
          type="checkbox"
          matomoTracker
          #tracker="matomo"
        />
      </div>
    }

    <div
      [attr.data-special-comment]="item?.specialComment"
      class="page-pickup-shelf-list-item__item-special-comment break-words font-bold text-p2 mt-[0.375rem] text-[#996900]"
    >
      {{ item?.specialComment }}
    </div>
  </div>
</a>
