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

    <h3 class="font-bold text-2xl 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">
        {{ itemsCount }}
      </div>
      <div class="text-right">
        Remissionsdatum
      </div>
      <div class="font-bold text-right">
        {{ return.created | date: 'dd.MM.YY' }}
      </div>
    </div>

    <div *ngIf="firstReceiptPackageNumber" class="grid grid-cols-4 gap-2">
      <div>
        Wannnennummer
      </div>
      <div class="font-bold">
        {{ firstReceiptPackageNumber }}
      </div>
    </div>
  </div>
</div>

<ng-container *ngIf="itemsCount === 0 && showAddToRemiHint; else shippingDocumentDetailItems">
  <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>
</ng-container>

<ng-template #shippingDocumentDetailItems>
  <page-shared-shipping-document-details-item
    class="bg-white p-4"
    *ngFor="let item of firstReceipt.items"
    [item]="item?.data"
    [canRemoveItem]="canRemoveItems"
    [loading]="loading"
    (removeItem)="removeItem($event)"
  >
  </page-shared-shipping-document-details-item>
</ng-template>

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