#set($timeline = $context.getPageValue("timeline"))
<div id="timeline" class="timelinecontainer">
	
	<div class="time-slider" >
	
		##<a id="addnewcopy" href="#" class="btn btn-sm btn-dark" style="position:absolute; top:20px; z-index: 6"><i class="fas fa-plus"></i></a>
		<div id="timelinecursor" class="timelinecursor"></div>
		<div class="ruler" style="height: 66px;">
		#set( $added = 0)		
		#set( $space = 15)
		#set( $firstloop = true)
		
		#foreach($block in $timeline.getTicks())

			<div id="title_${added}"	class="graduation-title"   style="left: ${added}px">$block.getLabel()</div>
			#set( $added = $added + $space)

##if( $firstloop  == true)
			<div id="tick_${added}" 	class="graduation" style="left: ${added}px"></div>
			#set( $added = $added + $space)

			<div id="tick_${added}" 	class="graduation" style="left: ${added}px"></div>
			#set( $added = $added + $space)

			<div id="tick_${added}" 	class="graduation" style="left: ${added}px"></div>
			#set( $added = $added + $space)

##	#set( $firstloop = false)
###end

			<div id="tick_${added}" 	class="graduation" style="left: ${added}px"></div>
			
			<div id="middle_${added}" 	class="graduation middle" style="left: ${added}px"></div>


		#end
		<div class="bg" id="timelinebg" style="width:${added}px"></div>
		</div>
		
	</div>
	
</div>