<div class="card">
  <ng-container *ngIf="order$ | async; let order">
    <div class="header">
      <div class="row title">
        <span *ngIf="order.buyer?.organisation?.name; else notB2b"
          >{{ order.buyer?.organisation?.name }}
          <ng-container *ngIf="!!order.buyer?.lastName || !!order.buyer?.firstName"
            >- {{ order.buyer?.lastName }} {{ order.buyer?.firstName }}</ng-container
          ></span
        >
        <ng-template #notB2b>
          <span>{{ order.buyer?.lastName }} {{ order.buyer?.firstName }}</span>
        </ng-template>
        <span>{{ order.orderNumber }}</span>
      </div>

      <div class="row">
        <div class="col left">
          <div class="row">
            <span class="label">Bestelldatum</span>
            <span class="bold">{{ order.orderDate | date: 'dd.MM.yyyy | HH:mm' }} Uhr</span>
          </div>
          <div class="row">
            <span class="label">Bestellkanal</span>
            <span class="bold">{{ order?.features?.orderSource }}</span>
          </div>
          <div class="row" *ngFor="let record of order?.linkedRecords">
            <span class="label">{{ record.repository | uppercase }} Bestell-Nr.</span>
            <span class="bold">{{ record.number }}</span>
          </div>
        </div>

        <div class="col right">
          <div class="row justify">
            <span>Status</span>
            <span class="bold">{{ order.processingStatus | processingStatus }}</span>
          </div>
          <div class="row justify" *ngIf="branchName$ | async; let branchName">
            <span>Zielfiliale</span>
            <span class="right bold">{{ branchName }}</span>
          </div>
        </div>
      </div>
    </div>

    <div class="orders">
      <ng-container *ngFor="let orderItem of order.items; let i = index">
        <ng-container
          *ngIf="
            i === 0 || order.items[i - 1].data.features.orderType !== orderItem.data.features.orderType || !hasDummyItems(orderItem.data)
          "
          [ngSwitch]="orderItem.data.features.orderType"
        >
          <div *ngSwitchCase="'Rücklage'" class="order-category">
            <ui-icon class="icon" icon="shopping_bag" size="18px"></ui-icon>
            <h2>Rücklage</h2>
          </div>
          <div *ngSwitchCase="'Abholung'" class="order-category">
            <ng-container *ngIf="hasDummyItems(orderItem.data); else abholung">
              <div class="order-category-dummy">
                <h2>Manuelle Anlage / Dummy Bestellung</h2>
              </div>
            </ng-container>
            <ng-template #abholung>
              <ui-icon class="icon" icon="box_out" size="18px"></ui-icon>
              <h2>Abholung</h2>
            </ng-template>
          </div>
          <div #download *ngSwitchCase="'Download'" class="order-category">
            <ui-icon class="icon" icon="download" size="18px"></ui-icon>
            <h2>Download</h2>
          </div>
          <div *ngSwitchCase="'Versand'" class="order-category">
            <ui-icon class="icon" icon="truck" size="30px"></ui-icon>
            <h2>Versand</h2>
          </div>
          <div *ngSwitchCase="'B2B-Versand'" class="order-category">
            <ui-icon class="icon" icon="truck_b2b" size="42px"></ui-icon>
            <h2>B2B-Versand</h2>
          </div>
          <div class="line"></div>
        </ng-container>

        <page-customer-order-item-card class="order-item" [order]="order" [orderItem]="orderItem.data"></page-customer-order-item-card>

        <div class="line"></div>
      </ng-container>
    </div>
  </ng-container>
</div>
