@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>
      <div class="header-container">
        <h1 class="header">Warenkorb</h1>
        @if (orderTypesExist$ | async) {
          <lib-reward-selection-trigger
            class="pb-2 desktop-large:pb-0"
          ></lib-reward-selection-trigger>
        }
      </div>
      @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>
}
