<div class="grid product-data-grid gap-8">
  <div>
    <img
      class="max-w-full max-h-full shadow rounded-card"
      loading="lazy"
      *ngIf="item?.product?.ean | productImage; let url"
      [src]="url"
      [alt]="item?.product?.title"
    />
  </div>

  <div class="grid grid-flow-row">
    <div class="grid grid-flow-col justify-between align-bottom">
      <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
      >
    </div>
    <div class="grid grid-cols-4">
      <div>Remi-Menge</div>
      <div class="font-bold col-span-3">{{ item.quantity }}x</div>
    </div>
    <div *ngIf="canRemoveItem" class="flex justify-end">
      <button [disabled]="loading" class="text-card-sub bg-transparent text-brand border-none font-bold" (click)="removeItem.emit(item)">
        <ui-spinner [show]="loading">
          Entfernen
        </ui-spinner>
      </button>
    </div>
  </div>
</div>
