<div class="cart-container" *ngIf="loaded; else emptyCart">
  <div class="header">
    <div class="print">
      <app-button type="small" (action)="selectPrinter()">Drucken</app-button>
    </div>
    <div class="cart-title">
      <span>Warenkorb</span>
    </div>
    <div class="cart-description">
      <span>Überprüfen Sie die Details.</span>
    </div>
  </div>
  <div class="cart-content">
    <div class="cart-list">
      <hr />
      <app-invoice-address [disableAddressChanging]="disableAddressChanging"></app-invoice-address>
      <hr />
      <app-notification-settings
        *ngIf="showNotificationSettings"
        [isDelivery]="paymentOption.delivery"
        (notificationInEditMode)="enableDisableOrder($event)"
      ></app-notification-settings>
      <div *ngIf="takeNowCount$ | async" @removeItemCartTrigger>
        <hr />
        <app-take-now-cart (editItem)="enableDisableOrder($event)"></app-take-now-cart>
      </div>
      <div *ngIf="deliveryCount$ | async" @removeItemCartTrigger [@cartPaymentType]="getDeliveryDeleteAnimation()">
        <hr />
        <app-delivery-cart [disableAddressChanging]="disableAddressChanging" (editItem)="enableDisableOrder($event)"></app-delivery-cart>
      </div>
      <div *ngIf="pickUpCount$ | async" @removeItemCartTrigger [@cartPaymentType]="getPickUpDeleteAnimation()">
        <hr />
        <app-pick-up-cart (editItem)="enableDisableOrder($event)"></app-pick-up-cart>
      </div>
      <div *ngIf="downloadCount$ | async" @removeItemCartTrigger>
        <hr />
        <app-download-cart (editItem)="enableDisableOrder($event)"></app-download-cart>
      </div>
    </div>
  </div>

  <div class="cart-footer">
    <div class="overview-container">
      <span class="items">{{ total.items }} Artikel I {{ (cartData$ | async)?.promotionPoints }} Lesepunkte</span>
      <div class="overview">
        <div class="overview-price-container">
          <span class="overview-price">Zwischensumme {{ total.price | bookPrice }} EUR</span>
          <span *ngIf="(deliveryCount$ | async) > 0" class="overview-tax">ohne Versandkosten</span>
          <span *ngIf="(deliveryCount$ | async) === 0" class="overview-tax">&nbsp;</span>
        </div>
        <app-button (action)="next()" [disabled]="orderDisabled" [primary]="true" [load]="true" [stayOnPage]="true" #continue
          >Bestellen</app-button
        >
      </div>
    </div>
  </div>
</div>

<ng-template #emptyCart>
  <div class="cart-container-empty">
    <div class="image-empty">
      <img src="assets/images/shopping_cart_white.svg" />
    </div>
    <div class="header-empty"><span>Ihr Warenkorb ist leer.</span></div>
    <div class="content-empty"><span>Sie haben alle Artikel aus dem</span></div>
    <div class="content-empty"><span>Warenkorb entfernt oder noch</span></div>
    <div class="content-empty"><span>Artikel hinzugefügt.</span></div>
    <div class="btn-empty">
      <app-button [primary]="true" (action)="search()">Artikel suchen</app-button>
    </div>
  </div>
</ng-template>

<app-printer-selection #printModal (print)="print($event)"></app-printer-selection>

<app-pay-method
  #payMethod
  [delivery]="paymentOption.delivery"
  [pickUp]="paymentOption.pickUp"
  [takeNow]="paymentOption.takeNow"
  [download]="paymentOption.download"
></app-pay-method>
