#set( $clientroot = $context.getContentProperty("clientroot") )


	


<div id="bottom-slider">


<div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel" data-bs-interval="false" data-bs-wrap="false">
	<div class="carousel-inner videolinks">





		#set($count = 0) #if(!$testplan) #set($testplan = $test.getTestPlan()) #end
		<div class="carousel-item active">
					<div class="row row-cols-1 row-cols-md-6 g-4 thumbnails videolinks">
		
				#foreach( $cue in $testplan.getTimedEntries() ) 
				#set($node = $test.getNodeForQuestion($cue.questionid)) 
				#if($node) 
				#set($question= $node.question)
				 #else 
				 #set($question= $testbench.getQuestion($cue.questionid)) #end #set($relatedasset = $mediaarchive.getAsset($testplan.presentation)) #set( $smallthumb =
				"$home${apphome}/views/modules/asset/downloads/preview/medium/${relatedasset.sourcepath}/thumb.jpg?timeoffset=$cue.timecode&assetid=$relatedasset.id" ) #set($target = $question.cuetarget) #if(!$target || $target == "") #set($target = "right-panel") #end
  <div class="col  ">

				<div class="card shadow " >
				<a class="cardloader thumbnail videolink" id="slide${cue.id}" data-assetid="$cue.id" data-target="$target" data-timecode="$cue.timecode" data-link="$home$clientroot/details/cuepointdetails.html?oemaxlevel=1&id=$cue.id&questionid=$!cue.questionid" data-cueid="$cue.id" data-questionid="$cue.questionid" id="aslide-${cue.id}" targetdivinner="$target"
							href="$home$clientroot/details/cuepointdetails.html?oemaxlevel=1&id=$cue.id&questionid=$!cue.questionid">	<img src="$smallthumb" class="card-img-top" alt="..."> </a>
					
					<div class="card-footer">
						<small class="text-muted">$foreach.count $!cue.name $cue.timecode seconds</small>
					</div>
				</div>


			</div>
			
			#if($foreach.count % 6 == 0)
						<!--  Could use pages instead. -->
						#set($count = $count + 1)
					
						</div> <!-- ends row -->
						
						</div> <!-- ends carousel -->
						<div class="carousel-item "> <!-- Starts next one -->
					<div class="row row-cols-1 row-cols-md-6 g-4"> <!-- starts next row -->
					
				#end
			
			
			#end
		

						
						
</div>  <!-- ends last row  -->
</div> <!--  ends last carousel -->




	</div>
	<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
		<span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="visually-hidden">Previous</span>
	</button>
	<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
		<span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="visually-hidden">Next</span>
	</button>
</div>





</div>






<script>

  var slides = {};
  cuepoint.init(slides);
  console.log("loaded");
  
  jQuery( ".videolink").each(
	 	function() {
	 		var li = $(this);
	 		var timecode = li.data("timecode");
	 		var assetid = li.data("assetid");
	 		var link = li.data("link");
	 		console.log("added");

			cuepoint.addSlide( assetid, timecode, link );
		}
	);
 
  //setup links to un/highlight when they are clicked
 	jQuery( ".videolink").click( function()
	{
 			jQuery( ".videolinks  a").removeClass("current");
 			var a = $(this);
 			a.addClass("current");
 			var timecode = a.data("timecode");
 			console.log("time " + timecode);
 			var paused = cuepoint.video.paused;
 			cuepoint.setTime(timecode);
 			if (paused) {
 				pause();
 			}
 			return false;

 	});
  
  
 
 	  cuepoint.play();





</script>