#set($hits = $publishingentityassethits)
#set($imagesize = "image3000x3000")

#if($hits)
	<div id="__carousel" class="splide" role="group" data-autoplay="$publishing.autoplay_enabled">
		<div class="splide__arrows">
			<button class="splide__arrow splide__arrow--prev">‹</button>
			<button class="splide__arrow splide__arrow--next">›</button>
		</div>
		<div class="splide__track">
			<ul class="splide__list">
				#set( $convertpreset = $mediaarchive.getCachedData("convertpreset","largeimage"))
				#foreach($hit in $hits)
					$context.putPageValue("hit", $hit)
					#set ($sourcepath = $hit.sourcepath)    		
					#set( $type = $mediaarchive.getMediaRenderType($hit.fileformat))
					$context.putPageValue("type", $type)

					#if ($type=="audio")
						#set( $alwaysmime = true)
						$context.putPageValue("alwaysmime", $alwaysmime)
					#end
					
					#set($hittitle = "")
					#if ($hit.name)
							#set($hittitle = $context.getText($hit.name))
					#elseif($hit.assettitle)
							#set($hittitle = $context.getText($hit.assettitle))
					#end
					
					<li class="splide__slide" title="$!{hittitle}">
						#if ($type=="image")
							#set($downloadlink = $mediaarchive.asLinkToShare($siteroot, $hit, $convertpreset))
							#set($downloadlink = "${downloadlink}?download=true&ondemand=true")
							<a class="__download-img" title="[[Download]]" href="$!{downloadlink}"></a>
						#end
						<div style="position: relative;height: 100%;width: 100%;" class="__image">
							#if ($type=="video")
								#set( $imagelink = "$!{siteroot}/${mediadbappid}/services/module/asset/players/play/${hit.id}.html")
							#else
								#set($imagelink = $mediaarchive.asLinkToPreview($hit, "image3000x3000", true)) 
							#end
							
							<img src="$imagelink" alt="$!{hittitle}">

							<div class="__img_overlay">
								<button class="__overlay_minimizer" title="[[Minimize Caption/Credits]]">
									<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="#fff" viewBox="0 0 16 16">
										<path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708"/>
									</svg>
								</button>
								#set($hitcaptions = $hit.getValue("headline")) 
								#ifnull($hitcaptions)
									#set($hitcaptions = $hit.getValue("longcaption"))
								#end
								#if($publishing.image_caption_enabled == "true")
									#ifnotnull($hitcaptions)
										#set( $caption = $!{hitcaptions.get($context.language)} )
										#ifnull($caption)
											#set( $caption = $!{hitcaptions} )
										#end
										<p class="__img_caption" data-locales="#esc($hitcaptions)">$caption</p>
									#end
								#end

								#if($publishing.image_copyright_enabled == "true")
									#ifnotnull($hit.creator)
										<p class="__img_creator" title="[[Photo by $!{hit.creator}]]">
											&copy; $!{hit.creator}
										</p>
									#end
								#end
							</div>
						</div>
					</li>
				#end
			</ul>
		</div> 
	</div>

	<div id="__carousel-thumbnails" class="splide" role="group">
		<div class="splide__track">
			<ul class="splide__list">

				#foreach($hit in $hits.getPageOfHits())
					#set ($sourcepath = $hit.sourcepath)    		
					#set( $type = $mediaarchive.getMediaRenderType($hit.fileformat))
					$context.putPageValue("type", $type)

					#if ($type=="audio")
						#set( $alwaysmime = true)
						$context.putPageValue("alwaysmime", $alwaysmime)
					#end
					#if ($type=="video")
						#set( $imagesize = "image550x350")
					#end					
					#set($hittitle = "")
					#if ($hit.name)
							#set($hittitle = $context.getText($hit.name))
					#elseif($hit.assettitle)
							#set($hittitle = $context.getText($hit.assettitle))
					#end

					#set($imagelink = $mediaarchive.asLinkToPreview($hit, "", $imagesize, true))
					<li class="splide__slide" title="$!{hittitle}">
						<img src="$imagelink" alt="$!{hittitle}">
					</li>
				#end

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

#end