<div class="cart-confirmation-container" [@shrinkMainCard]="expanded">
  <ng-container *ngIf="!loading">
    <div class="header">
      <div class="heading" (click)="!expanded && expand()">
        <ng-container *ngIf="!failedItemsIds || failedItemsIds.length === 0">
          <lib-icon [ngStyle]="{ height: '32px' }" name="Check_green_circle" alt="check" *ngIf="expanded"></lib-icon>
        </ng-container>
        <ng-container *ngIf="failedItemsIds && failedItemsIds.length > 0">
          <lib-icon [ngStyle]="{ height: '32px' }" name="Check_white_circle" alt="check" *ngIf="expanded"></lib-icon>
        </ng-container>

        <h1 [@shrinkTitle]="expanded">Bestellbestätigung</h1>
      </div>
    </div>
    <div class="content" *ngIf="expanded">
      <div class="sub-title">
        <span
          >Nachfolgend erhalten Sie die Übersicht Ihrer
          <ng-container *ngIf="orderIds.length > 1">Bestellungen.</ng-container>
          <ng-container *ngIf="orderIds.length === 1">Bestellung.</ng-container></span
        >
      </div>

      <ng-container *ngFor="let order of orders; let first = first">
        <app-confirmation-overview
          [customerName]="first ? customerName : ''"
          [customerId]="customerId"
          [isPickUpOnly]="isPickUpOnly"
          [isTakeNowOnly]="isTakeNowOnly"
          [deliveryAddress]="order.isDelivery || order.isDownload ? deliveryAddress : ''"
          [isDelivery]="order.isDelivery"
          [isDownload]="order.isDownload"
          [orderId]="order.orderId"
          [orderNumber]="order.orderNumber"
          [orderDate]="order.orderDate"
          [orderBranch]="order.targetBranchName"
          [orderBranchAddress]="order.targetBranchAddress"
          [email]="email"
          (printOrder)="printerSelect($event)"
          *ngIf="customer"
        ></app-confirmation-overview>
        <app-confirmation-item-list
          [displaySelectedOrderItems]="order.items"
          [failedItemsIds]="failedItemsIds"
        ></app-confirmation-item-list>
      </ng-container>

      <div class="footer" *ngIf="expanded">
        <div class="overview">
          <span class="items">{{ displayItemsNumber }} Artikel I {{ currentPoints }} Lesepunkte</span>
          <div class="overview-price-container">
            <span class="overview-price">Gesamtsumme {{ booksTotalSum | bookPrice }} EUR</span>
            <span class="overview-tax" *ngIf="showOverviewTaxMessage">ohne Versandkosten</span>
          </div>
        </div>
      </div>
    </div>
  </ng-container>

  <app-loading [loading]="loading" text="Inhalte werden geladen" class="loading" *ngIf="loading"></app-loading>
</div>
<app-printer-selection #printModal (print)="print($event)" *ngIf="orders.length > 0"></app-printer-selection>
