<template lang="pug">
    .products-grid-wrapper
        .products-grid
            product-add
            product-card(v-for='product in products' :key='product.id' :item='product')
</template>

<script>
    import { mapGetters } from 'vuex'

    import ProductAdd from '@/components/product/ProductAdd'
    import ProductCard from '@/components/product/ProductCard'

    export default {
        components: {
            ProductAdd,
            ProductCard
        },
        computed: mapGetters([
            'products'
        ])
    }
</script>

<style lang="sass">
    .products-grid-wrapper
        width: 100%
        height: calc(100% - 50px)
        margin-top: 15px
        overflow-y: auto
        .products-grid
            width: 100%
</style>
