<div class="content-container">
  <div class="content-row">
    <div class="content-field">
      <span class="descriptor">Status</span>
      <span class="value">{{ isCompleted ? 'abgeschlossen' : 'offen' }}</span>
    </div>

    <div class="content-field" [ngClass]="{ 'position-right': alignRight }">
      <span class="descriptor">Lieferant</span>
      <span class="value">{{ supplier }}</span>
    </div>
  </div>

  <div class="content-row">
    <div class="content-field">
      <span class="descriptor">Anzahl Positionen</span>
      <span class="value"> {{ numberOfItems }} </span>
    </div>

    <div class="content-field" [ngClass]="{ 'position-right': alignRight }">
      <span class="descriptor">Remissionsdatum</span>
      <span class="value">{{ date | date: 'shortDate' }}</span>
    </div>
  </div>

  <div class="content-row" *ngIf="isCompleted && packageNumber">
    <div class="content-field">
      <span class="descriptor">Wannennummer</span>
      <span class="value">{{ packageNumber }}</span>
    </div>
  </div>
</div>
