<template>
    <section class="wrapper">
        <Swiper v-if="device == 'mobile'" v-bind="swiper.gallery">
            <SwiperSlide v-for="(image, i) in product.images" :key="i">
                <img :src="image" />
            </SwiperSlide>
        </Swiper>
        <div>
            <Button v-bind="btns.report.props" @click="handleClick()" />
            <ProductGallery v-if="device == 'desktop'" />
        </div>
        <ProductSummary />
        <ProductSeller />
    </section>
</template>

<script setup>
const { swiper, btns } = inject('init')
const { device, dialog } = inject('service')
const product = inject('data')
const token = useCookie('token')
const router = useRouter()

const handleClick = () => {
    if (token.value)
        dialog.show(resolveComponent('ProductDialogReport'), product)
    else router.push('/auth/login')
}
</script>

<style lang="scss">
.product>.wrapper {
    @apply w-full flex max-lg:flex-col gap-3 lg:gap-[1.6rem];

    .swiper {
        @apply w-screen h-max pb-4 max-lg:order-1;

        .swiper-wrapper {
            @apply w-max z-0;

            .swiper-slide {
                @apply h-max w-screen;

                img {
                    @apply w-[11.8rem] h-[12.5rem] lg:w-[15.6rem] lg:h-[15.6rem] mx-auto;
                }
            }
        }

        .swiper-pagination {
            @apply pl-5 left-3 translate-x-0 lg:hidden;

            .swiper-pagination-bullet {
                @apply bg-[#D9D9D9] opacity-100;
            }

            * {
                @apply mx-0.5;
            }
        }
    }

    &>div:not([class]) {
        @apply flex max-lg:flex-col max-lg:order-3 gap-y-3 max-w-[38rem] grow;

        &>button {
            @apply w-max h-10 lg:h-14 shrink-0 max-lg:flex-row-reverse self-end #{!important};
            @apply lg:-ml-[14.2rem] lg:-mb-2;

            .p-button-icon {
                @apply text-[1.1em] lg:text-2xl max-lg:ml-0 max-lg:mr-2 #{!important};
            }

            .p-button-label {
                @apply text-[#7F7F7F] font-vazir font-medium text-[0.7em] lg:text-base;
            }
        }
    }
}
</style>