<template>
  <div class="swipeable-thumbnails-view">
      <v-responsive :aspect-ratio="16 / 9" class="ma-0 pa-0">
        <v-carousel height="100%" hide-delimiters show-arrows-on-hover v-model="currentIndex">
          <v-carousel-item v-for="(item,index) in items" :key="item.event.getId()">
            <ThumbnailView :item="items[index]" :previewOnly="true" />
          </v-carousel-item>          
        </v-carousel>
    </v-responsive>
    <div class="indicator-container">
      <div v-for="(item,index) in items" :key="index" :class="{'indicator': true, 'current': index == currentIndex}" />
    </div>
  </div>
</template>

<script>
import messageMixin from "../../messages/messageMixin";
import ThumbnailView from '../../file_mode/ThumbnailView.vue';

export default {
  mixins: [messageMixin],
  components: { ThumbnailView },
  props: {
    items: {
      type: Array,
      default: function () {
        return []
      }
    },
  },
  data() {
    return {
      currentIndex: 0,
    };
  },
};
</script>

<style lang="scss">
@import "@/assets/css/chat.scss";
</style>