<template>
    <div id="work-label" class="l-text">
        <h2>{{ $t('global.work_label') }}</h2>
    </div>
    <div id="works">
        <swiper            
            :modules="modules"
            :navigation="true"
            :keyboard="{ enabled: true }"

            :slidesPerView="1"
            :breakpoints="{
                '1000': {
                    slidesPerView: 1.5,
                },
            }"
            :centeredSlides="true"
            >
            <swiper-slide v-for="work in works.slice().reverse()" :key="work.works_id" class="work-card">
                <div class="work-poster">
                    <a :href="work.url" target="_blank">
                        <video :src="`/videos/${work.video}.mp4`" no-controls autoplay loop disablePictureInPicture mute></video>
                        <img
                            :src="`/imgs/small/${work.poster}.webp`"
                            :alt="$t(`works.${ work.id }.title`)"
                        />
                    </a>
                </div>
                <div class="work-catchphrase">{{ $t(`works.${ work.id }.catchphrase`) }}</div>
                <div class="work-infos">
                    <div class="text-content">
                        <a :href="work.url" target="_blank">{{ $t(`works.${ work.id }.title`) }}</a>
                        <p>{{ work.year }}</p>
                    </div>
                    <div class="text-content">
                        <p>{{ work.technologies }}</p>
                    </div>
                </div>
                <div></div>
                <div class="text-content">
                    <p>
                        {{ $t(`works.${ work.id }.description`) }}
                    </p>
                </div>
            </swiper-slide>
        </swiper>
    </div>
</template>

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

export default {
    async setup() {
        const works = ref([]);

        const { data: worksData } = useFetch('/api/items/works', { server: true });
        
        onMounted(async () => {        
            if (worksData.value) {
                works.value = worksData.value.data;
            }
        });

        useFetchTranslation('works');

        let globalData = await useFetchGlobalData();
        globalData = globalData.globalData._object.$sglobalData;

        return {
            modules: [Keyboard, Navigation, A11y],
            works,
            globalData,
        }
    },
    components: {
        Swiper,
        SwiperSlide,
    },
};
</script>

<style lang="scss">
@import 'assets/scss/_variables.scss';

    .swiper {
        height: 100%;
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr auto;
        @media screen and (min-width: $breakpoint-large) {
            width: calc(100% + $margin-x);
        }
        .swiper-wrapper {
            grid-column-start: 1;
            grid-column-end: 3;
            grid-row-start: 1;
            grid-row-end: 1;
        }
        .swiper-button-prev,
        .swiper-button-next {
            height: 3rem;
            opacity: 1;
            transition: opacity 0.2s;
            display: flex;
            &:hover {
                opacity: 0.8;
            }
        }
        .swiper-button-prev {
            margin-right: 1rem;
            justify-self: end;
        }
        .swiper-button-next {
            margin-left: 1rem;
            justify-self: start;
        }
        .swiper-button-disabled::before {
            color: $light-color !important;
        }
        .swiper-button-prev::before,
        .swiper-button-next::before {
            transition: color 0.2s ease;
            font-size: $l-txt-size;
            color: $brand-color;
            cursor: pointer;
            align-self: flex-end;
        }
        .swiper-button-prev::before {
            content: "←";
        }
        .swiper-button-next::before {
            content: "→";
        }
    }
</style>