<div
  class="page-price-update-item__item-header flex flex-row w-full items-center justify-between bg-[rgba(0,128,121,0.15)] mb-px-2 px-5 h-[53px] rounded-t"
  >
  <p class="page-price-update-item__item-instruction font-bold text-lg">{{ item?.task?.instruction }}</p>
  <p class="page-price-update-item__item-due-date text-p2">
    gültig ab
    <span class="font-bold ml-2">{{ item?.task?.dueDate | date }}</span>
  </p>
</div>

<div class="page-price-update-item__item-card p-5 bg-white">
  <div class="page-price-update-item__item-thumbnail text-center mr-4 w-[47px] h-[73px]">
    @if (item?.product?.ean | productImage; as productImage) {
      <img
        class="page-price-update-item__item-image w-[47px] max-h-[73px]"
        loading="lazy"
        [src]="productImage"
        [alt]="item?.product?.name"
        />
    }
  </div>

  <div class="page-price-update-item__item-details">
    <div class="page-price-update-item__item-contributors flex flex-row">
      {{ environment.isTablet() ? (item?.product?.contributors | substr: 38) : item?.product?.contributors }}
    </div>

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

    <div class="page-price-update-item__item-format">
      @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"
              />
          }
          {{ environment.isTablet() ? (item?.product?.formatDetail | substr: 25) : item?.product?.formatDetail }}
        </div>
      }
    </div>

    <div class="page-price-update-item__item-misc">
      {{ environment.isTablet() ? (item?.product?.manufacturer | substr: 18) : item?.product?.manufacturer }} | {{ item?.product?.ean }}
      <br />
      {{ item?.product?.volume }}
      @if (item?.product?.volume && item?.product?.publicationDate) {
        <span>|</span>
      }
      {{ publicationDate }}
    </div>
  </div>

  <div class="page-price-update-item__item-addition">
    <div class="page-price-update-item__item-product-group-details text-right">
      {{ item?.product?.productGroupDetails }}
    </div>
    <div class="page-price-update-item__item-compartment">
      {{ item?.compartmentInfo?.label }}
    </div>
    <div class="page-price-update-item__item-price font-bold">
      {{ item?.product?.price?.value?.value | currency: 'EUR' : 'code' }}
    </div>

    <div class="page-price-update-item__item-select-bullet">
      @if (isSelectable) {
        <input [ngModel]="selected" (ngModelChange)="setSelected()" class="isa-select-bullet" type="checkbox" />
      }
    </div>

    <div class="page-price-update-item__item-stock flex flex-row font-bold">
      <ui-icon class="mt-px-2 mr-1" icon="home" size="1em"></ui-icon>
      @if (inStock$ | async; as stock) {
        <span
          [class.skeleton]="stock?.inStock === undefined"
          class="min-w-[1rem] text-right inline-block"
          >
          {{ stock?.inStock }}
        </span>
      }
      x
    </div>
  </div>
</div>
