<template>
  <section
    id="collections-gallery"
    class="q-my-lg"
  >
    <div class="text-uppercase text-grey-9 text-h6 text-left q-ml-md">Collections</div>

    <div class="row q-gutter-none">
      <div
        class="col-12 col-sm-6 col-md-4"
        v-for="collection,idx in collections"
        :key="idx"
      >
        <CollectionThumb :collection="collection" />
      </div>
      <div v-if="!collections || collections.length == 0">
        <div class="text-grey text-h6 q-pa-md">No collection available</div>
      </div>
    </div>
    <div class="row">
      <div class="col-12 text-center">
        <q-btn
          class="text-grey-5"
          flat
          to="/collections"
        >Browse all</q-btn>
      </div>
    </div>
  </section>
</template>

<script>
import CollectionThumb from "../components/CollectionThumb";
import { mapGetters } from 'vuex';
export default {
  // name: 'ComponentName',
  components: {
    CollectionThumb
  },
  data () {
    return {};
  },
  computed: {
    ...mapGetters({ 'collections': 'collections/collections' })
  }
};
</script>

<style>
</style>