<%
	/**
	 * Created by The eXo Platform SAS
	 * Author : Phan Le Thanh Chuong
	 *          chuong_phan@exoplatform.com, phan.le.thanh.chuong@gmail.com
	 * Oct 29, 2009  
	 */	 
%>

<div class="UITabPane" id="$uicomponent.id">
	<div class="TabPaneContent">
		<div class="WorkingAreaWithHelp">
			<div class="UIHorizontalTabs">
				<div class="LeftHorizontalTabs">
					<div class="RightHorizontalTabs">
						<div class="CenterHorizontalTabs">
							<div class="TabsContainer">
								<%
									String selTabId = uicomponent.getSelectedTabId() ;
									for(uiChild in uicomponent.getChildren()) {
										if(!uiChild.isRendered()) continue ; 
										String style = "NormalTab" ;
										String tabId = uiChild.getId();
										if(tabId.equals(selTabId)) style="SelectedTab" ;
										%>
											<div class="UITab NormalTabStyle">
												<div class="$style">
													<div class="LeftTab">
														<div class="RightTab">                
															<div class="MiddleTab" onclick="eXo.webui.UIHorizontalTabs.changeTabForUITabPane(this, '$tabId', '$uiChild.id');"><%=_ctx.appRes("UITabPane.title." + uiChild.getId());%></div>
														</div>
													</div>
												</div>
											</div>
										<%
									}
								%>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="UITabContentContainer">
				<%
					for(uiChild in uicomponent.getChildren()) {
						if(!uiChild.isRendered()) continue ; 
						String display = "none" ;
						if(uiChild.getId().equals(selTabId)) display="block" ;
						%><div class="UITabContent" style="display: $display; overflow: auto;"><%
						uicomponent.renderUIComponent(uiChild) ;
						%></div><%
					}
				%>
				<div class="UIAction"> 
					<% 
						for(action in uicomponent.getActions()) { 
							String actionLabel = _ctx.appRes(uicomponent.getName() + ".action." + action);
							String link = uicomponent.event(action);
							%>
								<a href="javascript:void(0);" onclick="$link" class="ActionButton LightBlueStyle">$actionLabel</a>
							<%
						}
					%>
				</div>
			</div>
		</div>
	</div>
</div>