<div class="block rounded p-4 bg-white">
  <div class="grid grid-flow-row gap-4">
    @if (!completed) {
      <button
        class="justify-self-end text-xl bg-transparent text-brand border-none font-bold pr-0"
        (click)="deleteReturn()"
        >
        Löschen
      </button>
    }

    <h3 class="font-bold text-h3 grid grid-flow-col">
      <span>Warenbegleitschein</span>
      <span class="text-right">#{{ firstReceipt.receiptNumber | shortReceiptNumber }}</span>
    </h3>

    <div class="grid grid-cols-4 gap-2">
      <div>Status</div>
      <div class="font-bold">
        {{ completed ? 'Abgeschlossen' : 'Offen' }}
      </div>
      <div class="text-right">Lieferant</div>
      <div class="font-bold text-right">
        {{ return.supplier?.id | supplier }}
      </div>
    </div>

    <div class="grid grid-cols-4 gap-2">
      <div>Anzahl Positionen</div>
      <div class="font-bold anzahl-positionen">
        {{ itemsCount }}
      </div>
      <div class="text-right">Remissionsdatum</div>
      <div class="font-bold text-right">
        {{ return.created | date: 'dd.MM.YY' }}
      </div>
    </div>

    @if (firstReceiptPackageNumber) {
      <div class="grid grid-cols-4 gap-2">
        <div>Wannnennummer</div>
        <div class="font-bold">
          {{ firstReceiptPackageNumber }}
        </div>
      </div>
    }
  </div>
</div>

@if (itemsCount === 0 && showAddToRemiHint) {
  <div class="bg-white text-center">
    <p class="my-8 text-inactive-branch font-semibold">Neue Artikel aus der Remi-Liste hinzufügen</p>
  </div>
} @else {
  @for (item of firstReceipt.items; track item) {
    <page-shared-shipping-document-details-item
      class="bg-white p-4"
      [item]="item?.data"
      [canRemoveItem]="canRemoveItems"
      [loading]="loading"
      (removeItem)="removeItem($event)"
    ></page-shared-shipping-document-details-item>
  }
}


<div class="spacer"></div>
