<template>
    <section class="top-slider">
        <template v-for="(btn, i) in btns.arrows" :key="i">
            <Button v-if="device == 'desktop'" v-bind="btn" />
        </template>
        <Swiper 
         :loop="true"
        v-bind="swipers.topSlider">
            <SwiperSlide v-for="{ link, images, title, id } in sliders" :key="id">
                <router-link :to="link">
                    <img :title="title" :src="images[device]" />
                </router-link>
            </SwiperSlide>
        </Swiper>
    </section>
</template>

<script setup>
const { swipers, btns } = inject('init')
const { device } = inject('service')
const { sliders } = inject('data')
console.log(sliders, 'sliders');

</script>

<style lang="scss">
.top-slider {
    @apply w-full h-max flex z-0;

    .swiper {
        @apply w-full h-auto lg:h-[550px];

        .swiper-wrapper {
            @apply z-0 h-max bg-gray-50;

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

                a {
                    img {
                        @apply w-full object-cover h-auto lg:h-[550px];
                    }
                }
            }
        }
    }

    &>button {
        @apply self-center absolute p-0 bg-white/40 border-none max-lg:hidden z-10 #{!important};
        @apply lg:w-8 lg:h-8 lg:text-base lg:first-of-type:right-8 lg:last-of-type:left-9 #{!important};
        @apply xl:w-9 xl:h-9 xl:text-lg xl:first-of-type:right-12 xl:last-of-type:left-12 #{!important};
        @apply 2xl:w-10 2xl:h-10 2xl:text-xl 2xl:first-of-type:right-16 2xl:last-of-type:left-16 #{!important};
    }
}
</style>
