<a
  class="page-customer-order-item__item-card hover p-5 desktop-small:px-[0.875rem] desktop-small:py-[0.625rem] bg-white border border-solid border-transparent rounded"
  [class.page-customer-order-item__item-card-main]="primaryOutletActive"
  [routerLink]="detailsLink"
  [routerLinkActive]="!isTablet && !primaryOutletActive ? 'active' : ''"
  [queryParams]="queryParams"
  (click)="isDesktopLarge ? scrollIntoView() : ''"
  >
  <div
    class="page-customer-order-item__item-grid-container"
    [class.page-customer-order-item__item-grid-container-main]="primaryOutletActive"
    >
    <div class="page-customer-order-item__item-thumbnail text-center mr-4 w-[3.125rem] h-[4.9375rem]">
      @if (item?.product?.ean | productImage; as productImage) {
        <img
          class="page-customer-order-item__item-image w-[3.125rem] max-h-[4.9375rem]"
          loading="lazy"
          [src]="productImage"
          [alt]="item?.product?.name"
          />
      }
    </div>

    <div
      class="page-customer-order-item__item-title font-bold text-p2"
      [class.text-h3]="item?.product?.name?.length >= 35 && isTablet"
      [class.text-p1]="item?.product?.name?.length >= 40 && isTablet"
      [class.text-p2]="item?.product?.name?.length >= 50 && isTablet"
      [class.text-p3]="item?.product?.name?.length >= 60 || !isTablet"
      [class.text-p4]="item?.product?.name?.length >= 100"
      >
      {{ item?.product?.name }}
    </div>

    <div class="page-customer-order-item__item-special-comment break-words font-bold text-p3 text-[#BE8100]">
      {{ item?.specialComment }}
    </div>

    @if (primaryOutletActive) {
      <div class="page-customer-order-item__item-format desktop-small:text-p2">
        @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>
    }

    @if (primaryOutletActive) {
      <div class="page-customer-order-item__item-ean desktop-small:text-p2">
        {{ item?.product?.ean }}
      </div>
    }

    @if (primaryOutletActive) {
      <div class="page-customer-order-item__item-price desktop-small:text-p2 font-bold">
        {{ item.price | currency: 'EUR' : 'code' }}
      </div>
    }

    @if (primaryOutletActive) {
      <div class="page-customer-order-item__item-changed desktop-small:text-p2">
        @switch (showChangeDate$ | async) {
          @case (true) {
            <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>
          }
          @case (false) {
            <div class="flex flex-row">
              <div class="min-w-[7.5rem]">Bestelldatum</div>
              <div class="font-bold">{{ item?.orderDate | date: 'dd.MM.yy | HH:mm' }} Uhr</div>
            </div>
          }
        }
      </div>
    }

    @if (primaryOutletActive) {
      <div class="page-customer-order-item__item-quantity flex flex-row desktop-small:text-p2">
        <div class="min-w-[7.5rem]">Menge</div>
        <div class="font-bold">{{ item.quantity }} x</div>
      </div>
    }

    @if (primaryOutletActive) {
      <div class="page-customer-order-item__item-target-branch flex flex-row desktop-small:text-p2">
        @if (item.orderType === 1) {
          <div class="min-w-[7.5rem]">Zielfiliale</div>
          <div class="font-bold">{{ item.targetBranch }}</div>
        } @else {
          <div class="min-w-[7.5rem]">Versanddatum</div>
          <div class="font-bold">{{ item?.estimatedShippingDate | date: 'dd.MM.yy | HH:mm' }} Uhr</div>
        }
      </div>
    }

    @if (!primaryOutletActive) {
      <hr
        class="page-customer-order-item__separator border-[#EDEFF0] border-solid border-[1px] -mx-[0.875rem]"
        />
    }

    <div
      class="page-customer-order-item__item-order-number desktop-small:text-xl justify-self-end font-bold"
      [class.page-customer-order-item__item-order-number-main]="!primaryOutletActive"
      >
      @if (item?.compartmentCode) {
        {{ item?.compartmentCode }}{{ item?.compartmentInfo && '_' + item?.compartmentInfo }}
      } @else {
        {{ item?.orderNumber }}
      }
    </div>

    <div
      class="page-customer-order-item__item-processing-paid-status flex flex-col font-bold desktop-small:text-p2 justify-self-end self-center"
      >
      <div class="page-customer-order-item__item-processing-status flex flex-row mb-[0.375rem]">
        @if (item.processingStatus | processingStatus: 'icon'; as icon) {
          <shared-icon
            class="flex items-center justify-center mr-1"
            [size]="16"
            [icon]="icon"
          ></shared-icon>
        }
        {{ item.processingStatus | processingStatus }}
      </div>

      <div class="page-customer-order-item__item-paid flex flex-row self-end">
        @if (item.features?.paid) {
          <div class="font-bold w-fit desktop-small:text-p2 px-3 py-[0.125rem] rounded text-white bg-[#26830C]">
            {{ item.features?.paid }}
          </div>
        }
      </div>
    </div>
  </div>
</a>
