<%
	import org.exoplatform.commons.utils.ExpressionUtil;
	import org.exoplatform.portal.webui.workspace.UIPortalApplication;
	import org.exoplatform.webui.core.UIComponent;
	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;

	String cssStyle = "";
	String uiComponentWidth = uicomponent.getWidth();
	String uiComponentHeight = uicomponent.getHeight();
	if(uiComponentWidth != null || uiComponentHeight != null) cssStyle = "style=\"";
	if(uiComponentHeight != null) cssStyle += "height: "+uiComponentHeight+";"
	if(cssStyle.length() > 0) cssStyle += "\"";
	
	/** 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())
  {
     def reqJS = rcontext.getJavascriptManager().require("SHARED/portal", "portal");
     reqJS.addScripts("portal.UIPortal.initMouseHover('" + uicomponent.id + "');");
%>
<div class="UIContainer UIColumnContainer EdittingContainer <%=hasAccessPermission?"": "ProtectedContainer"%>"
				id="${uicomponent.id}" ${cssStyle}>
<%
  }
  else
  {
%>
<div class="UIContainer UIColumnContainer UIResponsiveColumnContainer <%=hasAccessPermission?"": "ProtectedContainer"%>"
        id="${uicomponent.id}" ${cssStyle}>
<%
  }
%>		<div class="NormalContainerBlock">
			<%
				int portalMode = uiPortalApp.getModeState();
				if(portalMode == uiPortalApp.CONTAINER_BLOCK_EDIT_MODE || portalMode == UIPortalApplication.APP_BLOCK_EDIT_MODE){
			%>
				<div class="LAYOUT-CONTAINER LAYOUT-BLOCK">
			<%} else {%>
				<div class="VIEW-CONTAINER VIEW-BLOCK">
			<%} %>
					<%if(hasAccessPermission) {%>
 						<div>
						  <div class="UIRowContainer <%=(portalMode != UIPortalApplication.NORMAL_MODE && uicomponent.getChildren().size() == 0) ? "EmptyContainer" : ""%>">
								<%uicomponent.renderChildren();%>
						  </div>
						</div>
						<%} else out.print("<div class='ProtectedContent'>"+_ctx.appRes("UIPortlet.label.protectedContent")+"</div>");%>
				</div>
				
			<%if(portalMode != UIPortalApplication.NORMAL_MODE){%>
				<div class="EDITION-BLOCK EDITION-CONTAINER" style="position: relative; display: none;">
					<div style="position: absolute; top: -86px;">
						<div class="NewLayer" style="display: none; visibility: hidden;"><span></span></div>
						<div class="CONTROL-CONTAINER CONTROL-BLOCK UIInfoBar" style="position: absolute; top: -6px;">
							<%/*Begin InfoBar*/%>
							<div class="BlueRoundedStyle FixHeight ClearFix">

										<span class="DragControlArea" title="<%=_ctx.appRes("UIColumnContainer.title.DragControlArea")%>"></span>
								<%
									String strTitle = uicomponent.getTitle() != null ?
												ExpressionUtil.getExpressionValue(res, uicomponent.getTitle()) :
												_ctx.appRes("UIColumnContainer.title.Container");
								%>
								<div class="ContainerIcon DefaultContainer16x16Icon">
								<%=hasAccessPermission ? strTitle : _ctx.appRes("UIPortlet.label.protectedContent")%>
								</div>
								<%if(hasAccessPermission) {%>
								<a href="javascript:void(0);" onclick="<%=uicomponent.event("EditContainer","$uicomponent.id")%>" rel="tooltip" data-placement="bottom" title="<%=_ctx.appRes("UIColumnContainer.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("UIColumnContainer.tooltip.closeContainer")%>"><i class="uiIconTrash uiIconWhite"></i></a>
											
										<%}%>
		
									</div>
								<%/*End InfoBar*/ %>
							</div>
							
						</div>

				</div>
		</div>
			<%} %>

	</div> 
</div>