<div class="item-header-details grid grid-flow-col w-full">
  <div class="contributors text-black font-bold overflow-hidden text-p2 overflow-ellipsis whitespace-nowrap">
    @for (contributor of contributors; track contributor; let last = $last) {
      <a [class.mr-2]="!last">{{ last ? contributor : contributor + ';' }}</a>
    }
  </div>
  <h3
    class="title font-bold text-h3"
    [class.xl]="item?.dto?.product?.name?.length >= 35"
    [class.lg]="item?.dto?.product?.name?.length >= 40"
    [class.md]="item?.dto?.product?.name?.length >= 50"
    [class.sm]="item?.dto?.product?.name?.length >= 60"
    [class.xs]="item?.dto?.product?.name?.length >= 100"
    >
    {{ item.title }}
  </h3>
</div>
@if (showImpediment) {
  <div class="grid grid-flow-col items-start text-p2 font-bold text-dark-goldenrod">
    <span>
      {{ item?.dto?.impediment?.comment ? item?.dto?.impediment?.comment : 'Restmenge' }}
      @if (item?.dto?.impediment?.attempts) {
        ({{ item?.dto?.impediment?.attempts }})
      }
    </span>
  </div>
}
<div class="product-data-grid grid gap-6 items-start">
  <div>
    <img
      [productImageNavigation]="item?.ean"
      class="max-w-full max-h-full shadow rounded"
      src="{{ item.ean | productImage }}"
      alt="item.dto.product.name"
      />
    </div>

    <div class="grid grid-flow-row gap-1 w-48">
      @if (formatAvailable) {
        <div class="overflow-hidden overflow-ellipsis whitespace-nowrap">
          @if (formatIconAvailable) {
            <img
              class="inline mr-1"
              [src]="formatIconUrl"
              [alt]="item.formatDetail"
              (error)="formatIconAvailable = false"
              />
          }
          <span class="font-bold format-detail">{{ item.formatDetail }}</span>
        </div>
      }
      <div class="font-bold ean">
        {{ item.ean }}
      </div>
      <div class="font-bold price">
        {{ item.price.value.value | currency: item.price.value.currency : 'code' }}
      </div>
      @if (item.assortment | assortment; as assortment) {
        <div>
          <button [uiOverlayTrigger]="assortmentTooltip" data-name="assortment" class="text-active-branch font-bold">
            {{ assortment.key }}
          </button>
          <ui-tooltip yPosition="above" xPosition="before" [yOffset]="-11" [xOffset]="-11" #assortmentTooltip [closeable]="true">
            {{ assortment.label }}
          </ui-tooltip>
        </div>
      }
    </div>

    <div class="grid grid-flow-row gap-1">
      <div class="grid grid-flow-col gap-1 justify-start">
        <div class="w-40">aktueller Bestand</div>
        <div class="font-bold in-stock">{{ item.inStock }}x</div>
      </div>
      <div class="grid grid-flow-col gap-1 justify-start">
        <div class="w-40">Remi-Menge</div>
        <div class="font-bold remission-quantity">{{ item.remissionQuantity }}x</div>
      </div>
      <div class="grid grid-flow-col gap-1 justify-start">
        <div class="w-40">übriger Bestand</div>
        <div class="font-bold remaining-quantity">{{ item.remainingQuantity }}x</div>
      </div>
      <div class="grid grid-flow-col gap-1 justify-start">
        <div class="w-40">Platz</div>
        <div class="font-bold placement-type">{{ item.placementType }}</div>
      </div>
      @if (item.remissionReason) {
        <div class="grid grid-flow-col gap-1 justify-start">
          <div class="w-40">Remigrund</div>
          <div class="font-bold remission-reason">{{ item.remissionReason }}</div>
        </div>
      }
    </div>
  </div>

  <div class="grid grid-flow-row-dense text-active-branch text-right">
    <div>
      {{ item?.dto?.department }}
      @if (item?.dto?.department && item?.dto?.shelfLabel) {
        <span>/</span>
      }
      {{ item?.dto?.shelfLabel }}
    </div>
    <div>{{ item.productGroup }}:{{ item.productGroup | productGroup }}</div>
  </div>

  @if (!!returnDto) {
    <div class="grid grid-flow-col justify-self-end gap-2 items-center">
      @if (enableChangeRemissionQuantity) {
        <button
          [disabled]="loading$ | async"
          class="text-brand text-p2 font-bold px-6 py-3 cta-change-remission-quantity"
          (click)="addProductToShippingDocument()"
          >
          <ui-spinner [show]="loading$ | async">Remi-Menge / Platzierung ändern</ui-spinner>
        </button>
      }
      @if (enableToRemit) {
        <button
          [disabled]="loading$ | async"
          class="bg-white border-brand border-solid border-2 text-brand font-bold text-p2 px-6 py-3 rounded-full h-12 cta-remit-item"
          (click)="remit()"
          >
          <ui-spinner [show]="loading$ | async">Remittieren</ui-spinner>
        </button>
      }
    </div>
  } @else {
    @if (item?.dto?.source === 'manually-added') {
      <div class="grid grid-flow-col justify-self-end gap-2">
        <button [disabled]="loading$ | async" class="text-brand text-p2 font-bold px-6 py-3 cta-remove-item" (click)="removeReturnItem()">
          <ui-spinner [show]="loading$ | async">Entfernen</ui-spinner>
        </button>
      </div>
    }
  }

