#set( $clientroot = $page.get("clientroot") )

<div id="timelinemetadata" 
	data-ratio="$timeline.getPxToTimeRatio()" 
	data-savelink="$home$clientroot/saveclips.json" 
	data-assetid="$asset.id" style="margin:0 10px;">
	#set( $clips = $timeline.loadClips($asset,"clips") )
	#foreach($clip in $clips)
		#set( $index = ${foreach.count} - 1)
		<div id="slider123" class="data-selection"  
			data-cliplabel="#esc($clip.getLabel())"
			data-timecodestart="$clip.getStart()"
			data-timecodelength="$clip.getLength()">
			<div class="ruler" >
				<div class="timecell" style="left: ${timeline.getPxStart($clip)}px; width: ${timeline.getPxLength($clip)}px; cursor: move;position:relative;">
					<div class="grabresize"></div>
					<span class="cliptext">  #esc($!clip.getValue("cliplabel"))</span>
				</div>
			</div>
		</div>
	#end
</div>

<div id="templateclip" 
	class="data-selection" style="height: 45px;display:none;"
	data-cliplabel='[[New Clip]]' 
	data-timecodestart="0"
	data-timecodelength="5">
	<div class="ruler" >
		<div class="timecell" style="cursor: move;position:relative;">
			<div class="grabresize"></div>
			<span class="cliptext">[[New Clip]]</span>
		</div>
	</div>
</div>