@using Karsha_Site.Application.Services.Products.Queries.GetProductForSite;
@model ResultProductForSiteDto;
@{
    ViewData["Title"] = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<!--Page Title-->
<section class="page-title">
	<div class="auto-container">
		<!-- <h2>محصولات ما</h2>
		<ul class="page-breadcrumb">
			<li><a href="index-2.html">خانه</a></li>
			<li>محصولات</li>
		</ul> -->
	</div>
</section>
<!--End Page Title-->
<!-- Projects Page Section -->
<section class="projects-page-section">
	<div class="auto-container">
		<div class="sec-title">
			<div class="title-inner">
				<div class="title">محصولات ما</div>
				<h2>گروه کارخانجات دنیای فلز </h2>
			</div>
		</div>
		<!--MixitUp Galery-->
		<div class="mixitup-gallery">

			<!--Filter-->
			<div class="filters text-center clearfix">
				<ul class="filter-tabs filter-btns clearfix">
					@{
						string activeClass = ""; 
						string activeClass2 = "";
					}
					@if (Model.CatId.HasValue && Model.CatId!= null)
					{
						      
					}
					else
					{
						activeClass = "active";
					}

					<li class="@activeClass filter" data-role="button"><a href="~/product/index"> همه محصولات</a></li>
					@foreach(var cat in Model.Categories)
					{
						if (Model.CatId.HasValue && Model.CatId.Value == cat.ID)
						{
							activeClass2 = "active";
						}
						else
						{
							activeClass2 = "";
						}

						<li class="@activeClass2 filter" data-role="button">
								<a href="~/product/index?CatId=@cat.ID"> @cat.Title</a>
							</li>
						

					}
				</ul>
			</div>

			<div class="filter-list row clearfix">
				@foreach(var item in Model.Products)
				{		
				<!-- Project Block -->
				<div class="project-block mix col-lg-3 col-md-6 col-sm-12">
					<div class="inner-box">
						<div class="image">
								<img src="~/@item.ImageSrc" alt="@item.Title" />
							<!-- Overlay Box -->
							<div class="overlay-box">
								<div class="icons">
										<a class="plus" href="~/@item.ImageSrc" data-fancybox="gallery-1" data-caption=""><span class="flaticon-plus-symbol"></span></a>
									<a class="link" href="~/Product/Detail/@item.ID"><span class="icon flaticon-link"></span></a>
								</div>
								<div class="overlay-inner">
									<div class="overlay-content">
											<h3><a href="~/Product/Detail/@item.ID">@item.Title</a></h3>
										<div class="category">@item.Price</div>
									</div>
								</div>
							</div>

						</div>
					</div>
				</div>
                }

			</div>

		</div>

		<div class="btn-box text-center">
			<a href="#" class="theme-btn btn-style-two">محصولات بیشتر</a>
		</div>

	</div>

</section>
<!-- End Projects Page Section -->