<template>
  <q-carousel
    swipeable
    animated
    :autoplay="autoplay"
    transition-prev="slide-right"
    transition-next="slide-left"
    @mouseenter="autoplay = false"
    @mouseleave="autoplay = 5000"
    :arrows="imgGallery.length > 1"
    v-model="slide"
    :thumbnails="imgGallery.length > 1"
    infinite
    navigation
  >
    <q-carousel-slide
      v-for="(myimg, index) in imgGallery"
      :name="index"
      :key="index"
      :img-src="directory + '/' + myimg.imagefile"
      @click="showImage(myimg)"
    >
      <div
        v-if="myimg.description"
        class="absolute-bottom custom-caption text-center subtitle"
      >
        {{ myimg.description }}
      </div>
    </q-carousel-slide>
  </q-carousel>
  <q-dialog v-model="dialogVisible" maximized>
    <div class="q-ma-sm column justify-center">
      <q-img
        mode="contain"
        v-if="selectedImage.imagefile"
        :src="directory + '/' + selectedImage.imagefile"
        :alt="selectedImage.imagefile"
        @click="closeDialog"
      >
        <div
          v-if="selectedImage.description"
          class="absolute-bottom custom-caption text-center"
        >
          <div class="subtitle">{{ selectedImage.description }}</div>
        </div>
      </q-img>
      <div>
        <div class="text-center">
          <q-btn
            color="primary"
            :label="t('dialog.close')"
            @click="closeDialog"
          />
        </div>
      </div>
    </div>
  </q-dialog>
</template>

<script lang="ts" src="./CGalleryImages.ts">
</script>

<style lang="scss" scoped>
@import './CGalleryImages.scss';
</style>
