<html>
<head>
<style type="text/css">
body {
	font:12px/1.231 arial,helvetica,clean,sans-serif;
	background-color:#F8FBFC;
	color:#333333;
}
table.dataTable {
	font-family:verdana,arial,helvetica,sans-serif;
	font-size:12px;
	border-collapse: collapse;
	background-color: white;
}
table.dataTable, table.dataTable th, table.dataTable td {
	border: 1px #CDCED0 solid;
	padding: 1px;
}
table.dataTable td {
	line-height:15px;
}
p.heading {
	margin-top:5px;
	margin-bottom:0px;
	border-top:1px #9A9FA2 solid;
	border-bottom:1px #9A9FA2 solid;
	background-color:#E7E8E9;
	line-height:22px;
	text-align:left;
	font-size:14px;
	font-weight:bold;
	padding-left:5px;
}
a.anchor-gray-button,a.anchor-gray-button:link,a.anchor-gray-button:visited, a.anchor-gray-disabled-button {
	font-family:verdana,helvetica,arial,sans-serif;
	display:inline-block;
	color:#FFFFFF;
	background-color:#939694;
	font-size:11px;
	width:80px;
	text-align:center;
	padding:0;
	padding-top:2px;
	padding-bottom:2px;
	border:1px solid #ffffff;
	outline:1px solid #939694;
	text-decoration:none;
	margin-left:1px;
}

a.anchor-gray-button:hover,a.anchor-gray-button:active {
	background-color:#6B6B6B;
}
a.anchor-gray-disabled-button {
	color:#696E72;
	background-color:#E7E8E9;
	outline:1px solid #DADDDD;
	cursor:text;
}
div>table.dataTable {
	margin:1px;
}
</style>
<script type="text/javascript" src="/common/scripts/jquery.js"></script>
<script>
	function getCount(filterName,filterValue)
	{
		jQuery.ajax({
		   type: "GET",
		   url: "${ baseUrl }?count=0&filterName="+filterName+"&filterValue="+filterValue,
		   success: function(data){
		     	alert("Total Count = "+data)
		   }
		 });
	}

	function communicate(methodType,url,isDeleteAll)
	{
		jQuery.ajax({
		   type: methodType,
		   url: url,
		   success: function(data){
		   },
		   error: function(XMLHttpRequest, textStatus, errorThrown){
				alert("Failed to complete the request. Reason: "+textStatus+"/"+errorThrown)
		   },
		   complete:function(XMLHttpRequest,textStatus){
		   		if(isDeleteAll == null)
		   			document.location.reload()
		   }
		 });
	}

	function deleteAll()
	{
		objList = document.getElementsByName("chk_box")
		chkboxCount = objList.length
		for (i=0;i<chkboxCount;i++){
			if(objList[i].checked){
				communicate('DELETE',objList[i].id,true)
			}
		}
	}
	function seleteAll()
	{
		chk_status = document.getElementById("selectAllChkBox").checked
		objList = document.getElementsByName("chk_box")
		chkboxCount = objList.length
		for (i=0;i<chkboxCount;i++){
				objList[i].checked=chk_status;
			}
	}

</script>
</head>
<body>
<p class="heading">Data Viewer</p>
<div style="border:2px #DADDDD solid; margin-bottom:2px;">
	<div style="background-color:#F4F5F5;padding:4px;">
	<b>Limit:</b>
	<select id="limit" name="limit" style="border:1px solid #B3B4B7;" onchange = 'document.location.href="${ baseUrl }?isSystemParam=${ isSystemParam }&filterName=${filterName}&filterValue=${filterValue}&limit="+this.options[this.selectedIndex].value'>
		#for index,value in $enumerate([100,200,300,400,500]):
			<option value="${value}" name="${index}" ${['','selected'][$limit==$value]}>${value}</option>
		#end for
	</select>
	&nbsp;&nbsp;
	#if $prevAction=="prev":
		#if $isValidLength:
			<a class="anchor-gray-button" href = "${ baseUrl }?limit=${ limit }&prevValue=${ prevValue  }&isSystemParam=${ isSystemParam }&filterName=${filterName}&filterValue=${filterValue}">Prev</a>
		#else:
			<a class="anchor-gray-disabled-button" href = "javascript:void(0);">Prev</a>
		#end if
	#else:
		<a class="anchor-gray-button" href = "${ baseUrl }?limit=${ limit }&prevValue=${ prevValue  }&isSystemParam=${ isSystemParam }&filterName=${filterName}&filterValue=${filterValue}">Prev</a>
	#end if

	&nbsp;&nbsp;&nbsp;

	#if $prevAction=="next":
		#if $isValidLength:
			<a class="anchor-gray-button" href = "${ baseUrl }?limit=${ limit }&nextValue=${ nextValue }&isSystemParam=${ isSystemParam }&filterName=${filterName}&filterValue=${filterValue}">Next</a>
		#else:
			<a class="anchor-gray-disabled-button" href = "javascript:void(0);">Next</a>
		#end if
	#else:
		<a class="anchor-gray-button" href = "${ baseUrl }?limit=${ limit }&nextValue=${ nextValue }&isSystemParam=${ isSystemParam }&filterName=${filterName}&filterValue=${filterValue}">Next</a>
	#end if
	&nbsp;&nbsp;
	<input type="button" name="TotalCount" value="TotalCount" onclick="getCount('${filterName}','${filterValue}')"/>
	&nbsp;&nbsp;&nbsp;<label for="system-params" style="cursor:pointer">System Params</label><input id="system-params" type="checkbox" ${['','checked'][$isSystemParam=="true"]} onchange = 'document.location.href="${ baseUrl }?limit=${limit}&filterName=${filterName}&filterValue=${filterValue}&isSystemParam="+this.checked'/>
	<select name="filterName" style="width:200px; border:1px solid #B3B4B7;" onchange='document.location.href="${ baseUrl }?isSystemParam=${ isSystemParam }&limit=${limit}&filterName="+this.value'>
	<option value="" ${['','selected'][$filterName==""]}>None</option>
	#for cellName in $cellNameList:
		<option value="${cellName}" ${['','selected'][$cellName==$filterName]}>${cellName}</option>
	#end for
	</select>
	&nbsp;=&nbsp;<input type="textbox" id="filterValue" style="width:250px; border:1px solid #B3B4B7;" value="${filterValue}" onchange='document.location.href="${ baseUrl }?isSystemParam=${ isSystemParam }&limit=${limit}&filterName=${filterName}&filterValue="+this.value'/>
	<br/>
</div>

<div>
	<table class="dataTable" id="datatable">
	<tr style="background-color:#E7E8E9">
		<th>Select</th>
		<th>Sno</th>
		#for cellName in $cellNameList:
			<th>&nbsp;${cellName}&nbsp;</th>
		#end for
		<th>Del</th>
	</tr>

	#for count,sheet in $enumerate($sheetList):
		<tr style="background-color:${['#F4F5F5','#FFFFFF'][(count+1)%2]}">
			<td><input type="checkbox" id="${sheet}" name="chk_box"> </input></td>
			<td><a href = "${sheet}" target="_blank">${count+1}</a></td>
			#for value in $sheetList[sheet]:
				<td style="padding-left:2px;font-family:calibri;font-size:12px">${value}</td>
			#end for
			<td align="center">
				<img src="/runtime/images/delete.png" onClick = "confirm('Are you sure you want to Delete?')?communicate('DELETE','${sheet}'):''" style="cursor:pointer">
			</td>
		</tr>
	#end for
	<table>
</div>
<input type="button" value="Delete" onClick="deleteAll()">
&nbsp; <b>Select All</b> <input type="checkbox"  id="selectAllChkBox" onClick="seleteAll()">
</body>
</html>