<%
	import org.exoplatform.services.document.diff.Delta ;
	
	def rcontext = _ctx.getRequestContext() ;
	def jm = rcontext.getJavascriptManager();
    jm.importJavascript('eXo.ecm.ECMUtils','/ecm-wcm-extension/javascript/') ;
%>
<div class="UIDiff">
	<div class="FileContent">
		<div class="NavigationContainer">  			
			<div class="TopTitle"><%=_ctx.appRes("UIDiff.label.diffTitle")%></div>
			<div class="Content">
				<%
					def arr = uicomponent.getDeltas() ;					
					if(!uicomponent.isCompareable()) {											
				%>
				<div class="ContentDetail">						
					<label><%=_ctx.appRes("UIDiff.label.can-not-compare")%></label>						
				</div>	
				<%
					} else {										
					if(arr.isEmpty()) {
				%>
					<div class="ContentDetail">	
						<div  class="ContentEmpty">					
							<label> <%=_ctx.appRes("UIDiff.label.noChange")%> </label>	
						</div>					
					</div>	
					<%
						} else {
					%>
						<table class="UIGrid">
							<thead>
						    <tr>
						      <th>
						      	<%=_ctx.appRes("UIDiff.label.compareVerion")%>:
						      	<%=uicomponent.getCurrentVersionNum()%>,
						      	<%=uicomponent.getCurrentVersionDate()%>
						      </th>
						      <th>
						      	<%=_ctx.appRes("UIDiff.label.baseVerion")%>:
						      	<%=uicomponent.getBaseVersionNum()%>,
						      	<%=uicomponent.getBaseVersionDate()%>
						      </th>
						    </tr>
						  </thead>
						  <%  
						    def i=1;
						  	for(Delta delta in uicomponent.getDeltas()){		    		
						  	  jm.addJavascript("eXo.ecm.ECMUtils.insertContentToIframe('$i') ;") ;
			    		%>		    		
		    			<tr onload="eXo.ecm.ECMUtils.insertContentToIframe('$i') ;"> 
		    				<% 
		    					if (uicomponent.isDeleteDelta(delta)) {
		    				%>	   
		    				<td class ="DiffDelete" style="background:#fce8d4; width: 50%">
		    				  <iframe id="original${i}" scrolling = "auto" style="border: 0px; height: 60px; width: 100%;overflow :auto; " content="<%=delta.getOriginal().toString()%>">
		    				    <div class="WorkContainerDiff"><span></span></div>
		    				  </iframe>
		    				</td>	 				
		    				<td class = "DiffEmpty" style="background:#f1f1f1; width: 50%">
		    				  <iframe id="revised${i}" scrolling = "auto" style="border: 0px; height: 60px; width: 100%;overflow :auto;" content="<%=delta.getRevised().toString()%>">
		    				    <div class="WorkContainerDiffEmpty"><span></span></div>
		    				  </iframe>
		    				</td>	
		    				<% 
		    					} else if(uicomponent.isAddDelta(delta)) { 
		    				%>
		    				<td class = "DiffEmpty" style="background:#f1f1f1; width: 50%">
		    				  <iframe id="original${i}" scrolling = "auto" style="border: 0px; height: 60px; width: 100%;overflow :auto;" content="<%=delta.getOriginal().toString()%>">
		    				    <div class="WorkContainerDiffEmpty"><span></span></div>
		    				  </iframe>
		    				</td>
		    				<td class = "DiffAdd" style="background:#e7f9c8; width: 50%">
		    				  <iframe id="revised${i}" scrolling = "auto" style="border: 0px; height: 60px; width: 100%;overflow :auto;" content="<%=delta.getRevised().toString()%>">
		    				    <div class="WorkContainerDiff"></div>
		    				  </iframe>
		    				</td>	
		    				<% 
		    					} else {	    		
		    				%>
		    				<td class = "DiffModify" style="background:#fffdd3; width: 50%">
		    				  <iframe id="original${i}" scrolling = "auto" style="border: 0px; height: 60px; width: 100%;overflow :auto;" content="<%=delta.getOriginal().toString()%>">
		    				    <div class="WorkContainerDiff"><span></span></div>
		    				  </iframe>
		    			  </td>	
		    				<td class = "DiffModify" style="background:#fffdd3; width: 50%">
		    				  <iframe id="revised${i}" scrolling = "auto" style="border: 0px; height: 60px; width: 100%;overflow :auto;" content="<%=delta.getRevised().toString()%>">
		    				    <div class="WorkContainerDiff"><span></span></div>
		    				  </iframe>
		    				</td>
		    				<% } %>	    				
		    			</tr>
		    			<% 
                  i++;		    			
		    			  } 
		    			%>					  					  
						</table>
					<% } } %>			    	
			</div>
		</div>
	</div>
</div>