﻿<link rel="stylesheet" href="swiper-bundle.min" />
<style>
    .swiper-container {
        width: 100%;
        height: 100%;
        padding: 20px 2px;
    }

    .swiper-button-next, .swiper-button-prev {
        background-color: white;
        color: black;
        box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.1);
        border-radius: 50%;
        width: 50px;
        height: 50px;
    }

        .swiper-button-next:after, .swiper-button-prev:after {
            font-size: 1.3em;
        }

    .swiper-button-disabled {
        display: none;
    }
</style>

<template>
    <div class="swiper-container" :id="id">
        <div class="swiper-wrapper">
            <div class="swiper-slide" v-for="item in items">
                <slide-item v-bind:[input]="item"></slide-item>
            </div>
        </div>
        <!-- Add Pagination -->
        <div class="swiper-button-next"></div>
        <div class="swiper-button-prev"></div>
    </div>
</template>

<script src="swiper-bundle.min"></script>

<script>
    Component([], async function () {    
        var params = this.$params;
        var slideItem = await LoadVueComponent(params.component.substring(1), params.componentProp);
        return {
            components: {
                'slide-item': slideItem
            },
            data: function () {                
                return {
                    input: params.componentInput,
                    items: params.items,
                    swiper: undefined,
                    id: 'slider-' + Math.trunc(Math.random() * 10000)
                }
            },
            updated: function () {
                if (this.swiper) {                    
                    this.swiper.update();
                }
            },
            mounted: function () {                
                var id = '#' + this.id;
                this.swiper = new Swiper(id,
                    {
                        spaceBetween: 30,
                        pagination: {
                            el: '.swiper-pagination',
                            clickable: true
                        },
                        navigation: {
                            nextEl: '.swiper-button-next',
                            prevEl: '.swiper-button-prev'
                        },
                        breakpoints: {
                            380: {
                                slidesPerView: 1,
                                spaceBetween: 20
                            },
                            640: {
                                slidesPerView: 2,
                                spaceBetween: 20
                            },
                            768: {
                                slidesPerView: 2,
                                spaceBetween: 20
                            },
                            1024: {
                                slidesPerView: params.itemsPerSlide ?? 5,
                                spaceBetween: 20
                            }
                        }
                    });
            }
        }
    });
</script>