<%
	import java.text.SimpleDateFormat ;
	import org.exoplatform.web.application.Parameter ;
  import org.exoplatform.ecm.webui.utils.PermissionUtil;
  import org.exoplatform.ecm.webui.utils.Utils;
  import org.exoplatform.webui.core.UIPopupWindow;
  import org.exoplatform.ecm.webui.utils.Utils;
  
	UIPopupWindow uiPopupWindow = uicomponent.getAncestorOfType(UIPopupWindow.class);
  def resizeBlock = "class=\"UIResizableBlock\"";
  if(uiPopupWindow != null) resizeBlock = ""; 
  
	def node = uicomponent.getNode() ;
	def originalNode = uicomponent.getOriginalNode()
	SimpleDateFormat dateFormat = new SimpleDateFormat() ;
	Parameter[] params;
%>
<style>
  <% _ctx.include(uicomponent.getTemplateSkin("exo:sample", "Stylesheet")); %>
</style>
<div $resizeBlock id="$uicomponent.id">
	<div class="WorkSample">
		<div class="SampleBG">
				<label class="text"><%=_ctx.appRes("Sample.view.label.node-name")%> </label>
				<span class="text"><%=originalNode.getName()%></span>
		</div>
		<div class="SampleBG">
			<label class="text"><%=_ctx.appRes("Sample.view.label.title")%> </label>
			<span class="text">
				<%if(node.hasProperty("exo:title")) {%>
					<%=node.getProperty("exo:title").getString()%>
				<%}%>
			</span>
		</div>
		<div class="SampleBG">
			<label class="text"><%=_ctx.appRes("Sample.view.label.date")%> </label>
			<span class="text">
				<%if(node.hasProperty("exo:date")) {
				  dateFormat.applyPattern("MMMMM dd yyyy") ;						
				%>
					<%=dateFormat.format(node.getProperty("exo:date").getDate().getTime())%>
				<%}%>
			</span>
		</div>
		<div class="SampleBG">
			<label class="text"><%=_ctx.appRes("Sample.view.label.date-time")%> </label>
			<span class="text">
				<%if(node.hasProperty("exo:datetime")) {
					 dateFormat.applyPattern("MMMMM dd yyyy hh:mm:ss") ;		
				%>
					<%=dateFormat.format(node.getProperty("exo:datetime").getDate().getTime())%>
				<%}%>	
			</span>
		</div>
		<div style="overflow: hidden">
			<div class="LableLeftDescription" >
				<div class="TitleBG">
					<label class="text" style="padding-left: 5px"><%=_ctx.appRes("Sample.view.label.description")%></label>
				</div>
				<div class="summary" >
					<%if(node.hasProperty("exo:description")) {%>
						<%=node.getProperty("exo:description").getString()%>
					<%}%>
				</div>
			</div>
			<% if(node.hasNode("exo:image")) {
				 imgSrc = uicomponent.getImage(node) ;
			%>
					<div class="LableRightDescription">
						<div class="TitleBG" >
							<label class="text" style="padding-left: 5px"><%=_ctx.appRes("Sample.view.label.image")%></label>
						</div>
						<div style= "width: 95%; height: 160px ; text-align: center; padding: 5px;">
			      	<image src="$imgSrc" width="250" height="150" alt=""/> 
						</div>
					</div>
			<% } %>
		</div>
		<!-- div for  Summary and Image -->
		<div style="overflow: hidden;">
			<div class="LableLeftDescription">
				<div class="TitleBG">
					<label class="text" style="padding-left: 5px"><%=_ctx.appRes("Sample.view.label.summary")%></label>
				</div>
				<div class="summary" >
					<%if(node.hasProperty("exo:summary")) {%>
						<%=node.getProperty("exo:summary").getString()%>
					<%}%>
				</div>
			</div>
			<div class="LableRightDescription">
				<div class="TitleBG" >
					<label class="text" style="padding: 5px;"><%=_ctx.appRes("Sample.view.label.content")%></label>
				</div>
				<div class="content">
					<%if(node.hasProperty("exo:content")) {%>
						<%=node.getProperty("exo:content").getString()%>
					<%}%>
				</div>
			</div>
		</div>
		<!-- div for Content -->
		<!-- div for  relation and attackments -->
		<div style="overflow: hidden;">
			<div class="LableLeftDescription">
				<div class="TitleBG" >
					<label class="text" style="padding-left: 5px;"><%=_ctx.appRes("Sample.view.label.relation")%></label>
				</div>
				<%
				  def relations = uicomponent.getRelations() ;
				  if(relations.size() > 0) {
				%>
					<div style="width: 100%;" >
						<%
						  for(rel in relations) {
							  if (rel != null) {
							  	params  = [new Parameter("workspaceName", rel.getSession().getWorkspace().getName()), new Parameter("findDrive","true")];
							  	String actionLink2 = uicomponent.event("ChangeNode", rel.getPath(), params);
							%>
								<div style="font-size: 12px; padding: 10px;">
									-	<a href="$actionLink2">
											<%=rel.getName()%>
										</a>
								</div>
								
						<%  }
						  }%>	  	
					</div>		  
				<%} else {%>
					<div style="width: 100%; height: 20px;"> </div>
			  <%}%>
			</div>
			<div class="LableRightDescription">
				<div class="TitleBG" >
					<label class="text" style="padding-left: 5px;"><%=_ctx.appRes("Sample.view.label.attachment")%></label>
				</div>
				<%
				  def attachments = uicomponent.getAttachments() ;
				  if(attachments.size() > 0) {
					  def removeattachcomponent = uicomponent.getRemoveAttach();
					  String wsName = "";
				%>			
					<div style="width: 100%" >
						<%
						  for(att in attachments) {
						  wsName = att.getSession().getWorkspace().getName();
						  params  = [new Parameter("workspaceName", wsName), new Parameter("findDrive","true")];
						  String actionLink3 = uicomponent.event("ChangeNode", att.getPath(), params);
						%>
							<div style="font-size: 12px; padding: 10px;">
								<div class="RemoveNodeFloat">
								 -<a href="$actionLink3">
								 		<%=att.getName()%>
								 	</a>
								</div>
								<div class="RemoveNodeFloat"> 	
							 	 <% if (PermissionUtil.canRemoveNode(att)) {
							 	 			params = [new Parameter("workspaceName", wsName), new Parameter("repository", uicomponent.getRepository())];
							 	 %>
																		 	 <a onclick="<%=removeattachcomponent.event("RemoveAttach", Utils.formatNodeName(att.getPath()), params)%>" style="cursor: pointer;" title="<%=_ctx.appRes(uicomponent.getId() + ".tooltip.remove-attachment")%>">
	                      <div class="RemoveAttachments"><span></span></div>
	                    </a>
                <% } %>
                </div>
                <div style="clear: left;"><span></span></div>
							</div>
						<%}%>	  	
					</div>		  
				<%} else { %>
					<div style="width: 100%; height: 20px;"> </div>
				<%}%>
			</div>	
			<div style="clear: both"><span></span></div>
		</div>		
	</div>
	<div><% _ctx.include(uicomponent.getViewTemplate("mix:votable", "view1")); %></div>
  <div><% _ctx.include(uicomponent.getViewTemplate("exo:comments", "view1")); %></div>
</div>
