<div class="customer-orders-container">
  <div class="fixed-card-header">
    <span>Bestellungen</span>
  </div>

  <div class="fixed-card-container order-container" [perfectScrollbar]="{ minScrollbarLength: 20 }">
    <div class="fixed-header-description">
      <span>Übersicht aller offenen und früheren Bestellungen</span>
    </div>
    <div class="orders-wrapper">
      <ng-container *ngFor="let order of orders; let first = first; let last = last">
        <hr *ngIf="first" />
        <div class="order-row">
          <span class="date">{{ order.date | date: 'dd.MM.yy' }}</span>
          <span class="status">{{ order.status }}</span>
          <span class="type"
            >{{ order.type }}<ng-container *ngIf="order.location"><span class="separator-line">I</span>{{ order.location }}</ng-container>
          </span>
          <span class="price"
            >{{ order.price | bookPrice }} {{ order.currency }}<span class="separator-line">I</span>{{ order.count }} Artikel
          </span>
          <app-button (action)="details(order.id)">Details</app-button>
        </div>
        <hr />
      </ng-container>
      <ng-container *ngIf="!loading && orders.length === 0">
        <div style="text-align: center;">Es sind keine Bestellungen vorhanden.</div>
      </ng-container>
    </div>
  </div>
</div>
<app-loading [loading]="loading" text="Inhalte werden geladen" class="loading" *ngIf="loading"></app-loading>
