<template>
  <div class="gallery">
    <div class="big-image">
      <figure class="image-container">
        <img :src="bigImage" alt="" />
        <figcaption>
          {{ images.indexOf(bigImage) + 1 }} / {{ images.length }}
        </figcaption>
      </figure>
    </div>
    <ul class="thumbnails">
      <li class="thumbnail" v-for="(img, index) in images" :key="index">
        <img
          :src="img"
          :alt="'Image' + index"
          @click.prevent="setBigImage(index)"
        />
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "gallery",
  props: {
    images: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      bigImage: ""
    };
  },
  methods: {
    setBigImage(index) {
      this.bigImage = this.images[index];
    }
  },
  mounted() {
    this.bigImage = this.images[0];
  }
};
</script>

<style lang="scss" scoped>
.big-image {
  width: 100%;
  height: 40vh;

  @media (min-width: 35em) {
    height: 30em;
  }

  display: flex;
  justify-content: center;
  align-content: center;
  align-items: center;

  background-color: #444;

  overflow: hidden;
}

.image-container {
  position: relative;

  margin: 0;

  width: 100%;
  height: 100%;

  flex: 1;

  display: flex;
  justify-content: center;
  align-content: center;
  align-items: center;

  box-shadow: inset 0 0 15em #000;

  img {
    align-self: center;

    max-width: 100%;
    max-height: 100%;
  }

  figcaption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;

    background-color: rgba(#000, 0.5);
    color: #fff;
    text-align: center;
  }
}

.thumbnails {
  display: flex;
  align-content: center;
  align-items: center;

  height: 6.5em;

  padding: 0.5em;

  overflow-x: scroll;

  background-color: #888;
}

.thumbnail {
  flex: 1 0 auto;

  height: 100%;

  max-width: 100%;
  max-height: 100%;

  display: flex;
  justify-content: center;
  align-content: center;
  align-items: center;

  & + .thumbnail {
    margin-left: 0.5em;
  }

  img {
    cursor: pointer;

    box-sizing: border-box;

    border: 0.25em solid #fff;

    align-self: center;

    max-width: 100%;
    max-height: 100%;
  }
}
</style>
