@page "/"

@inherits HomeComponent

<PageTitle>Home</PageTitle>

<TelerikMediaQuery Media="(max-width: 576px)" OnChange="@OnExtraSmallChange"></TelerikMediaQuery>
<TelerikMediaQuery Media="(min-width: 577px) and (max-width: 768px)" OnChange="@OnSmallChange"></TelerikMediaQuery>
<TelerikMediaQuery Media="(min-width: 769px) and (max-width: 992px)" OnChange="@OnMediumChange"></TelerikMediaQuery>
<TelerikMediaQuery Media="(min-width: 993px) and (max-width: 1200px)" OnChange="@OnLargeChange"></TelerikMediaQuery>
<TelerikMediaQuery Media="(min-width: 1201px)" OnChange="@OnExtraLargeChange"></TelerikMediaQuery>

<!-- block-hero-slider -->
<div class="block block-slider block-slider--featured">
	<div class="container container--max--xl">
		<div class="slider slider--with-dots">
			<TelerikCarousel Width="100%"
						 Height="500px"
						 Arrows="true"
						 Pageable="true"
						 LoopPages="true"
						 AutomaticPageChange="true"
						 AutomaticPageChangeInterval="3000"
						 Data="@Slides">
				<Template>
					<div class="slide">
						@if (!string.IsNullOrWhiteSpace(context.GoToUrl))
						{
							<a href="@context.GoToUrl" class="slide-link">
								<picture>
									<source media="(min-width: 768px)"
										srcset='@($"images/slides/slide{context.Number}.jpg 1x, images/slides/slide{context.Number}@2x.jpg 2x")'>
									<source media="(max-width: 767px)"
										srcset="images/slides/slide@(context.Number)-portrait.jpg 1x,
				                                        images/slides/slide@(context.Number)-portrait@2x.jpg 2x">
									<img src="images/slides/slide@(context.Number).jpg"
									     alt="@(!string.IsNullOrWhiteSpace(context.AltText) ? context.AltText : $"Slide {context.Number}")"
									     style="width: 100%; height: 100%; object-fit: cover;" />
								</picture>
							</a>
						}
						else
						{
							<picture>
								<source media="(min-width: 768px)"
									srcset='@($"images/slides/slide{context.Number}.jpg 1x, images/slides/slide{context.Number}@2x.jpg 2x")'>
								<source media="(max-width: 767px)"
									srcset="images/slides/slide@(context.Number)-portrait.jpg 1x,
				                                    images/slides/slide@(context.Number)-portrait@2x.jpg 2x">
								<img src="images/slides/slide@(context.Number).jpg"
								     alt="@(!string.IsNullOrWhiteSpace(context.AltText) ? context.AltText : $"Slide {context.Number}")"
								     style="width: 100%; height: 100%; object-fit: cover;" />
							</picture>
						}

						@if (!string.IsNullOrWhiteSpace(context.Text))
						{
							<div class=@($"slide-text {context.TextPosition} {context.TextWidth}")>
								@if (!string.IsNullOrWhiteSpace(context.Text))
								{
									<h2>@context.Text</h2>
								}
							</div>
						}
					</div>
				</Template>
			</TelerikCarousel>
		</div>
	</div>
</div>
<!-- block-hero-slider / end -->

<!-- block-featured-products -->
@if (IsFeaturedProductsLoading)
{
	<div class="block block-products-carousel featured-products-block featured-products-block--loading">
		<div class="container container--max--xl">
			<div class="block__title">
				<h2 class="decor-header decor-header--align--center">Featured Products</h2>
			</div>
			<div class="block-products-carousel__slider slider slider--with-arrows">
				<div class="product-group" style="display: flex; flex-wrap: wrap; width: 100%;">
					@for (var i = 0; i < NumberOfFeaturedProductCardsPerGroup; i++)
					{
						<div class="product-wrapper" style="@CalculateWidthOfFeaturedProductCard()">
							<TelerikSkeleton Width="100%" Height="260px" ShapeType="@Telerik.Blazor.SkeletonShapeType.Rectangle" />
						</div>
					}
				</div>
			</div>
		</div>
	</div>
}
else if (FeaturedProductsHaveItemsToShow)
{
	<div class="block block-products-carousel featured-products-block">
		<div class="container container--max--xl">
			<div class="block__title">
				<h2 class="decor-header decor-header--align--center">Featured Products</h2>
			</div>
			<div class="block-products-carousel__slider slider slider--with-arrows">
				<TelerikCarousel Width="100%"
							 Height="350px"
							 Arrows="true"
							 Pageable="false"
							 LoopPages="true"
							 AutomaticPageChange="false"
							 Data="@GetProductCardGroups()"
							 Class="owl-carousel product-carousel-custom">
					<Template>
						<div class="product-group" style="display: flex; flex-wrap: wrap; width: 100%;">
							@foreach (var product in context)
							{
								<div class="product-wrapper" style="@CalculateWidthOfFeaturedProductCard()">
									<ProductCard Product="product"
									             CssClass="catalog-card catalog-card--layout--grid" />
								</div>
							}
						</div>
					</Template>
				</TelerikCarousel>
			</div>
		</div>
	</div>
}
else
{
	<div class="block block-products-carousel featured-products-block featured-products-block--empty">
		<div class="container container--max--xl">
			<div class="block__title">
				<h2 class="decor-header decor-header--align--center">Featured Products</h2>
			</div>
			<div class="alert alert-info mb-0">
				Featured products will appear here once items are available.
			</div>
		</div>
	</div>
}
<!-- block-featured-products / end -->

<!-- block-collections -->
<div class="block block-collections">
    <div class="container container--max--xl">
	    <div class="block__title">
		    <h2 class="decor-header decor-header--align--center">Latest Collections</h2>
	    </div>
        <div class="row g-custom-30">
            <div class="col-12 col-md-6 col-lg-5">
                <div class="block-collections__item block-collections__item--start">
                    <div class="block-collections__info block-collections__info--top-start">
                        <div class="block-collections__name">Smart Building Solutions</div>
                        <div class="block-collections__description">
                            Complete intelligent building automation systems featuring advanced lighting controls,
                            occupancy sensors, and energy management solutions for modern commercial spaces.
                        </div>
                        <div class="block-collections__button">
                            <a href="/catalog/smart-building" class="btn btn-primary">Explore Collection</a>
                        </div>
                    </div>
                    <div class="block-collections__image">
                        <a href="/catalog/smart-building">
                            <picture>
                                <source media="(min-width: 992px)" srcset="images/collections/collection1-lg.jpg 1x,
                                                images/collections/collection1-lg@2x.jpg 2x">
                                <source media="(max-width: 991px)" srcset="images/collections/collection1.jpg 1x,
                                                images/collections/collection1@2x.jpg 2x">
                                <img src="images/collections/collection1-lg.jpg" alt="Smart Building Solutions Collection">
                            </picture>
                        </a>
                    </div>
                </div>
            </div>
            <div class="col-12 col-md-6 col-lg-7 pt-5 pt-md-0">
                <div class="block-collections__item block-collections__item--end">
                    <div class="block-collections__image">
                        <a href="/catalog/prefabricated-electrical-assemblies/pre-assembled-panels">
                            <picture>
                                <source media="(min-width: 992px)" srcset="images/collections/collection2-lg.jpg 1x,
                                                images/collections/collection2-lg@2x.jpg 2x">
                                <source media="(max-width: 991px)" srcset="images/collections/collection2.jpg 1x,
                                                images/collections/collection2@2x.jpg 2x">
                                <img src="images/collections/collection2-lg.jpg" alt="Pre-Assembled Panel Collection">
                            </picture>
                        </a>
                    </div>
                    <div class="block-collections__info block-collections__info--bottom-end">
                        <div class="block-collections__name">Pre-Assembled Panel Systems</div>
                        <div class="block-collections__description">
                            Ready-to-install electrical panels and distribution assemblies, factory-tested and certified.
                            Reduce installation time by up to 70% with our professionally pre-wired solutions designed
                            for commercial and industrial applications.
                        </div>
                        <div class="block-collections__button">
                            <a href="/catalog/prefabricated-electrical-assemblies/pre-assembled-panels" class="btn btn-primary">View Panels</a>
                        </div>
                    </div>
                </div>
			</div>
		</div>
	</div>
</div>
<!-- block-collections / end -->

<!-- block-shop-categories -->
@if (AreCategoriesLoading)
{
	<div class="block block-shop-categories home-categories-block home-categories-block--loading">
		<div class="container container--max--xl">
			<div class="block__title">
				<h2 class="decor-header decor-header--align--center">Latest Categories</h2>
			</div>
			<div class="categories-list">
				@for (var i = 0; i < NumberOfCategorySkeletons; i++)
				{
					<div class="card category-card">
						<div class="category-card__image">
							<TelerikSkeleton Width="100%" Height="180px" ShapeType="@Telerik.Blazor.SkeletonShapeType.Rectangle" />
						</div>
						<div class="category-card__name">
							<TelerikSkeleton Width="70%" Height="20px" ShapeType="@Telerik.Blazor.SkeletonShapeType.Text" />
						</div>
						<div class="category-card__products">
							<TelerikSkeleton Width="50%" Height="16px" ShapeType="@Telerik.Blazor.SkeletonShapeType.Text" />
						</div>
					</div>
				}
			</div>
		</div>
	</div>
}
else if (CategoriesHaveItemsToShow)
{
	<div class="block block-shop-categories home-categories-block">
		<div class="container container--max--xl">
			<div class="block__title">
				<h2 class="decor-header decor-header--align--center">Latest Categories</h2>
			</div>
			<div class="categories-list">
				@foreach (var category in LatestCategories)
				{
					<CategoryCard Category="category" />
				}
			</div>
		</div>
	</div>
}
else
{
	<div class="block block-shop-categories home-categories-block home-categories-block--empty">
		<div class="container container--max--xl">
			<div class="block__title">
				<h2 class="decor-header decor-header--align--center">Latest Categories</h2>
			</div>
			<div class="alert alert-info mb-0">
				Categories will appear here once items are available.
			</div>
		</div>
	</div>
}
<!-- block-shop-categories / end -->