@if ((groupedItems$ | async)?.length <= 0 && !(fetching$ | async)) {
  <div class="card stretch">
    <div class="empty-message">
      <span class="cart-icon flex items-center justify-center">
        <shared-icon icon="shopping-cart-bold" [size]="24"></shared-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]="productSearchBasePath">Artikel suchen</a>
        <button class="cta-secondary" (click)="openDummyModal({})">Neuanlage</button>
      </div>
    </div>
  </div>
} @else {
  @if (shoppingCart$ | async; as shoppingCart) {
    <div class="card stretch">
      <div class="cta-print-wrapper">
        <button class="cta-print" (click)="openPrintModal()">Drucken</button>
      </div>
      <h1 class="header">Warenkorb</h1>
      @if (!(isDesktop$ | async)) {
        <page-checkout-review-details></page-checkout-review-details>
      }
      @for (group of groupedItems$ | async; track trackByGroupedItems($index, group); let lastGroup = $last) {
        @if (group?.orderType !== undefined) {
          <hr />
          <div class="row item-group-header bg-[#F5F7FA]">
            @if (group.orderType !== 'Dummy') {
              <shared-icon
                class="icon-order-type"
                [size]="group.orderType === 'B2B-Versand' ? 36 : 24"
                [icon]="group.orderType"
              ></shared-icon>
            }
            <div class="label" [class.dummy]="group.orderType === 'Dummy'">
              {{ group.orderType !== 'Dummy' ? group.orderType : 'Manuelle Anlage / Dummy Bestellung' }}
              @if (group.orderType === 'Dummy') {
                <button
                  class="text-brand border-none font-bold text-p1 outline-none pl-4"
                  (click)="openDummyModal({ changeDataFromCart: true })"
                  >
                  Hinzufügen
                </button>
              }
            </div>
            <div class="grow"></div>
            @if (group.orderType !== 'Download' && group.orderType !== 'Dummy') {
              <div class="pl-4">
                <button class="cta-edit" (click)="showPurchasingListModal(group.items)">Ändern</button>
              </div>
            }
          </div>
          @if (
            group.orderType === 'Download' ||
            group.orderType === 'Versand' ||
            group.orderType === 'B2B-Versand' ||
            group.orderType === 'DIG-Versand'
            ) {
            <hr
              />
          }
        }
        @for (item of group.items; track trackByItemId(i, item); let lastItem = $last; let i = $index) {
          @if (group?.orderType !== undefined && (item.features?.orderType === 'Abholung' || item.features?.orderType === 'Rücklage')) {
            @if (item?.destination?.data?.targetBranch?.data; as targetBranch) {
              @if (i === 0 || checkIfMultipleDestinationsForOrderTypeExist(targetBranch, group, i)) {
                <div
                  class="flex flex-row items-center px-5 pt-0 pb-[0.875rem] -mt-2 bg-[#F5F7FA]"
                  [class.multiple-destinations]="checkIfMultipleDestinationsForOrderTypeExist(targetBranch, group, i)"
                  >
                  <span class="branch-name">{{ targetBranch?.name }} | {{ targetBranch | branchAddress }}</span>
                </div>
                <hr />
              }
            }
          }
          <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>
          @if (!lastItem) {
            <hr />
          }
        }
      }
      <div class="h-[8.9375rem]"></div>
    </div>
    <div class="card footer flex flex-col justify-center items-center">
      <div class="flex flex-row items-start justify-between w-full mb-1">
        @if (totalItemCount$ | async; as totalItemCount) {
          @if (totalReadingPoints$ | async; as totalReadingPoints) {
            <div class="total-item-reading-points w-full">
              {{ totalItemCount }} Artikel | {{ totalReadingPoints }} Lesepunkte
            </div>
          }
        }
        <div class="flex flex-col w-full">
          <strong class="total-value">
            Zwischensumme {{ shoppingCart?.total?.value | currency: shoppingCart?.total?.currency : 'code' }}
          </strong>
          <span class="shipping-cost-info">ohne Versandkosten</span>
        </div>
      </div>
      <button
        class="cta-primary"
        (click)="order()"
        [disabled]="
          showOrderButtonSpinner ||
          ((primaryCtaLabel$ | async) === 'Bestellen' && !(checkNotificationChannelControl$ | async)) ||
          notificationsControl?.invalid ||
          ((primaryCtaLabel$ | async) === 'Bestellen' && ((checkingOla$ | async) || (checkoutIsInValid$ | async)))
        "
        >
        <ui-spinner [show]="showOrderButtonSpinner">
          {{ primaryCtaLabel$ | async }}
        </ui-spinner>
      </button>
    </div>
  }
}

@if (fetching$ | async) {
  <div class="flex items-center justify-center card stretch">
    <ui-spinner [show]="true"></ui-spinner>
  </div>
}