<script setup lang="ts">
import coverImage from '@/assets/introduction/functional _fitness_all_ages/00_cover.jpg'
import overviewImage01 from '@/assets/introduction/functional _fitness_all_ages/01_overview.jpg'
import methodsImage from '@/assets/introduction/functional _fitness_all_ages/02_methods.jpg'
import resultsImage from '@/assets/introduction/functional _fitness_all_ages/03_results.jpg'
import overviewImage02 from '@/assets/introduction/functional _fitness_all_ages/04_overview.jpg'
import Layout from '@/components/layout/DefaultLayout.vue'

const slides = [
  {
    title: '封面',
    src: coverImage,
  },
  {
    title: '研究總覽',
    src: overviewImage01,
  },
  {
    title: '方法與指標',
    src: methodsImage,
  },
  {
    title: '主要結果',
    src: resultsImage,
  },
  {
    title: '研究總覽',
    src: overviewImage02,
  },
]
</script>

<template>
  <Layout>
    <template #main>
      <v-card variant="flat">
        <v-card-title class="font-weight-bold text-primary d-flex align-center py-0">
          <v-icon class="mr-4" color="accent" icon="mdi-information-outline" />
          計畫簡介
        </v-card-title>

        <v-carousel
          class="introduction-carousel"
          color="secondary"
          delimiter-icon="mdi-square"
          hide-delimiter-background
          show-arrows="hover"
        >
          <v-carousel-item
            v-for="slide in slides"
            :key="slide.src"
            :alt="slide.title"
            :src="slide.src"
          />
        </v-carousel>
      </v-card>
    </template>
  </Layout>
</template>

<style scoped>
.introduction-carousel {
  height: calc(100dvh - 220px) !important;
  min-height: 420px;
  max-height: 680px;
}

.introduction-carousel :deep(.v-window__container),
.introduction-carousel :deep(.v-window-item),
.introduction-carousel :deep(.v-responsive),
.introduction-carousel :deep(.v-img) {
  height: 100%;
}

.introduction-carousel :deep(.v-img__img) {
  object-fit: contain;
  object-position: center;
}

@media (max-width: 600px) {
  .introduction-carousel {
    height: calc(100dvh - 180px) !important;
    min-height: 520px;
  }
}

.introduction-carousel :deep(.v-carousel__controls__item .v-icon) {
  color: rgb(var(--v-theme-accent)) !important;
  opacity: 1;
}

.introduction-carousel :deep(.v-carousel__controls__item.v-btn--active .v-icon),
.introduction-carousel :deep(.v-carousel__controls__item--active .v-icon) {
  color: rgb(var(--v-theme-secondary)) !important;
  opacity: 1;
}
</style>
