<ng-container *ngIf="customer$ | async; let customer">
  <a [routerLink]="['/kunde', application.activatedProcessId, 'customer', customer?.id]" class="card-customer-details">
    <span class="title">Kundendetails</span>
  </a>
  <a
    *ngIf="hasCustomerCard$ | async"
    [routerLink]="['/kunde', application.activatedProcessId, 'customer', customer?.id, 'card']"
    class="card-customer-card"
  >
    <span class="title">Kundenkarte</span>
  </a>

  <ng-container *ngIf="orders$ | async; let orders">
    <div class="card card-customer-orders">
      <div class="header">
        <h1>Bestellungen</h1>
        <p class="desc">Übersicht aller offenen und<br />früheren Bestellungen</p>
        <p class="desc-empty" *ngIf="!isLoading && orders.length === 0">Es sind keine Bestellungen vorhanden</p>
      </div>
      <div class="orders" [class.card-link-visible]="hasCustomerCard$ | async" uiScrollContainer (reachEnd)="reachEnd()">
        <div *ngFor="let order of orders; let i = index" class="order-row-wrapper">
          <div class="line"></div>
          <div class="order-row">
            <div class="order-col bold date">
              {{ order.orderDate | date: 'dd.MM.yy' }}
            </div>
            <div class="order-col bold status">
              {{ order.processingStatus | processingStatus }}
            </div>
            <div class="order-col channel">
              {{ order.features?.orderSource }} <span *ngIf="!!order.features?.orderSource && !!(order | orderTarget)">|</span>
              {{ order | orderTarget }}
            </div>
            <div class="order-col value">{{ order.orderValue | currency: order.currency:'code' }} | {{ order.itemsCount }} Artikel</div>
            <a
              [routerLink]="['/kunde', application.activatedProcessId, 'customer', customer?.id, 'order', order?.id]"
              class="order-col details"
              >Details</a
            >
          </div>
          <div *ngIf="i === orders.length - 1" class="line"></div>
        </div>
      </div>
      <ui-spinner class="spin" [show]="isLoading"></ui-spinner>
      <p class="spin-text" *ngIf="isLoading">Inhalte werden geladen</p>
    </div>
  </ng-container>
</ng-container>
