@using BlazorAnimation
@using TIAMWebApp.Shared.Application.Models.ClientSide.UI
<header style="padding-bottom: @PBottom;" class="bg-light">
    
        <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; background-image : url('@slider.ImageUrl'); background-size:cover; background-position:center; background-color: rgba(0, 0, 0, 0.6); background-blend-mode: overlay;">
                    <div class="container">
                        <div class="row">
                        <div class="col-6 col-sm-12 text-white">
                            <h1>@slider.Title</h1>
                            <p>@slider.Subtitle</p>
                            <a href="@slider.ButtonUrl" class="btn btn-primary">@slider.ButtonText</a>
                        </div>
                        
                        </div>
                    </div>
                 
                    </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";
}