<template>
    <div class="w-full" v-if="attachments.length > 0">
        <p class="text-xs text-gray-200 mb-1.5">
            {{ $t("Register.attachements") }}
        </p>
        <swiper
            :slides-per-view="slidesPerView"
            :space-between="10"
            class="flex items-start justify-start gap-2.5 overflow-hidden select-none mb-2.5"
        >
            <SwiperSlide
                v-for="(image, index) in images"
                :key="'portfolio_projects_image_upload_' + index"
            >
                <li title="attachment preview">
                    <img
                        class="h-full max-h-[150px] object-cover rounded-[10px]"
                        :src="image.url"
                        alt="attachment preview"
                    />
                </li>
            </SwiperSlide>
        </swiper>
        <div class="flex flex-col items-start justify-start gap-2.5 flex-wrap">
            <template v-for="(file, i) in files">
                <a
                    :key="getFileName(file, i + 1)"
                    v-if="file"
                    :href="getPreviewFromFile(file)"
                    :title="getFileName(file, i + 1)"
                    class="rounded-lg gap-1 min-h-[30px] bg-blue-200 px-[12px] py-1 max-w-[200px] text-xs overflow-hidden flex items-center justify-center text-gray-300"
                    rel="noopener noreferrer"
                    target="_blank"
                >
                    <span class="flex-1 line-clamp-1">
                        {{ getFileName(file, i + 1) }}
                    </span>
                </a>
            </template>
        </div>
    </div>
</template>

<script>
import { Swiper, SwiperSlide } from "swiper/vue";
import "swiper/css";

export default {
    props: {
        attachments: {
            type: Array,
            required: true,
        },
        slidesPerView: {
            type: Number,
            default: 3.5,
        },
    },
    components: {
        Swiper,
        SwiperSlide,
    },
    computed: {
        //images only
        images() {
            return this.attachments.filter((file) => {
                return file.type == "image";
            });
        },
        files() {
            return this.attachments.filter((file) => {
                return file.type != "image";
            });
        },
    },
};
</script>
