@using Karsha_Site.Application.Services.Products.Queries.GetProductDetailForSite;
@model ProductDetailForSiteDto
@{
    ViewData["Title"] = "Detail";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
@{
	var price = "-";
}
@if (@Model.Price.HasValue == true)
{
	price = @Model.Price.Value.ToString("n0") + "ریال";
}
<!--Page Title-->
<section class="page-title">
</section>
<!--End Page Title-->
<!--Shop Single Section-->
<section class="shop-single-section">
	<div class="auto-container">

		<!--Shop Single-->
		<div class="shop-page product-details">
			<!-- Sec Title -->
			<div class="sec-title">
				<div class="title-inner">
					<div class="title">@Model.Title</div>
					<span style="float: right; direction: rtl;">
						<strong style="float: right;margin-left:5px;">
							کد :
						</strong>
					
						@Model.Code
					</span>
				</div>
			</div>
			<!--Basic Details-->
			<div class="basic-details">
				<div class="row clearfix">
					<!--Info Column-->
					<div class="info-column col-lg-5 col-md-12 col-sm-12 wow slideInRight" data-wow-delay="300ms" data-wow-duration="1500ms">
						<div class="text">
							<strong>
								قیمت :
							</strong>

							<span>
								@price
							</span>

						</div>
						<div class="text">
							<strong>
								موجودی :
							</strong>
							<span>
								@Model.Inventory.ToString("n0")
							</span>

						</div>


						<ul class="shop-list">
							@foreach (var feature in Model.Features.Take(5).ToList())
							{
								<li><strong>@feature.DisplayName</strong><span class="theme_color">:</span>@feature.Value</li>

							}
						</ul>

					</div>

					<div class="image-column projects-single-section pt-0 ltr   col-lg-7 col-md-12 col-sm-12">
						<!-- Carousel Box -->
						<div class="carousel-box">
							<div class="project-single-carousel owl-carousel owl-theme">
								@foreach(var image in Model.Images)
								{
									<div class="slide inner-box">
										<div class="image">
												<img src="~/@image" alt="" />
										</div>
									</div>
								}
								
							</div>
						</div>
					</div>

				
				</div>
			</div>
			<!--Basic Details-->
			<!--Product Info Tabs-->
			<div class="product-info-tabs wow slideInRight" data-wow-delay="300ms" data-wow-duration="1500ms">
				<!--Product Tabs-->
				<div class="prod-tabs tabs-box">

					<!--Tab Btns-->
					<ul class="tab-btns tab-buttons clearfix">
						<li data-tab="#prod-info" class="tab-btn">نمایش کامل ویژگی ها</li>
						<li data-tab="#prod-details" class="tab-btn active-btn">توضیحات</li>


					</ul>

					<!--Tabs Container-->
					<div class="tabs-content">

						<!--Tab / Active Tab-->
						<div class="tab active-tab" id="prod-details">
							<div class="content">
								<p>
									@Model.Description
								</p>
							</div>
						</div>

						<!--Tab / Active Tab-->
						<div class="tab" id="prod-info">
							<div class="content">
								<ul class="shop-list">
									@foreach (var feature in Model.Features.ToList())
									{
										<li><strong>@feature.DisplayName</strong><span class="theme_color">:</span>@feature.Value</li>

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



					</div>
				</div>

			</div>
			<!--End Product Info Tabs-->

		</div>

	</div>
</section>
<!--End Shop Single Section-->