{{:media}}
	{{~exec(function() {
		helpers.var.media = [];
		data.media.forEach(function(val) {
			if (val.mediatype === "YouTube" && val.mediaurl !== undefined) {
				var videoInfo = helpers.plugins.videoLib.parseVideoUrl(val.mediaurl);
				if (videoInfo.success === false) { return; }
				
				var resource = helpers.plugins.cloudinary.createResource({ imageUrl : "https://img.youtube.com/vi/" + videoInfo.id + "/hqdefault.jpg" });
				helpers.var.media.push({ type : "video", resource : resource, medianame : val.medianame, videoid : videoInfo.id });
			} else if (val.mediatype === "Image" && val.mediaurl !== undefined) {
				var resource = helpers.plugins.cloudinary.createResource({ imageUrl : val.mediaurl });
				helpers.var.media.push({ type : "image", resource : resource, medianame : val.medianame });
			}
		});
	})}}
{{/media}}

{{:~var.media}}
	<div class="detail-gallery">
		{{#~var.media.slice(0,1)}}
			{{:~equal(data.type, "video")}}
				<a class="mfp-iframe" href="https://www.youtube.com/watch?v={{videoid}}" data-sv-play>
					<picture>
						<source media="screen and (min-width: 640px)" srcset = "{{resource.getThumbnailUrl({ width : 876, height: 600, crop : 'fill', quality: 80, sv : { gravity : "focalPoint" } })}}"/>
						<img src="{{resource.getThumbnailUrl({ width : 640, height : 400, crop : 'fill' })}}" alt="{{medianame}}" />
					</picture>
					<button class="shared-play-button" aria-label="play video"><i class="fa fa-play" aria-hidden="true"></i></button>
				</a>
			{{?}}
				<a href="{{resource.getThumbnailUrl({ crop : 'limit', width : 1200 })}}" data-sv-play>
					<picture>
						<source media="screen and (min-width: 640px)" srcset = "{{resource.getThumbnailUrl({ width : 876, height: 600, crop : 'fill', quality: 80, sv : { gravity : "focalPoint" } })}}"/>
						<img src="{{resource.getThumbnailUrl({ width : 640, height : 400, crop : 'fill', fetch_format: 'jpg', crop : 'fill'  })}}" alt="{{medianame}}" />
					</picture>
					<div class="gallery-count">
						<i class="fas fa-expand-arrows-alt" aria-hidden="true"></i>{{@row}}/{{~var.media.length}}
					</div>
				</a>
			{{/}}
		{{/}}
		<div class="gallery-expand" style="display:none;">
			{{#~var.media.slice(1)}}
				{{:~equal(data.type, "video")}}
					<a class="mfp-iframe" href="https://www.youtube.com/watch?v={{videoid}}" data-sv-play></a>
				{{?}}
					<a href="{{resource.getThumbnailUrl({ crop : 'limit', width : 1200 })}}" data-sv-play>{{medianame}}</a>
				{{/}}
			{{/}}
		</div>
		<p class="media-policy">
			<span class="sm-line">Images provided by partners.</span>
			<span class="sm-line">See our media policy <a href="/media-policy">here</a>.</span>
		</p>
	</div>
	
	<script>
		require(["jquery", "plugins_common_custom_magnific"], function($, magnific) {
			var root = $(".detail-gallery");

			root.find("[data-sv-play]").magnificPopup({
				type: "image",
				mainClass: "mfp-fade",
				removalDelay: 160,
				preloader: false,
				fixedContentPos: false,
				gallery: {
					enabled:true
				}
			});
		});
	</script>
{{?}}
	<div class="detail-gallery">
		{{~setVar("placeholder", helpers.plugins.cloudinary.createResource({ imageUrl : helpers.plugins.sv_site.siteConfig.custom.primary.placeholderImageUrl }) )}}
		<picture>
			<source media="screen and (min-width: 640px)" srcset = "{{~var.placeholder.getThumbnailUrl({ width : 876, height: 600, crop : 'fill', quality: 80, sv : { gravity : "focalPoint" } })}}"/>
			<img src="{{~var.placeholder.getThumbnailUrl({ width : 640, height : 400, crop : 'fill', quality: 80, fetch_format: 'jpg' })}}" alt="{{medianame}}" />
		</picture>
	</div>
{{/}}