<script lang="ts" setup>
    import UISwiper from '@/UI-kit/components/UI/swiper/UISwiper.vue';
    import { IPendingSaveImage, IUserPhotoDoc } from '@/modules/documents';

    defineProps<{
        imgs: IUserPhotoDoc[] | IPendingSaveImage[];
        initialSlide: number;
    }>();
</script>

<template>
    <div class="saved-image-document-modal">
        <UISwiper :list="imgs" :space-between="6" :initial-slide="initialSlide">
            <template #default="{ item }">
                <div class="saved-image-document-modal__container">
                    <img
                        v-if="!item.id"
                        width="320"
                        height="400"
                        :src="`data:image/${item.base64.format};base64, ${item.base64.base64String}`"
                        alt="document"
                    />
                    <img v-else width="320" height="400" :src="item.url" alt="document" />
                </div>
            </template>
        </UISwiper>
    </div>
</template>

<style scoped lang="scss">
    .saved-image-document-modal {
        &__container {
            width: 100%;
            height: 100%;
            border-radius: 8px;

            img {
                width: 100%;
                height: 100%;
                border-radius: 8px;
                object-fit: contain;
            }
        }
    }
</style>
