@model ConstructorAppUI.ViewModels.HomeBannerAndSliderViewModel

@if (Model != null && Model.HomeBanners != null && Model.HomeBanners.Any())
{
    var banner = Model.HomeBanners.First();
     <!-- varsayılan olarak ilk banner'ı alıyoruz -->
    <div class="preloader">
        <div class="cssload-box-loading"></div>
    </div>
    <div class="position-relative">
        <section class="section novi-background bg-cover section-horace">
            <div class="section-horace-left bg-gray-800">
                <div class="section-horace-left-content text-center">
                    <article class="project-classic project-classic-2">
                            <div class="project-classic-title">
                                @Html.Raw(banner.Title.Replace("&", "<br>&"))
                            </div>
                            <h6 class="project-classic-text">
                                @Html.Raw(banner.SubTitle.Replace(".", "<br>"))
                            </h6>
                        <a class="button button-jerry button-primary-outline" href="#contacts">
                            İletişim
                            <span class="button-jerry-line"></span>
                            <span class="button-jerry-line"></span>
                            <span class="button-jerry-line"></span>
                            <span class="button-jerry-line"></span>
                        </a>
                    </article>
                </div>
                <div class="section-horace-left-panel">
                    <div class="swiper-custom-nav">
                        <div class="swiper-button-prev mdi mdi-arrow-left" id="swiper-prev"></div>
                        <div class="swiper-button-next mdi mdi-arrow-right" id="swiper-next"></div>
                    </div>
                </div>
            </div>

            <!-- SLIDER -->
            @if (Model.Sliders != null && Model.Sliders.Any())
            {
                <div class="swiper-container swiper-slider swiper-slider-1" data-loop="true" data-autoplay="5000" data-simulate-touch="false" data-custom-prev="#swiper-prev" data-custom-next="#swiper-next" data-slide-effect="fade">
                    <div class="swiper-wrapper text-center">
                        @foreach (var slide in Model.Sliders)
                        {
                            <div class="swiper-slide context-dark" data-slide-bg="@slide.ImageUrl">
                                <div class="swiper-slide-caption project-modern">
                                    <ul class="project-modern-info">
                                        <li class="heading-6 project-modern-info-item project-modern-address" data-caption-animate="fadeInDown" data-caption-delay="200">@slide.Location</li>
                                        <li class="heading-6 project-modern-info-item" data-caption-animate="fadeInDown" data-caption-delay="100">@slide.Sqm m2</li>
                                        <li class="heading-6 project-modern-info-item" data-caption-animate="fadeInDown" data-caption-delay="0">$ @slide.PriceInfo</li>
                                    </ul>
                                    <div class="project-modern-decor" data-caption-animate="fadeInRight" data-caption-delay="0"></div>
                                </div>
                            </div>
                        }
                    </div>
                    <div class="project-modern-counter">@Model.Sliders.Count() + " works"</div>
                </div>
            }
        </section>
    </div>
}