<template>
    <NuxtLayout :name="device" :config="config">
        <main class="cart">
            <CartTabs />
            <section>
                <div>
                    <ul v-if="cart.items.length > 0">
                        <li v-for="(item, i) in cart.items" :key="i">
                            <CartItem :data="item.product" />
                        </li>
                    </ul>
                    <CartTotalAside />
                </div>
            </section>
            <CartTotalFixed v-if="device == 'mobile'" />
            <CartBuyersBought />
        </main>
    </NuxtLayout>

</template>

<script setup>
const config = reactive({ mobile: { header: false } })
const { device } = inject('service')

const cart = useCartStore()
cart.get()

provide('data', computed(() => cart.items))
</script>

<style lang="scss">
.cart {
    @apply w-full flex flex-col gap-[2.6rem] pb-32 lg:gap-6 lg:pt-10;

    &>section:not([class]) {
        @apply w-full min-h-96 flex lg:mb-[6.4rem];

        &>div {
            @apply container flex flex-col items-center lg:items-start lg:flex-row gap-6;

            &>ul {
                @apply max-w-[67.6rem] flex flex-col border-b lg:rounded-[0.6rem] lg:border border-[#E5E5E5] grow;

                &>li {
                    @apply p-6 lg:p-10 border-b last:border-b-0 border-[#E5E5E5];

                }
            }
        }
    }
}
</style>
