<%
	/** 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 (uicomponent.width != null && uicomponent.width != "") {
	  _ctx.getRequestContext().getJavascriptManager().require("SHARED/portal", "portal").require("SHARED/toggleContainer", "toggleContainer").addScripts("toggleContainer.addContainer('"+uicomponent.id+"', '" + uicomponent.width + "');");
	}
  String style = "";
  String width = uicomponent.getWidth();
  String height = uicomponent.getHeight();
  if (height != null) style += "height:"+height+";";

  String uiComponentClass = uicomponent.getCssClass() == null ? "" : uicomponent.getCssClass();
%>
<div
  class="UIContainer UITableColumnContainer UISwitchingContainer <%=uiComponentClass%>"  id="${uicomponent.id}">
  <div class="NormalContainerBlock UIComponentBlock">
    <div class="VIEW-CONTAINER VIEW-BLOCK">
      <div>
        <div class="UITableColumn UISwitchingColumn"
          style="display: table; width: 100%; margin: 0 auto; $style">
          <div id="${uicomponent.id}Children" class="TRContainer"
            style="display: table-row">
            <% for(uiChild in uicomponent.getChildren()) {%>
            <div
              class="${uiChild.id}TDContainer TDContainer SwitchingContainer"
              <% if(uiChild.getWidth()) { %>
              width="<%= uiChild.getWidth(); %>" <% } %>
              style="vertical-align: top">
              <% uicomponent.renderUIComponent(uiChild) %>
            </div>
            <% } %>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
