@inherits Dynamicweb.Rendering.ViewModelTemplate<Dynamicweb.Frontend.ParagraphViewModel>
@using Dynamicweb.Frontend

@if (Model.Item.TryGetItems("Items", out IList<ItemViewModel> items))
{

    AddStylesheet("/Files/Templates/Designs/Swift-v2/Assets/lib/swiffy-slider/dist/css/swiffy-slider.min.css");
    AddScript("/Files/Templates/Designs/Swift-v2/Assets/lib/swiffy-slider/dist/js/swiffy-slider.min.js");

    <div id="Slider_@Model.ID" class="
                                                swiffy-slider 
                                                slider-nav-round
                                                slider-nav-sm
                                                slider-nav-page
                                                slider-indicators-sm
                                                slider-indicators-outside
                                                slider-indicators-round">

        <ul class="slider-container pb-4" style="--swiffy-slider-item-width: 100%;">
            @foreach (var item in items)
            {
                <li>
                    <div class="card shadow h-100"
                        style="--bs-body-color: white;--bs-heading-color: white;min-height:55vh; --bs-card-border-width: 0; --bs-card-inner-border-radius: 0;">
                        @if (item.TryGetImageFile("Image", out ImageFileViewModel image))
                        {
                            <img class="card-img object-fit-cover h-100 position-absolute"
                                src="@image.ToGetImage(new() { Quality = 95 })"
                                style="object-position: @image.GetFocalPointPercentage()"
                                title="@image.Name">
                        }
                        <div class="card-img-overlay d-flex"
                            style="background-image: linear-gradient(to top, black, transparent);padding: var(--swift-poster-padding);">
                            <div data-swift-container class="card-text mt-auto">
                                <div data-swift-text class="mb-0-last-child">
                                    @if (item.TryGetString("Title", out string title))
                                    {
                                        @title
                                    }
                                    @if (item.TryGetString("Subtitle", out string subtitle))
                                    {
                                        @subtitle
                                    }
                                    @if (item.TryGetString("Text", out string text))
                                    {
                                        @text
                                    }
                                </div>
                                <div>
                                    @if (item.TryGetButton("Button", out ButtonViewModel button))
                                    {
                                        <a href="@button.Link.Url" class="btn btn-@button.Style align-self-start"
                                            data-dw-button="@button.Style">@button.Label</a>
                                    }
                                </div>
                            </div>
                        </div>
                    </div>
                </li>
            }
        </ul>

        <button type="button" title="@Translate("Previous slide")" class="slider-nav" style="z-index:1;">
            <span class="visually-hidden">@Translate("Previous slide")</span>
        </button>
        <button type="button" title="@Translate("Next slide")" class="slider-nav slider-nav-next" style="z-index:1;">
            <span class="visually-hidden">@Translate("Next slide")</span>
        </button>

        <ul class="slider-indicators mb-2">
            @for (int slideCount = 1; items.Count >= slideCount; slideCount++)
            {
                <li title='@Translate("Go to slide") @slideCount'>
                    <span class="visually-hidden">@Translate("Go to slide") @slideCount</span>
                </li>
            }
        </ul>
    </div>

    <script>
        window.swiffyslider.initSlider(document.querySelector('#Slider_@Model.ID'));
    </script>
}
