<%
	def rcontext = _ctx.getRequestContext();
	
	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 += "\"";
	
  String uiComponentClass = uicomponent.getCssClass() == null ? "" : uicomponent.getCssClass();

	/** 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()));
	}

	rcontext.getJavascriptManager().require("SHARED/mobileSwipeContainer", "mobileSwipe");
%>
<div class="UIContainer <%=uiComponentClass%> UIMobileSwipeContainer" id="${uicomponent.id}" ${cssStyle}>
	<div class="NormalContainerBlock UIComponentBlock">
		<div class="VIEW-CONTAINER VIEW-BLOCK">
			<div id="${uicomponent.id}Children" class="UIRowContainer UIMobileSwipeParentContainer">
         <%
            String active = "active";
            for(uiChild in uicomponent.getChildren()) {
              if (!uiChild.isRendered()) {
                continue;
              }
         %>
              <div class="UIMobileSwipeChildContainer $uiChild.id $active">
                  <% uicomponent.renderChild(uiChild);%>
              </div>
         <%
              active = "";
            }
         %>
			</div>

      <% if (uicomponent.getChildren().size() > 1) { %>
        <div class="UIMobileSwipe mobile-visible hidden left">
          <i class="uiIcon fa fa-angle-double-right"></i>
        </div>
        <div class="UIMobileSwipe mobile-visible right">
          <i class="uiIcon fa fa-angle-double-left"></i>
        </div>
      <% } %>
		</div>
	</div>
</div>
