<div class="package-details-list-item__product-image-wrapper">
  <img class="package-details-list-item__product-image" [src]="item?.product?.ean | productImage" [alt]="item?.product?.name" />
</div>

<div class="flex flex-col grow">
  <div class="flex flex-row h-[84px]">
    <div class="grow">
      <h4 class="package-details-list-item__contributors">{{ item?.product?.contributors }}</h4>
      <h3 class="package-details-list-item__name">{{ item?.product?.name }}</h3>
    </div>
    <div class="package-details-list-item__shelf-info text-right shrink-0">{{ compartment$ | async }}</div>
  </div>
  <div class="package-details-list-item__product-details">
    <div class="package-details-list-item__product-details-1">
      <div class="package-details-list-item__format">
        <img src="/assets/images/Icon_{{ item?.product?.format }}.svg" [alt]="item?.product?.formatDetail" />
        <span>{{ item?.product?.formatDetail }}</span>
      </div>
      <div class="package-details-list-item__ean">
        {{ item?.product?.ean }}
      </div>
      <div class="package-details-list-item__series">
        @if (item?.product?.volume) {
          <span>Band/Serie {{ item?.product?.volume }}</span>
        }
      </div>
    </div>

    @if (showStockInfos$ | async) {
      <div class="package-details-list-item__product-details-2">
        <div class="package-details-list-item__inventory-quantity">
          <div class="grow">
            @if (showStockInfoTooltip$ | async) {
              <button
                class="isa-icon-button mr-2"
                [class.text-white]="uiOverlayTrigger.opened"
                [class.bg-active-branch]="uiOverlayTrigger.opened"
                [class.border-active-branch]="uiOverlayTrigger.opened"
                [uiOverlayTrigger]="infoTooltip"
                #uiOverlayTrigger="uiOverlayTrigger"
                >
                i
              </button>
              <ui-tooltip
                [warning]="true"
                #infoTooltip
                [xOffset]="3"
                [yOffset]="-10"
                [yPosition]="'above'"
                [xPosition]="'after'"
                [closeable]="true"
                >
                Dieser Filialbestand ist exklusive der Packstück Liefermenge.
              </ui-tooltip>
            }
            Filialbestand
          </div>
          <div class="w-16">
            <span class="filialbestand isa-label bg-accent-green px-2 font-bold">{{ inStock$ | async | max: 0 }} x</span>
          </div>
        </div>
        <div class="package-details-list-item__package-quantity">
          <div class="grow">Packstück Liefermenge</div>
          <div class="w-16">
            <span class="liefermenge isa-label bg-white text-black px-2 font-bold">{{ item?.quantity }}x</span>
          </div>
        </div>
        @if (item?.quantity == 0 && (sscText$ | async)) {
          <div class="package-details-list-item__ssc-text">MS: {{ sscText$ | async }}</div>
        }
      </div>
    }
  </div>
</div>
