<%	
	def rcontext = _ctx.getRequestContext();
	rcontext.getJavascriptManager().require("SHARED/jquery", "\$")
    .addScripts("var tabs = \$('#$uicomponent.id > .btn-group .btn');" + 
      " tabs.on('click', function(e) {" +
      "   var \$a = \$(e.target || e.srcElement);" +
      "   tabs.removeClass('active'); \$a.addClass('active');" +
      "   var id = \$a.attr('href');" +
      "   \$('#$uicomponent.id .uiTabContent').hide();" +
      "   \$('#$uicomponent.id .uiTabContent' + id).show();" +
      "   return false;});");
%>
<div class="uiTabSelector" id="$uicomponent.id">
		<div class="btn-group btn-without-icon uiDropdownWithIcon">
    <%
			String selectedId = uicomponent.getSelectedComponentId();
			for(uiChild in uicomponent.getChildren()) {
				String style = "";
				if(selectedId.equals(uiChild.id)) style = "active";
				String actionLink = "ajaxAsyncGetRequest('" + uicomponent.url("SelectComponent",uiChild.id) + "', true);";
		%>
    	<a class="btn $style" href="#TabContent$uiChild.id" onclick="$actionLink"><%=_ctx.appRes("UITabPane.title." + org.exoplatform.webui.application.WebuiRequestContext.stripUUIDSuffix(uiChild.getId()));%></a>
		<%}%>
    </div>
		<%
			for(uiChild in uicomponent.getChildren()) { 
				String display = "none";
				if(selectedId.equals(uiChild.id)) display="block";
				println "<div id='TabContent$uiChild.id' class='uiTabContent' style=\"display: $display\">";
				uicomponent.renderUIComponent(uiChild);
				println "</div>";
			}
		%>
</div>	
