@if (showCompartmentCode && item?.compartmentCode) {
  <div class="goods-in-out-order-group-item-compartment">
    {{ item?.compartmentCode }}
    {{ item.compartmentInfo && '_' + item.compartmentInfo }}
  </div>
}
@if (item.features?.paid && !isKulturpass) {
  <div class="goods-in-out-order-group-item-paid">
    <ui-icon size="12px" icon="check"></ui-icon>
    <strong>{{ item.features?.paid }}</strong>
  </div>
}
@if (isKulturpass) {
  <div class="goods-in-out-order-group-item-paid text-[#26830C]">
    <svg class="fill-current mr-2" xmlns="http://www.w3.org/2000/svg" height="22" viewBox="0 -960 960 960" width="22">
      <path
        d="M880-740v520q0 24-18 42t-42 18H140q-24 0-42-18t-18-42v-520q0-24 18-42t42-18h680q24 0 42 18t18 42ZM140-631h680v-109H140v109Zm0 129v282h680v-282H140Zm0 282v-520 520Z"
        />
      </svg>
      <strong>Bezahlt über KulturPass</strong>
    </div>
  }
  <div class="goods-in-out-order-group-item-details">
    <div class="goods-in-out-order-group-item-details-thumbnail">
      @if (item?.product?.ean | productImage; as productImage) {
        <img
          [productImageNavigation]="item?.product?.ean"
          loading="lazy"
          [src]="productImage"
          [alt]="item?.product?.name"
          />
      }
    </div>
    <div data-which="item-details-data" class="goods-in-out-order-group-item-details-data">
      @if (item?.product?.productGroup) {
        <div
          data-what="product-group"
          class="goods-in-out-order-group-item-details__product-group flex flex-row justify-end items-center text-p3"
          >
          {{ item?.product?.productGroup }}: {{ item?.product?.productGroup | productGroup }}
        </div>
      }
      @if (compartmentFromStock) {
        <div
          data-what="compartment"
          class="goods-in-out-order-group-item-details__compartment flex flex-row justify-end items-center text-p3"
          >
          {{ compartmentFromStock }}
        </div>
      }
      <div class="item-top-row">
        <div class="item-title">{{ [item.product.contributors, item.product.name] | title }}</div>
        <div class="item-processing-status">
          @if (item.processingStatus | processingStatus: 'icon'; as icon) {
            <ui-icon size="12px" [icon]="icon"></ui-icon>
          }
          {{ item.processingStatus | processingStatus }}
        </div>
      </div>
      <div class="item-data-comment">
        {{ item.specialComment }}
      </div>
      <div class="item-data-wrapper">
        <div class="item-data">
          <div
            class="item-format"
            [class.invisible]="!item?.product?.format || !item?.product?.formatDetail || item?.product?.format === 'UNKNOWN'"
            >
            @if (item?.product?.format && item?.product?.format !== 'UNKNOWN') {
              <img
                class="format-icon"
                [src]="'/assets/images/Icon_' + item.product?.format + '.svg'"
                [alt]="item.product?.format"
                />
            }
            {{ item.product.formatDetail }}
          </div>
          @switch (showChangeDate$ | async) {
            @case (true) {
              <div class="label-value">
                <div class="label">Geändert</div>
                <div class="value">{{ item?.processingStatusDate | date: 'dd.MM.yy | HH:mm' }} Uhr</div>
              </div>
            }
            @case (false) {
              <div class="label-value">
                <div class="label">Bestelldatum</div>
                <div class="value">{{ item?.orderDate | date: 'dd.MM.yy | HH:mm' }} Uhr</div>
              </div>
            }
          }
          <div class="item-ean">
            {{ item?.product?.ean }}
          </div>
          <div class="label-value">
            <div class="label">Menge</div>

            @if (quantityEditable$ | async) {
              <ui-quantity-dropdown
                [showTrash]="false"
                [range]="item?.quantity"
                [(ngModel)]="item.quantity"
                [showSpinner]="false"
              ></ui-quantity-dropdown>
            } @else {
              <div class="value">{{ item.quantity }}x</div>
            }
          </div>
          <div class="item-price">
            {{ item.price | currency: 'EUR' : 'code' }}
          </div>

          @if (showSupplier) {
            <div class="label-value">
              <div class="label">Lieferant</div>
              <div class="value">{{ item.supplier }}</div>
            </div>
          } @else {
            <div class="label-value">
              @if (item.orderType === 1) {
                <div class="label">Zielfiliale</div>
                <div class="value">{{ item.targetBranch }}</div>
              } @else {
                <div class="label">Versanddatum</div>
                <div class="value">{{ item?.estimatedShippingDate | date: 'dd.MM.yy | HH:mm' }} Uhr</div>
              }
            </div>
          }

        </div>
        <div class="extended-informations">
          @if (showInStock) {
            <div class="item-stock">
              <ui-icon icon="home" size="22px"></ui-icon>
              <span>{{ getInStock(item?.product?.ean) }}x</span>
            </div>
          }
          @if (showInStock === null) {
            <ui-spinner [show]="true"></ui-spinner>
          }
          <div class="item-data-selector">
            @if (selectable) {
              <ui-select-bullet [ngModel]="selected" (ngModelChange)="setSelected($event)"></ui-select-bullet>
            }
          </div>
        </div>
      </div>
    </div>
  </div>
