<div class="border border-surface-border rounded-xl p-2 shadow-sm">
  <div class="flex gap-3 items-center">
    <img
      [src]="inOrderGood.good.image_url || placeholderImage"
      loading="lazy"
      decoding="async"
      class="w-24 h-24 rounded-md bg-surface-100 object-cover shrink-0 border border-surface-border"
    />
    <div class="flex flex-col grow justify-between overflow-hidden">
      <div class="flex items-stretch grow gap-4">
        <div class="flex flex-col justify-between gap-2 grow overflow-hidden py-1">
          <div class="shrink-0 flex flex-col w-full overflow-hidden">
            <div class="flex w-full overflow-hidden gap-1 items-center">
              <span class="font-bold text-lg text-ellipsis text-nowrap overflow-hidden">
                {{ inOrderGood.good.name }}
              </span>
            </div>
            <span class="text-sm text-ellipsis text-nowrap overflow-hidden">
              {{ inOrderGood.quantity }} {{ enumTranslator(inOrderGood.good.unit_type) }}
            </span>
          </div>
          @if (!inOrderGood.discount_amount) {
            <span [appPriceMask]="inOrderGood.total_amount"></span>
          } @else {
            <div class="flex flex-col">
              <span class="line-through text-muted-color text-xs" [appPriceMask]="inOrderGood.base_total_amount"></span>
              <span [appPriceMask]="inOrderGood.base_total_amount - inOrderGood.discount_amount"></span>
            </div>
          }
        </div>
        <div class="flex shrink-0 gap-1">
          <button
            pButton
            type="button"
            icon="pi pi-pencil"
            size="small"
            severity="secondary"
            class="ms-auto"
            (click)="editOrderItem()"
          ></button>
          <button
            pButton
            type="button"
            icon="pi pi-trash"
            size="small"
            severity="danger"
            class="ms-auto"
            (click)="removeGoodFromOrder()"
          ></button>
        </div>
      </div>
    </div>
  </div>
</div>

<pos-payload-form-dialog
  [(visible)]="visible"
  [good]="inOrderGood.good"
  [initialValues]="inOrderGood"
  [orderItemId]="inOrderGood.id"
/>
