<%
def dateSvc = SERVICE.lookup('DateService', 'main');
def serverDate = dateSvc.format('MMMMM dd, yyyy', dateSvc.getServerDate());

def gSvc = SERVICE.lookup('QueueGroupService', 'main'); 
def groupinfo = gSvc.open( PARAMS.group );  
def sections = gSvc.getSections( PARAMS.group ); 
if ( PARAMS.section ) {
	def o = sections.find{ it.objid.toString().equalsIgnoreCase( PARAMS.section ) } 
	if ( o ) {
		sections.clear(); 
		sections << o; 
	}
}

sections.each{ o-> 
	def prefix = (o.prefix? o.prefix : ''); 
	o.counters = gSvc.getSectionCounters( o.objid ); 
	o.countersize = o.counters.size();
	o.counters.each{ b-> 
		b.uuid = ''+ o.objid +'_'+ b.objid; 
		b.formattedseriesno = '---';
		if ( b.seriesno ) {
			def snum = b.seriesno.toString();
			if ( snum.length() < 4 ) { 
				snum = snum.padLeft(4,'0'); 
			} 
			b.formattedseriesno = ''+prefix+snum; 		
		} 
	} 
}
%>

<div class="wrapper"> <!-- open wrapper -->	
	<div class="header">	
		<div class="container-fluid">
			<div class="row">	 
				<ul class="headertv">
				    <li><img src="/res/queue/images/lgu-logo.png" alt="lgu logo" class='lgu-logo'></li>
				    <li><img src="/res/queue/images/etracs.png" alt="etracs logo" class='queue-logo'></li>
				    <li class="lead"> ${groupinfo?.title} </li>
				    <li class="date">
				      <img src="/res/queue/images/rameses.png" alt="rameses logo" class='rameses-logo'>
				      <p id="clockbox" class="deskclock"></p>
				      <p class="resdate">Today is ${serverDate}</p>
				    </li>
				 </ul>
			 </div>
		</div>
	</div>
	<div class="content"> <!-- open content -->	
		<div class="wrap"> <!-- open wrap --> 
		  	<div class="video-panel video">
			    <video id="video" muted>
			      <source src="http://169.254.223.2:9999/videos/icpropose.mp4" type="video/mp4">
			      <source src="http://169.254.223.2:9999/videos/iriga_teaser.mp4" type="video/mp4">
			      <!--<source src="http://169.254.223.2:9999/videos/icv.mp4" type="video/mp4">-->
			    </video>
			</div>
			<div class="servedQueue"> <!-- open servedQueue -->
			<% sections.each{ a-> %> 
				<div class="serving" id="${a.objid.toLowerCase()}-section-panel"> <!-- open serving-->
				<h1 class="dep-name">${a.title}</h1> 
				<% 
					for (int i=0; i<a.countersize; i++){ 
						def sc_uuid = '';
						def sc_code = '&nbsp;';
						def sc_seriesno = '&nbsp;';
						try { 
							def c = a.counters[i]; 
							sc_code = c.code; 
							sc_uuid = c.uuid.toLowerCase(); 
							sc_seriesno = c.formattedseriesno; 
						} catch( Throwable t ) {;} 
						%>
						<div class="counter-container" id="${sc_uuid}-counter-panel">
				            <h2>${sc_code} - <span id="${sc_uuid}">${sc_seriesno}</span></h2>
				       	</div>
				<%}%> 
				</div> <!-- close serving -->
			<%}%>
			</div> <!-- close servedQueue -->
		</div> <!-- close wrap -->	

	</div><!-- close content -->	

	${_footer}

</div> <!-- close wrapper -->

${_script}
${_style}
