<div class="flex flex-row gap-20 text-isa-neutral-900">
  <div class="flex flex-col gap-[0.125rem]">
    <div class="flex flex-col gap-1">
      <span class="isa-text-body-1-regular">{{ customerName() }} </span>
      <span class="isa-text-body-1-bold"
        >{{ primaryBonusCardPoints() }} Lesepunkte</span
      >
    </div>

    <ui-text-button
      class="self-start -ml-[0.6rem]"
      type="button"
      color="subtle"
      size="small"
      (click)="resetCustomerAndRewardCart()"
    >
      Zurücksetzen
    </ui-text-button>
  </div>

  <div class="flex flex-col gap-2">
    <span class="isa-text-body-1-regular">Prämien ausgewählt</span>
    <span
      *uiSkeletonLoader="shoppingCartResponseFetching()"
      class="isa-text-body-1-bold"
      >{{ cartItemsLength() }}</span
    >
  </div>
</div>

@if (cartItemsLength() && primaryBonusCardPoints() > 0) {
  <a
    class="self-start"
    data-which="continue-to-reward-checkout"
    data-what="continue-to-reward-checkout"
    uiButton
    color="brand"
    size="large"
    routerLink="./cart"
  >
    Prämienausgabe
  </a>
}
