<div class="goods-in-out-order-group-item-compartment" *ngIf="showCompartmentCode && item?.compartmentCode">
  {{ item?.compartmentCode }}
  {{ item.compartmentInfo && '_' + item.compartmentInfo }}
</div>
<div class="goods-in-out-order-group-item-paid" *ngIf="item.features?.paid">
  <ui-icon size="12px" icon="check"></ui-icon>
  <strong> {{ item.features?.paid }} </strong>
</div>
<div class="goods-in-out-order-group-item-details">
  <div class="goods-in-out-order-group-item-details-thumbnail">
    <img loading="lazy" *ngIf="item?.product?.ean | productImage; let productImage" [src]="productImage" [alt]="item?.product?.title" />
  </div>
  <div class="goods-in-out-order-group-item-details-data">
    <div class="item-top-row">
      <div class="item-title">{{ [item.product.contributors, item.product.name] | title }}</div>
      <div class="item-processing-status">
        <ui-icon size="12px" *ngIf="item.processingStatus | processingStatus: 'icon'; let icon" [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'"
        >
          <img
            class="format-icon"
            *ngIf="item?.product?.format && item?.product?.format !== 'UNKNOWN'"
            [src]="'/assets/images/Icon_' + item.product?.format + '.svg'"
            [alt]="item.product?.format"
          />
          {{ item.product.formatDetail }}
        </div>
        <ng-container [ngSwitch]="showChangeDate$ | async">
          <div class="label-value" *ngSwitchCase="true">
            <div class="label">Geändert</div>
            <div class="value">{{ item?.processingStatusDate | date: 'dd.MM.yy | HH:mm' }} Uhr</div>
          </div>
          <div class="label-value" *ngSwitchCase="false">
            <div class="label">Bestelldatum</div>
            <div class="value">{{ item?.orderDate | date: 'dd.MM.yy | HH:mm' }} Uhr</div>
          </div>
        </ng-container>
        <div class="item-ean">
          {{ item?.product?.ean }}
        </div>
        <div class="label-value">
          <div class="label">Menge</div>

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

        <div class="label-value" *ngIf="showSupplier; else showBranch">
          <div class="label">Lieferant</div>
          <div class="value">{{ item.supplier }}</div>
        </div>

        <ng-template #showBranch>
          <div class="label-value">
            <div class="label">Zielfiliale</div>
            <div class="value">{{ item.targetBranch }}</div>
          </div>
        </ng-template>
      </div>
      <div class="extended-informations">
        <div *ngIf="showInStock" class="item-stock">
          <ui-icon icon="home" size="22px"></ui-icon>
          <span>{{ getInStock(item?.product?.ean) }}x</span>
        </div>
        <ui-spinner *ngIf="showInStock === null" [show]="true"></ui-spinner>
        <div class="item-data-selector">
          <ui-select-bullet *ngIf="selectable" [ngModel]="selected" (ngModelChange)="setSelected($event)"></ui-select-bullet>
        </div>
      </div>
    </div>
  </div>
</div>
