@using Sitecore.Mvc;
@using Sitecore.Data.Items;
@using Sitecore.XA.Foundation.MarkupDecorator.Extensions;
@using Sitecore.XA.Foundation.RenderingVariants.Extensions;
@using Sitecore.XA.Foundation.SitecoreExtensions.Extensions;
@using Sitecore.XA.Foundation.Variants.Abstractions.Fields;

@model Sitecore.XA.Foundation.RenderingVariants.Models.VariantListsRenderingModel

<script src="js/splide.min.js"></script>
<script src="css/splide-core.min.css"></script>
<link rel="stylesheet" href="css/themes/splide-skyblue.min.css">

<style>
    .splide {
        margin: 0 auto;
    }

    .thumbnails {
        display: flex;
        margin: 1rem auto 0;
        padding: 0;
        justify-content: center;
    }

    .thumbnail {
        width: 70px;
        height: 70px;
        overflow: hidden;
        list-style: none;
        margin: 0 0.2rem;
        cursor: pointer;
        opacity: 0.3;
    }

        .thumbnail.is-active {
            opacity: 1;
        }

        .thumbnail img {
            width: 100%;
            height: auto;
        }
</style>

<div>
    <h2 align="center">@Html.Sitecore().Field("Title")</h2>

    @if (Model.Rendering.DataSourceItem == null)
    {
        @Model.MessageIsEmpty
    }
    @if (!Model.Items.Any() && Model.Rendering.DataSourceItem != null)
    {
        using (Html.Sxa().BeginEditFrame(Html.Sitecore().CurrentRendering.DataSource, "Carousel Empty", Model.IsControlEditable))
        {
            @Model.MessageIsEmpty
        }
    }

    <section id="main-slider" class="splide" aria-label="My Awesome Gallery">
        <div class="splide__track">

            <ul class="splide__list">
                @foreach (Item item in @Model.Items)
                {
                    <li class="splide__slide">
                        @using (Html.Sxa().BeginEditFrame(item.ID.ToString(), "Carousel Slider", Model.IsControlEditable))
                        {
                            foreach (BaseVariantField variantField in Model.VariantFields)
                            {
                                @Html.RenderingVariants().RenderVariant(variantField, item, Model.RenderingWebEditingParams, Model)
                            }
                        }
                    </li>
                }
            </ul>
        </div>
    </section>

    <ul id="thumbnails" class="thumbnails">
        @foreach (Item item in @Model.Items)
        {
            <li class="thumbnail">
                @using (Html.Sxa().BeginEditFrame(item.ID.ToString(), "Carousel Slider", Model.IsControlEditable))
                {
                    foreach (BaseVariantField variantField in Model.VariantFields)
                    {
                        @Html.RenderingVariants().RenderVariant(variantField, item, Model.RenderingWebEditingParams, Model)
                    }
                }
            </li>
        }
    </ul>
</div>

<script>
    var splide = new Splide("#main-slider", {
        width: 900,
        height: 700,
        pagination: false,
        cover: true
    });

    var thumbnails = document.getElementsByClassName("thumbnail");
    var current;

    for (var i = 0; i < thumbnails.length; i++) {
        initThumbnail(thumbnails[i], i);
    }

    function initThumbnail(thumbnail, index) {
        thumbnail.addEventListener("click", function () {
            splide.go(index);
        });
    }

    splide.on("mounted move", function () {
        var thumbnail = thumbnails[splide.index];

        if (thumbnail) {
            if (current) {
                current.classList.remove("is-active");
            }

            thumbnail.classList.add("is-active");
            current = thumbnail;
        }
    });

    splide.mount();
</script>