#set( $clientroot = "$siteroot/${applicationid}/components/closedcaptions" )
<div id="captionview"	
	#if( $track.transcribestatus == "needstranscribe" || $track.transcribestatus == "inprogress")  
	 class="ajaxstatus" data-ajaxpath="$clientroot/viewcaptions.html?oemaxlevel=1&assetid=$asset.id" 
	#end
> 
#if( $track.transcribestatus == "needstranscribe") 
	<div class="alert alert-primary" role="alert">	[[transcoder uploading audio]] </div>
#elseif( $track.transcribestatus == "inprogress") 
	#set($porcentajecomplete = $track.percentcomplete)
	#if (!$porcentajecomplete)
	#set($porcentajecomplete = "0")
	#end
	<div class="alert alert-primary" role="alert">	 [[in progress]] $porcentajecomplete%  </div>
#elseif( $track.transcribestatus == "error") 
	<div class="alert alert-danger" role="alert">	<i class="fas fa-exclamation-triangle"></i> [[Error auto transcribing]]  </div>
#end

#set( $clips = $timeline.getClips() )
#set( $padded = $timeline.getPxWidth()+60)


<div id="timelinemetadata" 
	class="cctimelinedata"
	 data-ratio="$timeline.getPxToTimeRatio()"
	 data-savelink="$clientroot/saveclips.json" 
	 data-assetid="$asset.id" 
	 style="width:${padded}px; height:100%;">
	 
	#foreach($clip in $clips)
		#set( $index = ${foreach.count} - 1)
		<div id="slider$index" 
			class="cc-data-selection float-left"
			style="left: ${timeline.getPxStart($clip)}px;"  
			data-cliplabel="#esc($clip.getLabel())" 
			data-timecodestart="$clip.getStart()"
			data-timecodelength="$clip.getLength()">
			<div class="ruler">
				<div class="timecellcaption" 
					style=" 
					width: ${timeline.getPxLength($clip)}px;
					max-width: 300px; 
					cursor: move;position:relative;">
					##<div class="grabresize"></div>
					<div class="cliptime">
						<i class="fas fa-clock"></i> $clip.getStartSecondsAndHours()
					</div>
					<div class="cliptext">#esc($!clip.getLabel())</div>
				</div>
			</div>
		</div>
	#end
</div>


</div>