<template>
  <section class="tp-checkout-area pb-120" style="background-color: #EFF1F5;">
    <div class="container">
      <div v-if="!cartStore.cart_products || cartStore.cart_products.items.length === 0" class="text-center pt-50">
        <h3 class="py-2">No hay productos en el carrito para comprar</h3>
        <nuxt-link href="/search" class="tp-checkout-btn">
          Ir a comprar
        </nuxt-link>
      </div>
      <div v-else class="row">
        <!-- form start -->
        <form>
          <div class="row">
            <div class="col-lg-7">
              <div class="tp-checkout-bill-area">
                <checkout-products />
                <!-- <h3 class="tp-checkout-bill-title">Billing Details</h3> -->
                <!-- <checkout-billing /> -->
              </div>
            </div>
            <div class="col-lg-5">
              <!-- checkout place order -->
              <checkout-order />
              <!-- checkout place order -->
            </div>
          </div>
        </form>
        <!-- form end -->
      </div>
    </div>
  </section>
</template>

<script setup lang="ts">
import { useCartStore } from '@/pinia/cart/cart.store';

const cartStore = useCartStore()

if(!cartStore.cart_products) {
  await cartStore.getCart();
}


</script>
