<div class="flex flex-col gap-6 text-isa-neutral-900">
  <lib-reward-selection-error></lib-reward-selection-error>

  <div
    class="flex flex-row py-3 pl-6 bg-isa-neutral-400 rounded-2xl justify-between"
  >
    <span class="isa-text-body-1-regular">Zahlen mit</span>

    <div class="flex flex-row gap-3">
      <div class="flex flex-col items-center justify-center w-[10.5rem]">
        <span class="isa-text-body-1-regular">Lesepunkten</span>
        <span class="isa-text-subtitle-2-bold">{{
          store.customerRewardPoints()
        }}</span>
      </div>

      <div class="flex flex-col items-center justify-center w-[10.5rem]">
        <span class="isa-text-body-1-regular">Warenkorb</span>
        <span class="isa-text-subtitle-2-bold">EUR</span>
      </div>
    </div>
  </div>

  <lib-reward-selection-items></lib-reward-selection-items>

  <div
    class="flex flex-row py-3 pl-6 bg-isa-neutral-400 rounded-2xl justify-between"
  >
    <span class="isa-text-body-1-regular">Gesamt</span>

    <div class="flex flex-row gap-3">
      <div class="flex flex-col items-center justify-center w-[10.5rem]">
        <span class="isa-text-body-1-regular">Lesepunkten</span>
        <span class="isa-text-subtitle-2-bold">{{
          store.totalLoyaltyPointsNeeded()
        }}</span>
      </div>

      <div class="flex flex-col items-center justify-center w-[10.5rem]">
        <span class="isa-text-body-1-regular">Warenkorb</span>
        <span class="isa-text-subtitle-2-bold"
          >{{ store.totalPrice() }} EUR</span
        >
      </div>
    </div>
  </div>

  <lib-reward-selection-actions></lib-reward-selection-actions>
</div>
