{{: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) {
				if (!val.isGoogleImage) {
					var resource = helpers.plugins.cloudinary.createResource({ imageUrl : val.mediaurl });

					helpers.var.media.push({ type : "image", resource : resource, medianame : val.medianame });
				}
				else {
					helpers.var.media.push({
						type: "image",
						resource: val.mediaurl,
						isGoogleImage: true,
						medianame: val.medianame
					});
				}

			}
		});
	})}}
{{/media}}

{{~setVar('detailType', data.type)}}
{{~setVar('isSpeakersBureau', data.isSpeakersBureau)}}

{{:~var.media}}
	<div class="detail-gallery" data-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 data-type="video">
					<picture>
						{{:~equal(helpers.var.isSpeakersBureau, false)}}
							{{:~equal(helpers.var.detailType, 'Events')}}
								<source media="screen and (min-width: 1440px)" srcset = "{{resource.getThumbnailUrl({ width : 960, height: 777, crop : 'fill', quality: 80, sv : { gravity : "focalPoint" } })}}"/>
								<source media="screen and (min-width: 640px)" srcset = "{{resource.getThumbnailUrl({ width : 720, height: 583, crop : 'fill', quality: 80, sv : { gravity : "focalPoint" } })}}"/>
								<img src="{{resource.getThumbnailUrl({ width : 640, height : 518, crop : 'fill' })}}" width="640" height="518" alt="{{medianame}}" />
							{{?}}
								<source media="screen and (min-width: 1440px)" srcset = "{{resource.getThumbnailUrl({ width : 1920, height: 804, crop : 'fill', quality: 80, sv : { gravity : "focalPoint" } })}}"/>
								<source media="screen and (min-width: 640px)" srcset = "{{resource.getThumbnailUrl({ width : 1380, height: 575, crop : 'fill', quality: 80, sv : { gravity : "focalPoint" } })}}"/>
								<img src="{{resource.getThumbnailUrl({ width : 640, height : 518, crop : 'fill' })}}" width="640" height="518" alt="{{medianame}}" />
							{{/}}
						{{?}}
							<source media="screen and (min-width: 1440px)" srcset = "{{resource.getThumbnailUrl({ width : 960, height: 804, crop : 'fill', quality: 80, sv : { gravity : "focalPoint" } })}}"/>
							<source media="screen and (min-width: 640px)" srcset = "{{resource.getThumbnailUrl({ width : 690, height: 575, crop : 'fill', quality: 80, sv : { gravity : "focalPoint" } })}}"/>
							<img src="{{resource.getThumbnailUrl({ width : 640, height : 518, crop : 'fill' })}}" width="640" height="518" alt="{{medianame}}" />
						{{/}}
					</picture>
					<button class="shared-play-button" aria-label="play video"><i class="fa fa-play" aria-hidden="true"></i></button>
				</a>
			{{?:isGoogleImage}}
				<a href="{{resource}}" data-sv-play data-type="image">
					{{:~equal(helpers.var.detailType, 'Events')}}
						<img src="{{resource}}" width="640" height="518" alt="{{medianame}}" />
					{{?}}
						<img src="{{resource}}" alt="{{medianame}}" />
					{{/}}
					<div class="gallery-count">
						<i class="fas fa-expand" aria-hidden="true"></i>{{@row}} of {{~var.media.length}}
					</div>
				</a>
			{{?}}
				{{:~equal(helpers.var.isSpeakersBureau, false)}}
					<a href="{{resource.getThumbnailUrl({ crop : 'limit', width : 1200 })}}" data-sv-play data-type="image">
						<picture>
							{{:~equal(helpers.var.detailType, 'Events')}}
								<source media="screen and (min-width: 1440px)" srcset = "{{resource.getThumbnailUrl({ width : 960, height: 777, crop : 'fill', quality: 80, sv : { gravity : 'focalPoint' } })}}"/>
								<source media="screen and (min-width: 640px)" srcset = "{{resource.getThumbnailUrl({ width : 690, height: 558, crop : 'fill', quality: 80, sv : { gravity : 'focalPoint' } })}}"/>
								<img src="{{resource.getThumbnailUrl({ width : 640, height : 518, crop : 'fill', fetch_format: 'jpg', quality: 80, sv : { gravity : 'focalPoint' }  })}}" width="640" height="518" alt="{{medianame}}" />
							{{?}}
								<source media="screen and (min-width: 1440px)" srcset = "{{resource.getThumbnailUrl({ width : 1920, height: 804, crop : 'fill', fetch_format: 'webp', quality: 80, sv : { gravity : 'focalPoint' } })}}"/>
								<source media="screen and (min-width: 640px)" srcset = "{{resource.getThumbnailUrl({ width : 1380, height: 575, crop : 'fill', fetch_format: 'jpg', quality: 80, sv : { gravity : 'focalPoint' } })}}"/>
								<img src="{{resource.getThumbnailUrl({ width : 640, height : 518, crop : 'fill', fetch_format: 'jpg', quality: 80, sv : { gravity : 'focalPoint' }  })}}" width="640" height="518" alt="{{medianame}}" />
							{{/}}
						</picture>
						<div class="gallery-count">
							<i class="fas fa-expand" aria-hidden="true"></i>{{@row}} of {{~var.media.length}}
						</div>
					</a>
				{{?}}
					<a href="{{resource.getThumbnailUrl({ crop : 'limit', width : 1200 })}}" data-sv-play data-type="image">
						<picture>
							<source media="screen and (min-width: 1440px)" srcset = "{{resource.getThumbnailUrl({ width : 960, height: 804, crop : 'fill', fetch_format: 'webp', quality: 80, sv : { gravity : 'focalPoint' } })}}"/>
							<source media="screen and (min-width: 640px)" srcset = "{{resource.getThumbnailUrl({ width : 690, height: 575, crop : 'fill', fetch_format: 'jpg', quality: 80, sv : { gravity : 'focalPoint' } })}}"/>
							<img src="{{resource.getThumbnailUrl({ width : 640, height : 518, crop : 'fill', fetch_format: 'jpg', quality: 80, sv : { gravity : 'focalPoint' }  })}}" width="640" height="518" alt="{{medianame}}" />
						</picture>
						<div class="gallery-count">
							<i class="fas fa-expand" aria-hidden="true"></i>{{@row}} of {{~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 data-type="video"></a>
				{{?:isGoogleImage}}
					<a href="{{resource}}" data-sv-play data-type="image">{{medianame}}</a>
				{{?}}
					<a href="{{resource.getThumbnailUrl({ crop : 'limit', width : 1200 })}}" data-sv-play data-type="image">{{medianame}}</a>
				{{/}}
			{{/}}
		</div>
	</div>
		
	<script>
		require(["plugins_common_custom_glightbox", "domReady!"], function(glightbox) {
			const root = document.querySelector("[data-detail-gallery]");
			const lightboxToggles = Array.from(root.querySelectorAll('[data-sv-play]'));
			const sources = lightboxToggles.map(el => {
				const type = el.getAttribute('data-type');
				let source = {
					href: el.href,
					type,
					width: 900
				};

				if (type === 'video') {
					source.source = 'youtube';
				}
				
				return source;
			});
			const lightbox = glightbox({
				elements: sources,
				skin: 'media',
				openEffect: 'fade',
				closeEffect: 'fade'
			});

			lightboxToggles.forEach(el => el.addEventListener('click', event => {
				event.preventDefault();

				lightbox.open();
			}));
		});
	</script>
{{?}}
	{{!~equal(helpers.var.detailType, 'Events')}}
	<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: 1440px)" srcset = "{{~var.placeholder.getThumbnailUrl({ width : 1920, height: 804, crop : 'fill', quality: 80, sv : { gravity : "focalPoint" } })}}"/>
			<source media="screen and (min-width: 640px)" srcset = "{{~var.placeholder.getThumbnailUrl({ width : 1380, height: 575, crop : 'fill', quality: 80, sv : { gravity : "focalPoint" } })}}"/>
			<img src="{{~var.placeholder.getThumbnailUrl({ width : 640, height : 518, crop : 'fill', quality: 80, fetch_format: 'jpg' })}}" alt="{{medianame}}" />
		</picture>
	</div>
	{{/}}
{{/}}