<div class="grid grid-flow-row gap-4">
  <h3 class="font-bold text-2xl grid grid-flow-col items-center justify-start gap-2">
    <div *ngIf="!completed" class="bg-brand rounded-full w-3 h-3"></div>
    #{{ firstReceipt.receiptNumber | shortReceiptNumber }}
  </h3>

  <div class="grid grid-cols-4 gap-2">
    <div>
      Status
    </div>
    <div class="font-bold">
      {{ completed ? 'Abgeschlossen' : 'Offen' }}
    </div>
    <div>
      Lieferant
    </div>
    <div class="font-bold">
      {{ 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>
      Remissionsdatum
    </div>
    <div class="font-bold">
      {{ return.created | date: 'dd.MM.YY' }}
    </div>
  </div>

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