<template>

  <section class="productSlider" v-if="hasProducts(products)">

      <Swiper
              :spaceBetween="sliderOptions.spaceBetween"
              :loop="sliderOptions.loop"
              :pagination="sliderOptions.pagination"
              :navigation="sliderOptions.navigation"
              :width="sliderOptions.width"
              :slidesPerGroup="sliderOptions.slidesPerGroup"
              :breakpoints="sliderOptions.breakpoints"
              ref="productSlider"
      >

          <SwiperSlide
                  v-for="product in products"
                  :key="'img' + product.id"
          >

              <product-card
                      :product="product"
                      :in-stock="product.in_stock"
                      :from-price="product.from_price"
                      :product-url="product.url"
                      :product-image="product.image"
                      :basket-button-data="product.basket_button_data"
                      :category="product.main_category"
                      :preview-only="true"
                      :slideshow="false"
                      :minimal="true"
                      :classes="['largeCard']"
              ></product-card>

          </SwiperSlide>

      </Swiper>

  </section>

</template>

<script>

import Swiper from '@site/js/components/swiper/Swiper.vue';
import SwiperSlide from '@site/js/components/swiper/SwiperSlide.vue';

export default {
    name: "ProductSlider",
    components: {
        Swiper,
        SwiperSlide
    },
    props: {
        products: {
            type: [Object, Array, Boolean],
            default (rawProps) {
                return [];
            }
        }
    },
    data() {
        return {
            sliderOptions: {
                spaceBetween: 26,
                loop: false,
                pagination: {
                    clickable: true
                },
                navigation: true,
                width: 382,
                slidesPerGroup: 1,
                breakpoints: {
                    640: {
                        width: 282,
                        slidesPerGroup: 1,
                        spaceBetween: 16
                    }
                }
            },
        }
    },

created() {

    },
    mounted() {

    },
    computed: {


    },
    methods: {


        hasProducts(products) {

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

            return false;

        }

    }
}
</script>

<style lang="less">

    /* Swiper CSS is imported globally in app.js */

    .productSlider {

        width: 100%;
        position: relative;
        float: none;
        clear: both;
        padding: 0 0 56px;

        @media @mobile {
            padding: 0;
        }


        .productCard {
            width: 100%;
            min-width: 282px;
        }

        .swiper-wrapper {
            overflow: visible;
        }

        .swiper-button-prev,
        .swiper-button-next {
            width: 48px;
            height: 48px;
            background: transparent;
            border-radius: 0;
            position: absolute;
            top: 100%;
            transform: none;
            display: flex;
            align-items: center;
            opacity: 1;
            padding: 24px 0 0;

            &:after {
                font-size: 24px;
                color: var(--dark_primary);
            }

            &.swiper-button-disabled {
                opacity: 0.5;
                pointer-events: none;
            }

            @media @mobile {
                display: none;
            }
        }

        .swiper-button-prev {
            left: 0;
            right: auto;
            justify-content: flex-start;
        }

        .swiper-button-next {
            left: 49px;
            right: auto;
            justify-content: flex-end;
        }


    }




</style>
