<%		
	def rcontext = _ctx.getRequestContext();
	rcontext.getJavascriptManager().require("SHARED/portalControl").require("SHARED/uiForm").require("SHARED/bts_tab");
%>

<div class="uiFormTabPane uiTabNormal">

			 	<ul class="nav nav-tabs">
					<%
						String selTabId = uicomponent.getSelectedTabId();
						for(inputSet in uicomponent.getChildren()) {
							if(!inputSet.isRendered()) continue;
							String className="";
							if(inputSet.getId().equals(selTabId)) className="active";
							//String tabName = inputSet.getName(); 
							tabName = _ctx.appRes(uicomponent.getName() + ".tab.label." + inputSet.name);
							String actionLink = "" + uicomponent.event("SelectTab",inputSet.getId()) + "";
							def tabId = inputSet.getId() + "-tab"
					%>
						<li class="$className" onclick="eXo.webui.UIHorizontalTabs.changeTabForUIFormTabpane(this, '$uiform.id', '$inputSet.id');$actionLink">
									<a data-toggle="tab" data-target="#$tabId">$tabName</a>		
						</li>
					<% }%>
				</ul>
				<%uiform.begin()%>
				<div><input type="hidden" id="<%=uicomponent.RENDER_TAB%>" name="<%=uicomponent.RENDER_TAB%>" value="$uicomponent.selectedTabId"/></div>
				<div class="tab-content">
						<%
							for(formInput in uicomponent.getChildren()) {
								if(!formInput.isRendered()) continue;
								def active = "";
								if(formInput.getId().equals(selTabId)) {
									active = "in active";
								}
						%>
						<div id="$formInput.id-tab" class="tab-pane fade $active">
							<div class="uiTabContent resizable">
								<%
									uicomponent.renderUIComponent(formInput);
								%>
							</div>
						</div>
						<%}%>
				</div>
				<div class="uiAction">
					<%for(action in uicomponent.getActions()) { 
						String actionLabel = _ctx.appRes(uicomponent.getName() + ".action." + action);
						String link = uicomponent.event(action);
					%>
					 		<button type="button" onclick="$link" class="btn">$actionLabel</button>					 		
					<%}%>
				</div>
				<%uiform.end()%>

</div>
