<template>
  <div class="content">
    <hooper :settings="hooperSettings">

      <slide v-for="(image, key) in images" :key="key">
        <a style="cursor: default;" rel="group" :href="image" class="js-thumbnail"
          @click="handleProductShowClick('image-carousel' + key)" :key="updateComponent">
          <img v-if="is_admin == false" :src="image" class="load-image visible-block" :data-src="image"
            :ref="'image-carousel' + key" id="thumb-image" :key="updateComponent">
          <img v-else-if="is_admin == true" :src="image" class="load-image visible-block" :data-src="image"
            :ref="'image-carousel' + key">
        </a>
      </slide>

      <slide v-if="is_admin == false" v-for="(video, index) in videos" :key="index">
        <a style="cursor: default;" class="js-thumbnail right-margin-small" id="link-image" :href="video.embed"
          rel="group" data-type="video" @click="handleProductVideo(video)">
          <img :src="video.thumb" :data-src="video.thumb" class="load-image visible-block" :alt="video.thumb"
            :key="updateComponent">
        </a>
      </slide>

      <navigation slot="hooper-addons">
      </navigation>
    </hooper>
  </div>
</template>


<style src="./styles.css"></style>
<script src="./scripts.js"></script>
