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



#if($hits)
	<div id="__carousel" class="splide" role="group">
		<div class="splide__arrows">
			<button class="splide__arrow splide__arrow--prev">
				<div class="__arrow-btn">
					<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" fill="currentColor" viewBox="0 0 16 16">
						<path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708" />
					</svg>
				</div>
			</button>
			<button class="splide__arrow splide__arrow--next">
				<div class="__arrow-btn">
					<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" fill="currentColor" viewBox="0 0 16 16">
						<path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708"/>
					</svg>
				</div>
			</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}" >
								<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
									<path d="M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5"/>
									<path d="M7.646 11.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V1.5a.5.5 0 0 0-1 0v8.793L5.354 8.146a.5.5 0 1 0-.708.708z"/>
								</svg>
							</a>
						#end
						<div style="position: relative;height: 100%;width: 100%;" class="__image">
							#if ($type=="video")
								#set( $imagelink = "/${mediadbappid}/services/module/asset/players/html5/index.html")
								$pages.include($imagelink, $context)
							#else
								#set($imagelink = $mediaarchive.asLinkToPreview($hit, null, $imagesize, true))
								<img src="$imagelink" alt="$!{hittitle}">
							#end

							#set($hitcaptions = $hit.getValue("headline")) 
							#ifnull($hitcaptions)
								#set($hitcaptions = $hit.getValue("longcaption"))
							#end

							<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>
								#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

								#ifnotnull($hit.creator)
									<p class="__img_creator" title="[[Photo by $!{hit.creator}]]">
										&copy; $!{hit.creator}
									</p>
								#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