<template>
    <section class="compare-product-list">
        <ul>
            <template v-for="(product, i) in items" :key="i">
                <li v-if="i > 0">
                    <span></span>
                </li>
                <li>
                    <CompareProductCard :data="product" />
                </li>
            </template>
            <li v-if="ids.length < (device == 'mobile' ? 2 : 3)">
                <Button :label="$t('selectProduct')" outlined @click="handleCLick" />
            </li>
        </ul>
    </section>
</template>

<script setup>
const { data: items } = inject('data')
const { device, dialog } = inject('service')
const route = useRoute()
const ids = route.params.ids.split('-')

const handleCLick = () => {
    dialog.show(resolveComponent('CompareDialogSelection'))
}
</script>

<style lang="scss">
.compare-product-list {
    @apply w-full max-w-[112.3rem] mx-auto pt-[3.3rem] lg:pt-[4.4rem];

    ul {
        @apply flex gap-3 lg:border-b justify-center lg:justify-start;

        li {
            &:last-child:has(.p-button-outlined) {
                @apply flex justify-center items-center w-[10.7rem] h-[16.6rem] lg:w-[28.1rem] lg:h-[25.6rem];

                button {
                    @apply w-[6.2rem] h-[2.6rem] lg:w-[8.1rem] lg:h-[3.3rem];

                    span {
                        @apply text-xs font-bold font-vazir lg:text-base lg:font-iran-sans
                    }
                }
            }

            &:has(>span) {
                @apply self-stretch w-px bg-neutral-200;
                
            }
        }
    }
}
</style>