<%	
	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 hasAccessPermission = uicomponent.hasAccessPermission();
	if(!uiPortalApp.isEditing() && !hasAccessPermission) 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 <%=hasAccessPermission?"":"ProtectedContainer"%>"
				id="${uicomponent.id}">
<%
  }
  else
  {
%>
<div class="UIContainer UIColumnContainer <%=hasAccessPermission?"": "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(hasAccessPermission) {%>
				<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">
								<div class="DragControlArea" rel="tooltip" data-placement="bottom" title="<%=_ctx.appRes("UIContainer.tooltip.drag")%>"
								     onmousedown="eXo.portal.PortalDragDrop.init.call(this,event);"
								     onkeydown="eXo.portal.PortalDragDrop.init.call(this,event);"><span></span></div>
						<%
							String strTitle = uicomponent.getTitle() != null ?
										ExpressionUtil.getExpressionValue(res, uicomponent.getTitle()) :
										_ctx.appRes("UITableColumnContainer.title.Container");
							strTitle = hasAccessPermission ? strTitle : _ctx.appRes("UIPortlet.label.protectedContent");
						%>
						<i class="uiIconContainerConfig uiIconWhite"></i>
						<span><%=HTMLEntityEncoder.getInstance().encode(strTitle)%></span>
						<%if(hasAccessPermission) {%>
							<a href="javascript:void(0);" onclick="<%=uicomponent.event("EditContainer","$uicomponent.id")%>" rel="tooltip" data-placement="bottom" title="<%=_ctx.appRes("UITableColumnContainer.tooltip.editContainer")%>"><i class="uiIconEdit uiIconWhite"></i></a>
							<a href="javascript:void(0);" onclick="<%=uicomponent.event("DeleteComponent","$uicomponent.id")%>" rel="tooltip" data-placement="bottom" title="<%=_ctx.appRes("UITableColumnContainer.tooltip.closeContainer")%>"><i class="uiIconTrash uiIconWhite"></i></a>
						<%}%>
					</div>
					<%/*End InfoBar*/ %>
				</div>
			</div>
		</div>
		<%} %>
	</div>
</div>