<hr class="mt-4" />
<div class="grid grid-flow-col gap-6 items-start pt-4 pb-8" [formGroup]="form">
  <div class="thumbnail">
    <img [src]="item?.product?.ean | productImage" [alt]="item.product.name" />
  </div>
  <div class="grid grid-flow-row">
    <div class="grid grid-flow-col gap-8 justify-between items-start">
      <h3 class="font-bold">{{ title }}</h3>
      <span class="mt-px-2 whitespace-nowrap overflow-hidden overflow-ellipsis w-36 text-active-branch"
        >{{ item.product.productGroup }}:{{ item.product.productGroup | productGroup }}</span
      >
      <ui-quantity-dropdown formControlName="quantity"></ui-quantity-dropdown>
    </div>
    <div class="grid grid-flow-row gap-1">
      <div class="flex flex-row">
        <div class="w-32">Format</div>
        <div data-name="format" class="flex-grow" *ngIf="item?.product?.format && item?.product?.formatDetail">
          <img class="inline" src="/assets/images/Icon_{{ item.product.format }}.svg" [alt]="item.product.formatDetail" />
          <span class="ml-1 font-bold">{{ item.product.formatDetail }}</span>
        </div>
      </div>
      <div class="flex flex-row">
        <div class="w-32">Kennzeichen</div>

        <div class="flex-grow" *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="flex flex-row">
        <div class="w-32">Remigrund</div>
        <div data-name="reason" class="flex-grow">
          <button class="flex flex-row items-center font-bold" [uiOverlayTrigger]="reasonDropdown" #dropdown="uiOverlayTrigger">
            {{ selectedReason || 'Auswählen' }}
            <ui-icon class="ml-4" [rotate]="dropdown.opened ? '270deg' : '90deg'" icon="arrow_head"></ui-icon>
          </button>
          <ui-dropdown #reasonDropdown class="font-bold" yPosition="below" xPosition="after" [xOffset]="8">
            <button uiDropdownItem *ngFor="let reason of returnReasons$ | async" (click)="reasonChanged(reason)">
              {{ reason }}
            </button>
          </ui-dropdown>
        </div>
      </div>
      <div *ngIf="message$ | async; let message" class="flex flex-row">
        <div class="w-32"></div>
        <div class="text-dark-goldenrod font-bold">{{ message }}</div>
      </div>
    </div>
  </div>
</div>
<hr />
<div class="actions">
  <button class="cta-add" (click)="addClick()" [disabled]="!(canAdd$ | async)">Hinzufügen</button>
</div>
