<%
	import org.exoplatform.commons.utils.ExpressionUtil;
	import org.exoplatform.portal.webui.workspace.UIPortalApplication;
	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(uiComponentWidth != null) cssStyle += "width: "+uiComponentWidth+";"
	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 <%=hasAccessPermission?"": "ProtectedContainer"%>"
				id="${uicomponent.id}" ${cssStyle}>
<%
  }
  else
  {
%>
<div class="UIContainer UIResponsiveContainer <%=hasAccessPermission?"": "ProtectedContainer"%>" id="${uicomponent.id}" ${cssStyle}>
<%
  }
%>
	<div class="NormalContainerBlock UIComponentBlock">
		<%
			int portalMode = uiPortalApp.getModeState();
			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">
		<%} %>
				<%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="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("UIContainer.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>
</div>
