<template>
    <div class="gallery">
        <div>
            <ul>
                <li v-for="(act, key) in actions" :key="key">
                    <Button v-bind="act.props" @click="act.click()" />
                </li>
            </ul>
            <img :src="coverImage" />
        </div>
        <ul>
            <li v-for="(image, i) in images" :key="i">
                <i class="isax isax-gallery-slash" />
                <Image :src="image" preview />
            </li>
        </ul>
    </div>
</template>

<script setup>
const { actions } = inject('init')
const { coverImage, images } = inject('data')
</script>

<style lang="scss">
.product .gallery {
    @apply w-full h-full max-h-[38.4rem] flex flex-col gap-6 ;

    &>div {
        @apply flex p-6 w-full grow max-h-[29.9rem] border border-[#E5E5E5] overflow-hidden;

        &>ul {
            @apply flex flex-col gap-0 -m-3 relative;

            li {
                @apply ltr;

                i {
                    @apply absolute inset-0;
                }

                button {
                    @apply w-12 h-12 #{!important};

                    span {
                        @apply text-2xl text-[#333333];
                    }
                }
            }
        }

        &>img {
            @apply flex w-full h-full max-w-[24.1rem] max-h-[24.1rem] object-contain;
            @apply shrink mt-5 mx-auto 2xl:translate-x-3 px-8 object-top;
        }
    }

    &>ul {
        @apply flex gap-3 flex-wrap h-28 overflow-hidden;

        li {
            @apply w-28 h-28 flex items-center justify-center relative bg-[#F2F2F2] cursor-pointer;

            span {
                @apply w-full h-full absolute;

                img {
                    @apply w-full h-full object-cover;
                }
            }

            i {
                @apply text-2xl absolute;
            }
        }
    }
}
</style>
