<template>
  <section class="mx-auto trending">
    <v-container fluid class="pa-4">
      <h1 class="pa-4">TRENDING</h1>
      <v-slide-group v-model="model" class="pa-4" show-arrows>
        <v-slide-item v-for="n in 7" :key="n" v-slot:default="{ active, toggle }">
          <div class="d-flex flex-column ma-4 pa-4">
            <v-sheet height="320" width="290" class="pa-4" color="white" tile>
              <v-img
                src="https://gusta-online.nl/media/catalog/product/cache/4/image/544000d3f0f3eb3fd09c51e2c6034a96/0/4/04125370.jpg"
                contain
              />
            </v-sheet>

            <span class="title mt-6">Linteloo</span>
            <span class="subtitle">Isola salontafel van Roderick Vos, large</span>
            <span class="mt-6 font-weight-black">4125,-</span>
          </div>

          <!-- <v-card color="white" class="ma-4 pa-4" height="320" width="290" tile flat>
            <v-card-text>
              
            </v-card-text>
          </v-card>-->
        </v-slide-item>
      </v-slide-group>

      <v-expand-transition>
        <v-sheet v-if="model != null" color="grey lighten-4" height="200" tile>
          <v-row class="fill-height" align="center" justify="center">
            <h3 class="title">Selected {{ model }}</h3>
          </v-row>
        </v-sheet>
      </v-expand-transition>
    </v-container>
  </section>
</template>

<script>
import Product from '@/components/Product/Product'

export default {
  components: { Product },
  data: () => ({
    model: null
  })
}
</script>

<style scoped>
.trending {
  background-color: #f5f5f5;
}
</style>