<template>
        <div class="gallery">
            <h1 class="subtitle-1 grey--text pa-2 d-flex justify-center">Galleria</h1>
            <v-divider></v-divider>
            <v-container class="my-5">
                <div>
                    <v-row>
                        <v-col v-for="item in items" :key="item.id" class="d-flex child-flex" cols="4" >
                            <v-img :src="item.src" contain class="grey lighten-2" @click="selectedItem = item">
                                <template v-slot:placeholder>
                                    <v-row class="fill-height ma-0" align="center" justify="center">
                                        <v-progress-circular indeterminate color="grey lighten-5"></v-progress-circular>
                                    </v-row>
                                </template>
                            </v-img>
                        </v-col>
                    </v-row>
                </div>
            </v-container>
            <v-overlay v-if="selectedItem">
                <v-img :src="selectedItem? selectedItem.src :''" contain  @click="selectedItem = null"></v-img>
            </v-overlay>
        </div>
</template>

<script>
// @ is an alias to /src

export default {
  name: 'Gallery',

  data(){
    return {
      selectedItem: null,
      items: [
        {id: 1, src: require("../assets/images/img1.jpg")},
        {id: 2, src: require("../assets/images/img2.jpg")},
        {id: 3, src: require("../assets/images/img3.jpg")},
        {id: 4, src: require("../assets/images/img4.jpg")},
        {id: 5, src: require("../assets/images/img5.jpg")},
        {id: 6, src: require("../assets/images/img6.jpg")},
        {id: 7, src: require("../assets/images/img7.jpg")},
        {id: 8, src: require("../assets/images/img8.jpg")},
      ]
    }
  }

}
</script>