<template>

  <main class="categoryProducts">

      <div class="introBlock alignLeft" v-if="listTitle || listContent">

          <div class="innerIntro">
              <div
                      class="introTitle"
                      v-html="listTitle"
                      v-if="listTitle.length"
              ></div>

              <div
                      class="introContentWrap"
                      v-html="listContent"
                      v-if="listContent.length"
              ></div>
          </div>

      </div>


      <products-grouped
              :loading="loading"
              :set-products="products"
              :set-parent-category="setParentCategory"
      ></products-grouped>


      <loading-spinner
              :loading="loading"
              loading-text="Loading Products"
      ></loading-spinner>


  </main>

</template>

<script>

import productsGrouped from './products_grouped';

export default {
    name: "categoryProducts",
    components: {
        productsGrouped
    },
    props: {
        setProducts: {
            type: [Object, Array, Boolean],
            default (rawProps) {
                return [];
            }
        },
        setParentCategory: {
            type: [Object, Array, Boolean],
            default (rawProps) {
                return false;
            }
        },
        listTitle: {
            type: [String, Boolean],
            default (rawProps) {
                return false;
            }
        },
        listContent: {
            type: [String, Boolean],
            default (rawProps) {
                return false;
            }
        }
    },
    data() {
        return {
            products: [],
            parentCategory: {},
            loading: false
        }
    },
    created() {
        this.products = this.setProducts;
    },
    methods: {

        hasProducts(products) {

            if(typeof products != 'undefined') {
                return products.length;
            }

            return false;

        }

    }
}
</script>

<style lang="less">

    .categoryProducts {

        position: relative;
        width: 100%;
        min-height: 400px;

        .loadingSpinner {
            position: absolute;
            top: 160px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 5;
        }

        .splide__track {

            &:after {
                content: "";
                width: 257px;
                height: ~"calc(100% + 48px)";
                position: absolute;
                top: -24px;
                bottom: -24px;
                right: ~"calc(0px -  ((100vw - 100%) / 2))";
                background: linear-gradient(92deg, rgba(255, 255, 255, 0) 1.17%, rgba(255, 255, 255, 1) 71.03%);

            }

        }

    }

    .categoryProductList {

        float: none;
        clear: both;
        display: flex;
        width: ~"calc(100% + 40px)";
        margin: 0 -20px;
        gap: 0;

        li {
            flex: 0 0 33.333333%;
            padding: 0 20px;
        }


    }

</style>
