@inherits Dynamicweb.Rendering.ViewModelTemplate<Dynamicweb.Frontend.ParagraphViewModel>
@using Dynamicweb.Ecommerce.ProductCatalog
@using Dynamicweb.Frontend
@using System.IO
@using System.Text.RegularExpressions;

@functions {
	public ProductViewModel product { get; set; }
	public string galleryLayout { get; set; }
	public string[] supportedImageFormats { get; set; }
	public string[] supportedVideoFormats { get; set; }
	public string[] supportedDocumentFormats { get; set; }
	public string[] allSupportedFormats { get; set; }

	public class RatioSettings {
		public string Ratio { get; set; }
		public string CssClass { get; set; }
		public string CssVariable { get; set; }
		public string Fill { get; set; }
	}

	public RatioSettings GetRatioSettings(string size = "desktop") {
		var ratioSettings = new RatioSettings();

		string ratio = Model.Item.GetRawValueString("ImageAspectRatio", "");
		ratio = ratio != "0" ? ratio : "";
		string cssClass = ratio != "" && ratio != "fill" ? " ratio" : "";
		string cssVariable = ratio != "" && ratio != "fill" ? "--bs-aspect-ratio: " + ratio : "";
		cssClass = ratio != "" && ratio == "fill" && size == "mobile" ? " ratio" : cssClass;
		cssVariable = ratio != "" && ratio == "fill" && size == "mobile" ? "--bs-aspect-ratio: 66%" : cssVariable;
		cssVariable = ratio == "1-1" ? "--bs-aspect-ratio: 100%" : cssVariable;

		ratioSettings.Ratio = ratio;
		ratioSettings.CssClass = cssClass;
		ratioSettings.CssVariable = cssVariable;
		ratioSettings.Fill = ratio == "fill" ? " h-100" : "";

		return ratioSettings;
	}

	public string GetColumnClass(int total, int assetNumber) {
		string colClass = total > 1 ? "g-col-lg-6" : "g-col-12";
		colClass = galleryLayout == "full-first" && assetNumber == 0 ? "g-col-12" : colClass;
		colClass = galleryLayout == "full-last" && assetNumber == (total - 1) ? "g-col-12" : colClass;
		colClass = galleryLayout == "advanced-grid" && assetNumber > 1 ? "g-col-4" : colClass;

		colClass = galleryLayout == "advanced-grid" && total == 1 ? "g-col-12" : colClass;
		colClass = galleryLayout == "advanced-grid" && total == 3 && assetNumber == 2 ? "g-col-12" : colClass;
		colClass = galleryLayout == "advanced-grid" && total == 4 && assetNumber == 2 ? "g-col-6" : colClass;
		colClass = galleryLayout == "advanced-grid" && total == 4 && assetNumber == 3 ? "g-col-6" : colClass;
		colClass = galleryLayout == "advanced-grid" && total == 6 && assetNumber == 5 ? "g-col-12" : colClass;
		colClass = galleryLayout == "advanced-grid" && total == 7 && assetNumber == 5 ? "g-col-6" : colClass;
		colClass = galleryLayout == "advanced-grid" && total == 7 && assetNumber == 6 ? "g-col-6" : colClass;
		colClass = galleryLayout == "advanced-grid" && total == 9 && assetNumber == 8 ? "g-col-12" : colClass;

		return colClass;
	}

	public string GetArrowsColor()
	{
		var invertColor = Model.Item.GetBoolean("InvertModalArrowsColor");
		var arrowsColor = invertColor ? " carousel-dark" : string.Empty;
		return arrowsColor;
	}

	public string GetExternalLinkProvider(string assetValue)
	{
		string type = assetValue.IndexOf("youtu.be", StringComparison.OrdinalIgnoreCase) >= 0 || assetValue.IndexOf("youtube", StringComparison.OrdinalIgnoreCase) >= 0 ? "youtube" : string.Empty;
		type = assetValue.IndexOf("vimeo", StringComparison.OrdinalIgnoreCase) >= 0 ? "vimeo" : type;
		return type;
	}

	public string GetYoutubeScreenDump(string assetValue, string quality)
	{
		var regex = new Regex(@"(?:youtube\.com\/.*[\?&]v=|youtu\.be\/|youtube\.com\/embed\/)([\w-]+)(?:\?.*)?");
		Match match = regex.Match(assetValue);
		string videoId = match.Success ? match.Groups[1].Value : string.Empty;
		string youtubeThumbnail = $"https://img.youtube.com/vi/{videoId}/{quality}.jpg";
		return youtubeThumbnail;
	}

	public string GetFileTypeIcon(string filePath)
	{
		string fileType = Path.GetExtension(filePath).ToLower();
		string fileTypeIconPath = "/Files/Templates/Designs/Swift-v2/Assets/images/FileTypes/";
		var iconMap = new Dictionary<string, string>
		{
			{ ".pdf", $"{fileTypeIconPath}pdf.svg" },
			{ ".docx", $"{fileTypeIconPath}docx.svg" },
			{ ".xlsx", $"{fileTypeIconPath}xlsx.svg" },
			{ ".ppt", $"{fileTypeIconPath}ppt.svg" }
		};
		return iconMap.ContainsKey(fileType) ? iconMap[fileType] : $"/Files/Images/Icons/download.svg";
	}

	public bool MatchesFormat(string assetValue, string[] formats)
	{
		return formats.Any(format => assetValue.IndexOf(format, StringComparison.OrdinalIgnoreCase) >= 0);
	}
}

@{
	@* Get the product data *@
	if (Dynamicweb.Context.Current.Items.Contains("ProductDetails"))
	{
		product = (ProductViewModel)Dynamicweb.Context.Current.Items["ProductDetails"];
	}
}

@if (product is object)
{
	@* Supported formats *@
	supportedImageFormats = new string[] { ".jpg", ".jpeg", ".webp", ".png", ".gif", ".bmp", ".tiff" };
	supportedVideoFormats = new string[] { "youtu.be", "youtube", "vimeo", ".mp4", ".webm" };
	supportedDocumentFormats = new string[] { ".pdf", ".docx", ".xlsx", ".ppt", "pptx" };
	allSupportedFormats = supportedImageFormats.Concat(supportedVideoFormats).Concat(supportedDocumentFormats).ToArray();

	@* Collect the assets *@
	var selectedAssetCategories = Model.Item.GetList("ImageAssets")?.GetRawValue().OfType<string>();
	bool includeImagePatternImages = Model.Item.GetBoolean("ImagePatternImages");

	@* Needed image data collection to support both DefaultImage, ImagePatterns and Image Assets *@
	string defaultImage = product.DefaultImage != null ? product.DefaultImage.Value : "";
	IEnumerable<MediaViewModel> assetsImages = product.AssetCategories.Where(x => selectedAssetCategories.Contains(x.SystemName)).SelectMany(x => x.Assets);
	assetsImages = assetsImages.OrderByDescending(x => x.Value.Equals(defaultImage));
	IEnumerable<MediaViewModel> assetsList = new MediaViewModel[] { };
	assetsList = assetsList.Union(assetsImages);
	assetsList = includeImagePatternImages ? assetsList.Union(product.ImagePatternImages) : assetsList;
	assetsList = includeImagePatternImages && assetsList.Count() == 0 ? assetsList.Append(product.DefaultImage) : assetsList;

	bool defaultImageFallback = Model.Item.GetBoolean("DefaultImageFallback");

	int totalAssets = assetsList.Count(asset => MatchesFormat(asset.Value, allSupportedFormats));

	if ((totalAssets == 0 && product.DefaultImage != null && selectedAssetCategories.Count() == 0) || totalAssets == 0 && defaultImageFallback)
	{
		assetsList = new List<MediaViewModel>() { product.DefaultImage };
		totalAssets = 1;
	}

	galleryLayout = Model.Item.GetRawValueString("Layout", "grid");

	@* Get assets from selected categories or get all assets *@
	if (totalAssets != 0) {
		int desktopAssetNumber = 0;
		int mobileAssetNumber = 0;
		int mobileAssetThumbnailNumber = 0;
		int modalAssetNumber = 0;

		@* Desktop: Show the gallery on large screens *@
		<div class="d-none d-lg-block h-100 position-relative item_@Model.Item.SystemName.ToLower() desktop" data-dw-colorscheme="@Model.ColorScheme?.Id">
			<div class="grid">
				@foreach (MediaViewModel asset in assetsList) {
					var assetName = asset.Value;
					foreach (string format in allSupportedFormats) {
						if (assetName.IndexOf(format, StringComparison.OrdinalIgnoreCase) >= 0) {
							string size = "desktop";
							string assetValue = asset.Value;

							<div class="@GetColumnClass(totalAssets, desktopAssetNumber)">
								<div class="h-100">
									@foreach (string imageFormat in supportedImageFormats)
									{ //Images
										if (assetValue.IndexOf(imageFormat, StringComparison.OrdinalIgnoreCase) >= 0)
										{
											string productName = product.Name;
											string? imagePath = !string.IsNullOrEmpty(asset.Value) ? asset.Value : product?.DefaultImage?.Value;

											RatioSettings ratioSettings = GetRatioSettings(size);

											var parms = new Dictionary<string, object>();
											parms.Add("alt", productName);
											parms.Add("itemprop", "image");
											if (totalAssets > 1)
											{
												parms.Add("columns", 2);
											}
											else
											{
												parms.Add("columns", 1);
											}
											parms.Add("eagerLoadNewImages", Model.Item.GetBoolean("DisableLazyLoading"));
											parms.Add("doNotUseGetimage", Model.Item.GetBoolean("DisableGetImage"));

											if (!string.IsNullOrEmpty(asset.DisplayName))
											{
												parms.Add("title", asset.DisplayName);
											}

											if (ratioSettings.Ratio == "fill" && galleryLayout != "grid")
											{
												parms.Add("cssClass", "w-100 h-100 image-zoom-lg-l-hover");
											}
											else
											{
												parms.Add("cssClass", "mw-100 mh-100");
											}

											@if (!string.IsNullOrEmpty(imagePath)) {
												<a href="@imagePath" class="d-block @(ratioSettings.CssClass)@(ratioSettings.Fill)" style="@(ratioSettings.CssVariable)" data-bs-toggle="modal" data-bs-target="#modal_@Model.ID">
													<div class="d-flex align-items-center justify-content-center overflow-hidden h-100" data-bs-target="#ModalCarousel_@Model.ID" data-bs-slide-to="@desktopAssetNumber">
														@RenderPartial("Components/Image.cshtml", new FileViewModel { Path = imagePath }, parms)
													</div>
												</a>
											}
										}
									}
									@foreach (string videoFormat in supportedVideoFormats)
									{ //Videos
										if (assetValue.IndexOf(videoFormat, StringComparison.OrdinalIgnoreCase) >= 0)
										{
											var video = asset.GetVideoViewModel();

											if (Model.Item.GetString("OpenVideoInModal") == "true")
											{
												string iconPath = "/Files/Images/Icons/";

												string type = GetExternalLinkProvider(asset.Value);
												string videoScreendumpPath = type == "youtube" ? GetYoutubeScreenDump(asset.Value, "maxresdefault") : string.Empty;
												string videoJsClass = type == "vimeo" ? "js-vimeo-video-thumbnail" : string.Empty;

												string productName = product.Name;
												productName += !string.IsNullOrEmpty(asset.Keywords) ? " " + asset.Keywords : "";
												string assetTitle = !string.IsNullOrEmpty(asset.DisplayName) ? "title=\"" + asset.DisplayName + "\"" : "";

												RatioSettings ratioSettings = GetRatioSettings(size);
												<div class="d-block @(ratioSettings.CssClass)@(ratioSettings.Fill)" style="@(ratioSettings.CssVariable); cursor: pointer" data-bs-toggle="modal" data-bs-target="#modal_@Model.ID">
													<div class="d-flex align-items-center justify-content-center overflow-hidden h-100" data-bs-target="#ModalCarousel_@Model.ID" data-bs-slide-to="@desktopAssetNumber">
														<div class="icon-5 position-absolute" style="z-index: 1">@ReadFile(iconPath + "play-circle.svg")</div>
														@if (video.IsExternalLink())
														{		
															<img src="@videoScreendumpPath" loading="lazy" decoding="async" alt="@productName" @assetTitle class="@videoJsClass mw-100 mh-100" data-asset-value="@asset.Value" style="object-fit: cover;" />	
														}
														else
														{
															<video preload="auto" class="h-100 w-100" style="object-fit: contain;">
																<source src="@(asset.Value)#t=0.001" type="@video.GetVideoType()">
															</video>
														}
													</div>
												</div>

											}
											else
											{
												@RenderPartial("Components/VideoPlayer.cshtml", video)
											}
										}
									}
									@foreach (string documentFormat in supportedDocumentFormats)
									{ //Documents
										if (assetValue.IndexOf(documentFormat, StringComparison.OrdinalIgnoreCase) >= 0)
										{
											string productName = product.Name;
											string? imagePath = !string.IsNullOrEmpty(asset.Value) ? asset.Value : product.DefaultImage?.Value;
											string fileTypeIcon = GetFileTypeIcon(asset.Value);

											RatioSettings ratioSettings = GetRatioSettings(size);

											var parms = new Dictionary<string, object>();
											parms.Add("alt", productName);
											parms.Add("itemprop", "image");
											parms.Add("fullwidth", true);
											parms.Add("columns", Model.GridRowColumnCount);

											if (!string.IsNullOrEmpty(asset.DisplayName))
											{
												parms.Add("title", asset.DisplayName);
											}

											if (ratioSettings.Ratio == "fill" && galleryLayout != "grid")
											{
												parms.Add("cssClass", "w-100 h-100 image-zoom-lg-l-hover");
											}
											else
											{
												parms.Add("cssClass", "mw-100 mh-100");
											}

											<a href="@imagePath" class="d-block @(ratioSettings.CssClass)@(ratioSettings.Fill)" style="@(ratioSettings.CssVariable)" download title="@Translate("Download"): @(asset.Name)@Path.GetExtension(asset.Value).ToLower()">
												<div class="d-flex align-items-center justify-content-center text-center overflow-hidden h-100 border">
													<div class="icon-7 position-absolute" style="z-index: 1">@ReadFile(fileTypeIcon)</div>
												</div>
											</a>
										}
									}
								</div>
							</div>
							desktopAssetNumber++;
						}
					}
				}
			</div>
			
		</div>

		@* Mobile: Show the thumbs on small screens *@
		<div class="d-block d-lg-none mx-lg-0 position-relative item_@Model.Item.SystemName.ToLower() mobile" data-dw-colorscheme="@Model.ColorScheme?.Id">
			<div id="SmallScreenImages_@Model.ID" class="carousel@(GetArrowsColor())" data-bs-ride="carousel">
				<div class="carousel-inner h-100">
					@foreach (MediaViewModel asset in assetsList) {
						var assetValue = asset.Value;
						foreach (string format in allSupportedFormats) {
							if (assetValue.IndexOf(format, StringComparison.OrdinalIgnoreCase) >= 0) {
								string activeSlide = mobileAssetNumber == 0 ? "active" : "";
								string size = "mobile";

								<div class="carousel-item @activeSlide" data-bs-interval="99999">
									<div class="h-100">
										@foreach (string imageFormat in supportedImageFormats)
										{ //Images
											if (assetValue.IndexOf(imageFormat, StringComparison.OrdinalIgnoreCase) >= 0)
											{
												string productName = product.Name;
												string? imagePath = !string.IsNullOrEmpty(asset.Value) ? asset.Value : product.DefaultImage?.Value;

												RatioSettings ratioSettings = GetRatioSettings(size);

												var parms = new Dictionary<string, object>();
												parms.Add("alt", productName);
												parms.Add("itemprop", "image");
												if (totalAssets > 1)
												{
													parms.Add("columns", 2);
												}
												else
												{
													parms.Add("columns", 1);
												}
												parms.Add("eagerLoadNewImages", Model.Item.GetBoolean("DisableLazyLoading"));
												parms.Add("doNotUseGetimage", Model.Item.GetBoolean("DisableGetImage"));

												if (!string.IsNullOrEmpty(asset.DisplayName))
												{
													parms.Add("title", asset.DisplayName);
												}

												if (ratioSettings.Ratio == "fill" && galleryLayout != "grid")
												{
													parms.Add("cssClass", "w-100 h-100 image-zoom-lg-l-hover");
												}
												else
												{
													parms.Add("cssClass", "mw-100 mh-100");
												}

												<a href="@imagePath" class="d-block @(ratioSettings.CssClass)@(ratioSettings.Fill)" style="@(ratioSettings.CssVariable)" data-bs-toggle="modal" data-bs-target="#modal_@Model.ID">
													<div class="d-flex align-items-center justify-content-center overflow-hidden h-100" data-bs-target="#ModalCarousel_@Model.ID" data-bs-slide-to="@desktopAssetNumber">
														@RenderPartial("Components/Image.cshtml", new FileViewModel { Path = imagePath }, parms)
													</div>
												</a>
											}
										}
										@foreach (string videoFormat in supportedVideoFormats)
										{ //Videos
											if (assetValue.IndexOf(videoFormat, StringComparison.OrdinalIgnoreCase) >= 0)
											{
												var video = asset.GetVideoViewModel();

												if (Model.Item.GetString("OpenVideoInModal") == "true")
												{
													string iconPath = "/Files/Images/Icons/";

													string type = GetExternalLinkProvider(asset.Value);

													string videoScreendumpPath = type == "youtube" ? GetYoutubeScreenDump(asset.Value, "maxresdefault") : string.Empty;
													string videoJsClass = type == "vimeo" ? "js-vimeo-video-thumbnail" : "";
													
													string productName = product.Name;
													productName += !string.IsNullOrEmpty(asset.Keywords) ? " " + asset.Keywords : "";
													string assetTitle = !string.IsNullOrEmpty(asset.DisplayName) ? "title=\"" + asset.DisplayName + "\"" : "";
													RatioSettings ratioSettings = GetRatioSettings(size);

													<div class="d-block @(ratioSettings.CssClass)@(ratioSettings.Fill)" style="@(ratioSettings.CssVariable); cursor: pointer" data-bs-toggle="modal" data-bs-target="#modal_@Model.ID">
														<div class="d-flex align-items-center justify-content-center overflow-hidden h-100" data-bs-target="#ModalCarousel_@Model.ID" data-bs-slide-to="@desktopAssetNumber">
															<div class="icon-5 position-absolute" style="z-index: 1">@ReadFile(iconPath + "play-circle.svg")</div>
															@if (video.IsExternalLink())
															{
																<img src="@videoScreendumpPath" loading="lazy" decoding="async" alt="@productName" @assetTitle class="@videoJsClass mw-100 mh-100" data-asset-value="@asset.Value" style="object-fit: cover;" >
															}
															else
															{	
																<video preload="auto" class="h-100 w-100" style="object-fit: contain;">
																	<source src="@(asset.Value)#t=0.001" type="@video.GetVideoType()">
																</video>
															}
														</div>
													</div>
												}
												else
												{
													@RenderPartial("Components/VideoPlayer.cshtml", video)
												}
											}
										}
									</div>
								</div>
								mobileAssetNumber++;
							}
						}
					}
				</div>
			</div>

			@if (totalAssets > 1) {
				<div id="SmallScreenImagesThumbnails_@Model.ID" class="d-flex flex-nowrap gap-2 overflow-x-auto my-3">
					@foreach (MediaViewModel asset in assetsList) {
						var assetValue = asset.Value;
						foreach (string format in allSupportedFormats) {
							if (assetValue.IndexOf(format, StringComparison.OrdinalIgnoreCase) >= 0) {
								string iconPath = "/Files/Images/Icons/";
								string type = GetExternalLinkProvider(asset.Value);

								string videoScreendumpPath = type == "youtube" ? GetYoutubeScreenDump(asset.Value, "maxresdefault") : string.Empty;
								string videoJsClass = type == "vimeo" ? "js-vimeo-video-thumbnail" : string.Empty;

								string productName = product.Name;
								productName += !string.IsNullOrEmpty(asset.Keywords) ? " " + asset.Keywords : "";
								string assetTitle = !string.IsNullOrEmpty(asset.DisplayName) ? "title=\"" + asset.DisplayName + "\"" : "";

								<div class="ratio ratio-4x3 border outline-none" style="flex:0 0 80px" data-bs-target="#SmallScreenImages_@Model.ID" data-bs-slide-to="@mobileAssetThumbnailNumber">
									@foreach (string imageFormat in supportedImageFormats)
									{ //Images
										if (assetValue.IndexOf(imageFormat, StringComparison.OrdinalIgnoreCase) >= 0)
										{
											string imagePath = !string.IsNullOrEmpty(asset.Value) ? $"/Admin/Public/GetImage.ashx?image={asset.Value}&width=180&format=webp" : string.Empty;
											<img src="@imagePath" class="p-1 mw-100 mh-100" style="object-fit: cover;" alt="@productName" @assetTitle >
										}
									}
									@foreach (string videoFormat in supportedVideoFormats)
									{ //Videos
										if (assetValue.IndexOf(videoFormat, StringComparison.OrdinalIgnoreCase) >= 0)
										{
											var video = asset.GetVideoViewModel();

											<div class="d-flex align-items-center justify-content-center overflow-hidden h-100">
												<div class="icon-3 position-absolute text-light" style="z-index: 1">@ReadFile(iconPath+"play-circle.svg")</div>
											</div>
											if (video.IsExternalLink())
											{

												<img src="@(videoScreendumpPath)" class="p-1 @videoJsClass mw-100 mh-100" data-asset-value="@asset.Value" style="object-fit: cover;" alt="@productName" @assetTitle>

											}
											else
											{
												<video preload="auto" class="h-100 w-100" style="object-fit: contain;">
													<source src="@(asset.Value)#t=0.001" type="@video.GetVideoType()">
												</video>
											}
										}
									}
									@foreach (string documentFormat in supportedDocumentFormats)
									{ //Documents
										if (assetValue.IndexOf(documentFormat, StringComparison.OrdinalIgnoreCase) >= 0)
										{
											string imagePath = !string.IsNullOrEmpty(asset.Value) ? $"/Admin/Public/GetImage.ashx?image={asset.Value}&width=180&format=webp" : string.Empty;
											string fileTypeIcon = GetFileTypeIcon(asset.Value);

											<a href="@(assetValue)" class="flex-grow-0 flex-shrink-0" style="cursor: pointer" download title="@Translate("Download"): @(asset.Name)@Path.GetExtension(asset.Value).ToLower()">
												<div class="d-flex align-items-center justify-content-center text-center overflow-hidden h-100 border">
													<div class="icon-7 position-absolute" style="z-index: 1">@ReadFile(fileTypeIcon)</div>
												</div>
											</a>
										}
									}				
								</div>

								mobileAssetThumbnailNumber++;
							}
						}
					}
				</div>
			}

		</div>

		@* Modal with slides *@
		<div class="modal fade" id="modal_@Model.ID" tabindex="-1" aria-labelledby="mediaModalTitle_@Model.ID" aria-hidden="true">
			<div class="modal-dialog modal-dialog-centered modal-xl">
				<div class="modal-content">
					<div class="modal-header visually-hidden">
						<h5 class="modal-title" id="mediaModalTitle_@Model.ID">@product.Title</h5>
						<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
					</div>
					<div class="modal-body p-2 p-lg-3 h-100">
						<div id="ModalCarousel_@Model.ID" class="carousel@(GetArrowsColor()) h-100" data-bs-ride="carousel">
							<div class="carousel-inner h-100" data-dw-colorscheme="@Model.ColorScheme?.Id">
								@foreach (MediaViewModel asset in assetsList) {
									var assetValue = !string.IsNullOrEmpty(asset.Value) ? asset.Value : product.DefaultImage?.Value;
									foreach (string format in allSupportedFormats) {
										if (assetValue.IndexOf(format, StringComparison.OrdinalIgnoreCase) >= 0) {
											string imagePath = assetValue;
											string activeSlide = modalAssetNumber == 0 ? "active" : "";

											var parms = new Dictionary<string, object>();
											parms.Add("cssClass", "d-block mw-100 mh-100 m-auto");
											parms.Add("columns", Model.GridRowColumnCount);
											parms.Add("eagerLoadNewImages", Model.Item.GetBoolean("DisableLazyLoading"));
											parms.Add("doNotUseGetimage", Model.Item.GetBoolean("DisableGetImage"));

											<div class="carousel-item @activeSlide h-100" data-bs-interval="99999">
												@foreach (string imageFormat in supportedImageFormats) {
													if (assetValue.IndexOf(imageFormat, StringComparison.OrdinalIgnoreCase) >= 0) {
														@RenderPartial("Components/Image.cshtml", new FileViewModel { Path = imagePath }, parms)
													}
												}

												@foreach (string videoFormat in supportedVideoFormats) {
													if (assetValue.IndexOf(videoFormat, StringComparison.OrdinalIgnoreCase) >= 0) {
														@RenderPartial("Components/VideoPlayer.cshtml", asset.GetVideoViewModel())
													}
												}
											</div>

											modalAssetNumber++;
										}
									}
								}
								<button class="carousel-control-prev carousel-control-area" type="button" data-bs-target="#ModalCarousel_@Model.ID" data-bs-slide="prev">
									<span class="carousel-control-prev-icon" aria-hidden="true"></span>
									<span class="visually-hidden">@Translate("Previous")</span>
								</button>
								<button class="carousel-control-next carousel-control-area" type="button" data-bs-target="#ModalCarousel_@Model.ID" data-bs-slide="next">
									<span class="carousel-control-next-icon" aria-hidden="true"></span>
									<span class="visually-hidden">@Translate("Next")</span>
								</button>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	} 
	else if (Pageview.IsVisualEditorMode)
	{
		RatioSettings ratioSettings = GetRatioSettings("desktop");

		<div class="h-100" data-dw-colorscheme="@Model.ColorScheme?.Id">
			<div class="d-block @(ratioSettings.CssClass)@(ratioSettings.Fill)" style="@(ratioSettings.CssVariable)">
				<img src="/Files/Images/nopic.png" loading="lazy" decoding="async" class="mh-100 mw-100" style="object-fit: cover;" alt="@Translate("Missing image")">
			</div>
		</div>
	}
}
else if (Pageview.IsVisualEditorMode)
{
	RatioSettings ratioSettings = GetRatioSettings("desktop");

	<div class="h-100" data-dw-colorscheme="@Model.ColorScheme?.Id">
		<div class="@(ratioSettings.CssClass)@(ratioSettings.Fill)" style="@(ratioSettings.CssVariable)">
			<img src="/Files/Images/nopic.png" loading="lazy" decoding="async" class="mh-100 mw-100" style="object-fit: cover;" alt="@Translate("Missing image")">
		</div>
	</div>
}