<%
  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 id="${uicomponent.id}">
<div class="container">
<div class="row">
<%
  }
%>  <div class="NormalContainerBlock UIComponentBlock">

      <%
        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="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 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");
                      strTitle = hasAccessPermission ? strTitle : _ctx.appRes("UIPortlet.label.protectedContent");
                    %>
                    <div class="ContainerIcon"><%=HTMLEntityEncoder.getInstance().encode(strTitle)%></div>
                    <%if(hasAccessPermission) {
                       rcontext.getJavascriptManager().require("SHARED/popupCategory", "popup")
                            .addScripts("popup.init('" + uicomponent.id + "');");
                    %>
                      <div class="ContainerControlIcon ContainerArrowDownIcon" title="<%= _ctx.appRes("UIColumnContainer.tooltip.insertColumn") %>">
                        <% /*Begin Popup Menu*/ %>
                        <div style="position: relative; width: 100%">
                          <div class="UIPopupCategory" style="display: none;">
                            <div class="PopupCategoryDecorator">

                              <a class="CategoryItem" href="javascript:void(0);" onclick="<%= uicomponent.event("InsertColumn", org.exoplatform.portal.webui.container.UIColumnContainer.INSERT_BEFORE) %>"  title="<%= _ctx.appRes("UIColumnContainer.tooltip.insertLeft") %>">
                                <div class="CategoryItemLabel"><%= _ctx.appRes("UIColumnContainer.label.insertLeft") %></div>
                              </a>
                              <a class="CategoryItem" href="javascript:void(0);" onclick="<%= uicomponent.event("InsertColumn", org.exoplatform.portal.webui.container.UIColumnContainer.INSERT_AFTER) %>"  title="<%= _ctx.appRes("UIColumnContainer.tooltip.insertRight") %>">
                                <div class="CategoryItemLabel"><%= _ctx.appRes("UIColumnContainer.label.insertRight") %></div>
                              </a>
                          </div>
                        </div>
                        <% /*End Popup Menu*/ %>
                      </div>
		              <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>
                  </div>
                <%/*End InfoBar*/ %>
              </div>

            </div>
		</div>

        </div>  
      <%} %>
  </div>
</div>
  <%if (!uiPortalApp.isEditing()){
  %></div></div><%
  }%>