<%	
	import org.exoplatform.commons.utils.ExpressionUtil;
	import org.exoplatform.portal.webui.workspace.UIPortalApplication;
	import org.exoplatform.web.application.JavascriptManager;
	import org.exoplatform.commons.utils.HTMLEntityEncoder;
	
	def rcontext = _ctx.getRequestContext(); 
	ResourceBundle res = rcontext.getApplicationResourceBundle(); 
	
	UIPortalApplication uiPortalApp = rcontext.getUIApplication();
	boolean hasPermission = uicomponent.hasPermission();
	if(!uiPortalApp.isEditing() && !hasPermission) return;
	
	/** Trim the prefix UIContainer- if any, this hardcoded part is needed to update nested container via Ajax */
	String componentId = uicomponent.getId();
	if(componentId.startsWith("UIContainer-")){
		uicomponent.setId(componentId.substring("UIContainer-".length()));
	}

	if (uiPortalApp.isEditing())
	{
	   JavascriptManager jsManager = rcontext.getJavascriptManager();
	  	jsManager.require("SHARED/portal", "portal").require("SHARED/portalDragDrop", "portalDragDrop")
	  				.addScripts("portalDragDrop.init(['UIContainer']);")
	  				.addScripts("portal.UIPortal.initMouseHover('" + uicomponent.id + "');");
%>  
<div class="UIContainer UITableColumnContainer EdittingContainer <%=hasPermission?"":"ProtectedContainer"%>" 
				id="${uicomponent.id}">
<%
  }
  else
  {   
%>
<div class="UIContainer UITableColumnContainer UIResponsiveTableColumnContainer <%=hasPermission?"":"ProtectedContainer"%>" id="${uicomponent.id}">
<%
  }
%>
	<div class="NormalContainerBlock UIComponentBlock">
		<% 
			int portalMode = uiPortalApp.getModeState();
			String style = "";
			String width	= uicomponent.getWidth();
			String height	= uicomponent.getHeight();
			if(width != null) style += "width:"+width+";";
			if(height != null) style += "height:"+height+";";
			if(portalMode == uiPortalApp.CONTAINER_BLOCK_EDIT_MODE || portalMode == uiPortalApp.APP_BLOCK_EDIT_MODE){
		%>
		<div class="LAYOUT-CONTAINER LAYOUT-BLOCK">
		<%} else {%>
		<div class="VIEW-CONTAINER VIEW-BLOCK">
		<%} %>
			<div>
				<%if(hasPermission) {%>		
				<table class="UITableColumn UITableResponsiveColumn" style="table-layout: fixed; margin: 0px auto; $style">
					<tr class="TRContainer">
						<% for(uiChild in uicomponent.getChildren()) {%>
							<td class="${uiChild.id}TDContainer TDContainer TDResponsiveContainer " <% if(uiChild.getWidth()) { %> width="<%= uiChild.getWidth(); %>" <% } %>><% uicomponent.renderUIComponent(uiChild) %></td>
						<% } %>
				 </tr>
				</table>
				<%} else {print "<div class='ProtectedContent'>"+_ctx.appRes("UIPortlet.label.protectedContent")+"</div>";}%>
			</div>		
		</div>
		<%/*Debug On IE	-----For DND */%>
		
		<%if(portalMode != UIPortalApplication.NORMAL_MODE){%>
		<div class="EDITION-BLOCK EDITION-CONTAINER" style="display: none;position: relative;">
			<div style="position: absolute; top: -86px;">
				<div class="NewLayer" style="display: none; visibility: hidden;"><span></span></div>
				<div class="CONTROL-CONTAINER CONTROL-BLOCK UIInfoBar">
					<%/*Begin InfoBar*/%>
					<div class="BlueRoundedStyle ClearFix">
						<div class="DragControlArea" title="<%=_ctx.appRes("UITableColumnContainer.title.DragControlArea")%>"><span></span></div>
						<% 
							String strTitle = uicomponent.getTitle() != null ?
										ExpressionUtil.getExpressionValue(res, uicomponent.getTitle()) :
										_ctx.appRes("UITableColumnContainer.title.Container");
							strTitle = hasPermission ? strTitle : _ctx.appRes("UIPortlet.label.protectedContent");
						%>
						<div class="ContainerIcon DefaultContainer16x16Icon"><%=HTMLEntityEncoder.getInstance().encode(strTitle)%></div>
						<%if(hasPermission) {%>
							<a href="javascript:void(0);" onclick="<%=uicomponent.event("EditContainer","$uicomponent.id")%>" class="EditIcon" title="<%=_ctx.appRes("UITableColumnContainer.tooltip.editContainer")%>"></a>
							<a href="javascript:void(0);" onclick="<%=uicomponent.event("DeleteComponent","$uicomponent.id")%>" class="DeleteIcon" title="<%=_ctx.appRes("UITableColumnContainer.tooltip.closeContainer")%>"></a>
						<%}%>
					</div>
					<%/*End InfoBar*/ %>
				</div>
			</div>
		</div>
		<%} %>
	</div>
</div>