<ng-container *ngIf="(groupedItems$ | async)?.length <= 0 && !(fetching$ | async); else shoppingCart">
  <div class="card stretch card-empty">
    <div class="empty-message">
      <span class="cart-icon">
        <ui-icon icon="cart" size="16px"></ui-icon>
      </span>

      <h1>Ihr Warenkorb ist leer.</h1>
      <p>
        Sie haben alle Artikel aus dem<br />
        Warenkorb entfernt oder noch<br />
        keinen Artikel hinzugefügt.
      </p>

      <div class="btn-wrapper">
        <a class="cta-primary" [routerLink]="['/kunde', applicationService.activatedProcessId, 'product', 'search']">Artikel suchen</a>
        <button class="cta-secondary" (click)="openDummyModal()">Neuanlage</button>
      </div>
    </div>
  </div>
</ng-container>

<div class="flex items-center justify-center card stretch card-empty" *ngIf="fetching$ | async">
  <ui-spinner show="true"> </ui-spinner>
</div>

<ng-template #shoppingCart>
  <ng-container *ngIf="shoppingCart$ | async; let shoppingCart">
    <div class="card stretch">
      <div class="cta-print-wrapper">
        <button class="cta-print" (click)="openPrintModal()">
          Drucken
        </button>
      </div>
      <h1 class="header">Warenkorb</h1>
      <h5 class="sub-header">Überprüfen Sie die Details.</h5>

      <ng-container *ngIf="payer$ | async">
        <hr />
        <div class="row">
          <ng-container *ngIf="showBillingAddress$ | async; else customerName">
            <div class="label">
              Rechnungsadresse
            </div>
            <div class="value">
              {{ payer$ | async | payerAddress | trim: 55 }}
            </div>
          </ng-container>
          <ng-template #customerName>
            <div class="label">
              Name, Vorname
            </div>
            <div class="value" *ngIf="payer$ | async; let payer">{{ payer.lastName }}, {{ payer.firstName }}</div>
          </ng-template>

          <div class="grow"></div>
          <div>
            <button *ngIf="payer$ | async" (click)="changeAddress()" class="cta-edit">
              Ändern
            </button>
          </div>
        </div>
      </ng-container>
      <hr />
      <ng-container *ngIf="showNotificationChannels$ | async">
        <form *ngIf="control" [formGroup]="control">
          <shared-notification-channel-control
            [communicationDetails]="communicationDetails$ | async"
            (channelActionEvent)="onNotificationChange($event)"
            [channelActionName]="'Speichern'"
            [channelActionLoading]="notificationChannelLoading$ | async"
            formGroupName="notificationChannel"
          ></shared-notification-channel-control>
        </form>
        <hr />
      </ng-container>
      <page-special-comment
        [ngModel]="specialComment$ | async"
        (ngModelChange)="setAgentComment($event)"
        (isDirtyChange)="specialCommentIsDirty = $event"
      ></page-special-comment>
      <ng-container *ngFor="let group of groupedItems$ | async; let lastGroup = last">
        <ng-container *ngIf="group?.orderType !== undefined">
          <hr />
          <div class="row item-group-header">
            <ui-icon
              *ngIf="group.orderType !== 'Dummy'"
              class="icon-order-type"
              [size]="group.orderType === 'B2B-Versand' ? '50px' : '25px'"
              [icon]="
                group.orderType === 'Abholung'
                  ? 'box_out'
                  : group.orderType === 'Versand'
                  ? 'truck'
                  : group.orderType === 'Rücklage'
                  ? 'shopping_bag'
                  : group.orderType === 'B2B-Versand'
                  ? 'truck_b2b'
                  : group.orderType === 'Download'
                  ? 'download'
                  : 'truck'
              "
            ></ui-icon>
            <div class="label" [class.dummy]="group.orderType === 'Dummy'">
              {{ group.orderType !== 'Dummy' ? group.orderType : 'Manuelle Anlage / Dummy Bestellung' }}
              <button *ngIf="group.orderType === 'Dummy'" class="cta-secondary" (click)="openDummyModal()">Hinzufügen</button>
            </div>

            <div class="grow"></div>
            <div *ngIf="group.orderType !== 'Download' && group.orderType !== 'Dummy'">
              <button class="cta-edit" (click)="showPurchasingListModal(group.items)">
                Ändern
              </button>
            </div>
          </div>
        </ng-container>
        <ng-container *ngIf="group.orderType === 'Versand' || group.orderType === 'B2B-Versand' || group.orderType === 'DIG-Versand'">
          <hr />
          <div class="row">
            <div class="label">
              Lieferadresse
            </div>
            <div class="value">
              {{ shippingAddress$ | async | shippingAddress | trim: 55 }}
            </div>
            <div class="grow"></div>
            <div>
              <button (click)="changeAddress()" class="cta-edit">
                Ändern
              </button>
            </div>
          </div>
        </ng-container>
        <hr />
        <ng-container *ngFor="let item of group.items; let lastItem = last; let i = index">
          <ng-container
            *ngIf="group?.orderType !== undefined && (item.features?.orderType === 'Abholung' || item.features?.orderType === 'Rücklage')"
          >
            <ng-container *ngIf="item?.destination?.data?.targetBranch?.data; let targetBranch">
              <ng-container *ngIf="i === 0 || targetBranch.id !== group.items[i - 1].destination?.data?.targetBranch?.data.id">
                <div class="row">
                  <span class="branch-label">Filiale</span>
                  <span class="branch-name">{{ targetBranch?.name }} | {{ targetBranch | branchAddress }}</span>
                </div>
                <hr />
              </ng-container>
            </ng-container>
          </ng-container>

          <page-shopping-cart-item
            (changeItem)="changeItem($event)"
            (changeDummyItem)="changeDummyItem($event)"
            (changeQuantity)="updateItemQuantity($event)"
            [quantityError]="(quantityError$ | async)[item.product.catalogProductNumber]"
            [item]="item"
            [orderType]="group?.orderType"
            [loadingOnItemChangeById]="loadingOnItemChangeById$ | async"
            [loadingOnQuantityChangeById]="loadingOnQuantityChangeById$ | async"
          ></page-shopping-cart-item>

          <hr *ngIf="!lastItem" />
        </ng-container>
      </ng-container>
    </div>
    <div class="card footer row">
      <ng-container *ngIf="totalItemCount$ | async; let totalItemCount">
        <div *ngIf="totalReadingPoints$ | async; let totalReadingPoints" class="total-item-reading-points">
          {{ totalItemCount }} Artikel | {{ totalReadingPoints }} Lesepunkte
        </div>
      </ng-container>
      <div class="grow"></div>
      <div class="total-cta-container">
        <div class="total-container">
          <strong class="total-value">
            Zwischensumme {{ shoppingCart?.total?.value | currency: shoppingCart?.total?.currency:'code' }}
          </strong>
          <span class="shipping-cost-info">ohne Versandkosten</span>
        </div>
        <button class="cta-primary" (click)="order()" [disabled]="showOrderButtonSpinner">
          <ui-spinner [show]="showOrderButtonSpinner">
            {{ primaryCtaLabel$ | async }}
          </ui-spinner>
        </button>
      </div>
    </div>
  </ng-container>
</ng-template>
