<template>
  <div id="app">
    <div v-on:click="backImg" class="arrow left">
      <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" style="enable-background: new 0 0 512 512" xml:space="preserve" > <g> <g> <path d="M492,236H68.442l70.164-69.824c7.829-7.792,7.859-20.455,0.067-28.284c-7.792-7.83-20.456-7.859-28.285-0.068 l-104.504,104c-0.007,0.006-0.012,0.013-0.018,0.019c-7.809,7.792-7.834,20.496-0.002,28.314c0.007,0.006,0.012,0.013,0.018,0.019 l104.504,104c7.828,7.79,20.492,7.763,28.285-0.068c7.792-7.829,7.762-20.492-0.067-28.284L68.442,276H492 c11.046,0,20-8.954,20-20C512,244.954,503.046,236,492,236z" /> </g> </g> </svg>
    </div>
    <div class="box-with-img">
      <h1> {{ images[index].title }} </h1>
      <img :src="images[index].src" alt="" />
      <p> {{ images[index].text }} </p>
    </div>
    <div v-on:click="nextImg" class="arrow right">
      <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" style="enable-background: new 0 0 512 512" xml:space="preserve" > <g> <g> <path d="M492,236H68.442l70.164-69.824c7.829-7.792,7.859-20.455,0.067-28.284c-7.792-7.83-20.456-7.859-28.285-0.068 l-104.504,104c-0.007,0.006-0.012,0.013-0.018,0.019c-7.809,7.792-7.834,20.496-0.002,28.314c0.007,0.006,0.012,0.013,0.018,0.019 l104.504,104c7.828,7.79,20.492,7.763,28.285-0.068c7.792-7.829,7.762-20.492-0.067-28.284L68.442,276H492 c11.046,0,20-8.954,20-20C512,244.954,503.046,236,492,236z" /> </g> </g> </svg>
    </div>
  </div>
</template>

<script>


export default {
  name: "App",
  data: function () {
    return {
      images: [
        {
          src: "/img/thumb_01.jpg",
          title: "Titulek 1",
          text: "Tohle je obrázek 1",
        },
        {
          src: "/img/thumb_02.jpg",
          title: "Titulek 2",
          text: "Tohle je obrázek 2",
        },
        {
          src: "/img/thumb_03.jpg",
          title: "Titulek 3",
          text: "Tohle je obrázek 3",
        },
        {
          src: "/img/thumb_04.jpg",
          title: "Titulek 4",
          text: "Tohle je obrázek 4",
        },
        {
          src: "/img/thumb_05.jpg",
          title: "Titulek 5",
          text: "Tohle je obrázek 5",
        },
        {
          src: "/img/image_30.jpg",
          title: "Alpy",
          text: "Pohled na Rakouské alpy",
        },
      ],
      index: 0,
    };
  },
  methods: {
    nextImg: function () {
      this.index += 1;
      if (this.index > this.images.length - 1) {
        this.index = 0;
      }
    },
    backImg: function () {      
      this.index -= 1;
      if (this.index < 0) {
        this.index = this.images.length - 1;
      }
    },
  },
};
</script>

<style>
#app {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 90vh;
}
.box-with-img {
  width: 30%;
  height: 50%;
}
.box-with-img img {
  width: 100%;
  height: 100%;
}
.arrow {
  width: 50px;
  height: 50%;
  display: flex;
  align-items: center;
}
.arrow.left {
  padding-top: 37px;
  padding-right: 15px;
}
.arrow.right {
  padding-top: 37px;
  padding-left: 15px;
}
.arrow.right svg {
  transform: rotate(180deg);
}
</style>
