<div class="item-header-details grid grid-flow-col w-full">
  <div class="contributors text-black font-bold overflow-hidden text-base overflow-ellipsis whitespace-nowrap">
    <a [class.mr-2]="!last" *ngFor="let contributor of contributors; let last = last">{{ last ? contributor : contributor + ';' }}</a>
  </div>
  <h3
    class="title font-bold text-2xl"
    [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>
  <span class="product-group block text-right whitespace-nowrap text-active-branch"
    >{{ item.productGroup }}:{{ item.productGroup | productGroup }}</span
  >
  <div class="department block text-right text-inactive-branch overflow-hidden overflow-ellipsis whitespace-nowrap">
    {{ item.department }}
  </div>
</div>
<div
  *ngIf="!!returnDto && (item?.dto?.descendantOf?.enabled || item?.dto?.impediment)"
  class="grid grid-flow-col items-start text-base font-bold text-dark-goldenrod"
>
  <span
    >{{ item?.dto?.impediment?.comment ? item?.dto?.impediment?.comment : 'Restmenge' }}
    <ng-container *ngIf="item?.dto?.impediment?.attempts"> ({{ item?.dto?.impediment?.attempts }}) </ng-container></span
  >
</div>
<div class="product-data-grid grid gap-6 items-start">
  <div>
    <img class="max-w-full max-h-full shadow rounded-card" src="{{ item.ean | productImage }}" alt="item.dto.product.name" />
  </div>

  <div class="grid grid-flow-row gap-1 w-48">
    <div
      class="overflow-hidden overflow-ellipsis whitespace-nowrap"
      *ngIf="!!item.format && !!item.formatDetail && item.format !== 'UNKNOWN'"
    >
      <img class="inline" src="/assets/images/Icon_{{ item.dto.product.format }}.svg" [alt]="item.formatDetail" />
      <span class="ml-1 font-bold">{{ item.formatDetail }}</span>
    </div>
    <div class="font-bold">
      {{ item.ean }}
    </div>
    <div class="font-bold">
      {{ item.price.value.value | currency: item.price.value.currency:'code' }}
    </div>
    <div *ngIf="item.assortment | assortment; let assortment">
      <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">{{ 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">{{ 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">{{ 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">{{ item.placementType }}</div>
    </div>
    <div class="grid grid-flow-col gap-1 justify-start" *ngIf="item.remissionReason">
      <div class="w-40">Remigrund</div>
      <div class="font-bold">{{ item.remissionReason }}</div>
    </div>
  </div>
</div>

<ng-container *ngIf="!!returnDto; else removeItem">
  <div class="grid grid-flow-col justify-self-end gap-2 items-center">
    <button
      [disabled]="loading$ | async"
      *ngIf="enableChangeRemissionQuantity"
      class="text-brand text-base font-bold px-6 py-3"
      (click)="addProductToShippingDocument()"
    >
      <ui-spinner [show]="loading$ | async">Remi-Menge / Platzierung ändern</ui-spinner>
    </button>
    <button
      *ngIf="enableToRemit"
      [disabled]="loading$ | async"
      class="bg-white border-brand border-solid border-2 text-brand font-bold text-base px-6 py-3 rounded-full h-12"
      (click)="remit()"
    >
      <ui-spinner [show]="loading$ | async">Remittieren</ui-spinner>
    </button>
  </div>
</ng-container>

<ng-template #removeItem>
  <div *ngIf="item?.dto?.source === 'manually-added'" class="grid grid-flow-col justify-self-end gap-2">
    <button [disabled]="loading$ | async" class="text-brand text-base font-bold px-6 py-3" (click)="removeReturnItem()">
      <ui-spinner [show]="loading$ | async">Entfernen</ui-spinner>
    </button>
  </div>
</ng-template>
