@using BlazorAnimation
@using TIAMWebApp.Shared.Application.Models.ClientSide.UI
<header style="padding-bottom: @PBottom;">
    
        <div id="owl-demo" class="owl-carousel owl-theme" style="/* position:absolute; */ z-index: 1;">

            @{
                foreach (var slider in SliderItems)
                {
                    <div class="item d-flex align-items-center" style="height: @Height;">
                        <img src="@slider.ImageUrl" class="my-auto" alt="@slider.Title">
                    </div>
                }
            }
            
        </div>


    
</header>



<script>
    $(document).ready(function () {

        $("#owl-demo").owlCarousel({

            navigation: true, // Show next and prev buttons
            autoplay: true,
            loop: true,
            autoplayTimeout: 5000,
            slideSpeed: 100,
            paginationSpeed: 200,

            items: 1,
            itemsDesktop: false,
            itemsDesktopSmall: false,
            itemsTablet: false,
            itemsMobile: false,
            /*responsive: {
                0: {
                    items: 1,
                },
                600: {
                    items: 1,
                },
                1000: {
                    items: 2,
                }
            },*/
            animateOut: 'fadeOut',
            animateIn: 'flipInX',

        });

    });
</script>

@code {
    [Parameter]
    public List<HeroSliderItem> SliderItems { get; set; }

    [Parameter]
    public string PBottom { get; set; } = "50px";

    [Parameter]
    public string Height { get; set; } = "50vh";
}