<template>
  <v-container pt-0>
    <v-layout row justify-start align-center ml-1>
      <h2 class="primary--text pull-left mb-2">Images</h2>
    </v-layout>
    <v-layout class="results-gallery" row justify-space-between align-center mr-1>
      <gallery
        :images="images"
        :index="index"
        :options="options"
        @close="index = null"/>
      <div
        v-for="(image, imageIndex) in images"
        :key="imageIndex"
        :style="{ backgroundImage: 'url(' + image + ')'}"
        class="result-image"
        @click="index = imageIndex"/>
    </v-layout>
  </v-container>
</template>

<script>
import VueGallery from 'vue-gallery'

export default {
  name: 'ImageResults',
  components: {
    'gallery': VueGallery
  },
  data () {
    return {
      images: [
        'https://dummyimage.com/800/ffffff/000000',
        'https://dummyimage.com/1600/ffffff/000000',
        'https://dummyimage.com/1280/000000/ffffff',
        'https://dummyimage.com/400/000000/ffffff',
        'https://dummyimage.com/200x400/000/fff',
        'https://dummyimage.com/400/000000/ffffff',
        'https://dummyimage.com/400/000000/ffffff'
      ],
      index: null,
      options: {
        stretchImages: true
      }
    }
  }
}
</script>

<style lang="scss">
.result-image {
  float: left;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  border: 1px solid #ebebeb;
  margin: 5px;
  height: 100px;
  min-width: 100px;
  width: auto
}
.results-gallery {
  overflow-x: scroll;
  .close {
    margin: 10px;
  }
}
</style>
