<%
import org.exoplatform.faq.service.Utils;
import org.exoplatform.faq.service.Category;
import org.exoplatform.faq.service.Cate;

if(!uicomponent.isEditPortlet_){
%>
<div class="UISettingForm">
	<% uiform.begin() %>
	 					<div class="HorizontalLayout">
			 					<table class="UIFormGrid">								
									<tbody>
									<%
									if(uicomponent.isEditPortlet_){%>
										<tr>
											<td class="FieldLabel"><label for="<%=uicomponent.DISPLAY_MODE%>"><%= _ctx.appRes("UISettingForm.label.display-mode"); %></label></td>
											<td class="FieldComponent">
												<%uicomponent.renderField(uicomponent.DISPLAY_MODE)%>
											</td>
										</tr>
								<%}%>
										<tr>
											<td class="FieldLabel"><label for="<%=uicomponent.ORDER_BY%>"><%= _ctx.appRes("UISettingForm.label.order-by"); %></label></td>
											<td class="FieldComponent">
												<%uicomponent.renderField(uicomponent.ORDER_BY)%>
											</td>
										</tr>
										<tr>
											<td class="FieldLabel"><label for="<%=uicomponent.ORDER_TYPE%>"><%= _ctx.appRes("UISettingForm.label.order-type"); %></label></td>
											<td class="FieldComponent">
												<%uicomponent.renderField(uicomponent.ORDER_TYPE)%>
											</td>
										</tr>
										<tr>
											<td class="FieldLabel"><label for="<%=uicomponent.ITEM_VOTE%>"><%= _ctx.appRes("UISettingForm.label.option.vote"); %></label></td>
											<td class="FieldComponent">
												<%uicomponent.renderField(uicomponent.ITEM_VOTE)%>
											</td>
										</tr>
										<tr>
											<td class="FieldLabel"><%= _ctx.appRes("UISettingForm.label.user-watch-manager"); %></td>
											<% String linkWacth =uicomponent.event("UserWatchManager") ; %>
											<td>
												<div onclick="$linkWacth" title="<%= _ctx.appRes("UISettingForm.title.user-watch-manager")%>" class="WatchUserManager">
													<span></span>
												</div>
											</td>
										</tr>
										<tr>
											<td class="FieldLabel"><%=_ctx.appRes("UISettingForm.label.Avatar")%>:</td>
											<td>
													<div class="SmallAvatarSetting">
														<img src="${uicomponent.getAvatarUrl()}" class="SmallImgAvatar ImgAvatarBorder" alt="<%=_ctx.appRes("UISettingForm.label.Avatar")%>"/>
														<br/>
														<a href="javaScript:void(0);" onclick="<%=uicomponent.event("ChangeAvatar")%>">
															<%=_ctx.appRes("UISettingForm.action.ChangeAvatar")%>
														</a>
														<%
														if(!uicomponent.isDefaultAvatar()){%> 
															|
															<a href="javaScript:void(0);" onclick="<%=uiform.event("SetDefaultAvatar", uicomponent.id,"")%>" style="cursor:pointer; color:blue;">
																<%=_ctx.appRes("UISettingForm.label.resetAvatar")%>
															</a>
														<%
														}%>
													</div>
											</td>
										</tr>
									</tbody>
								</table>
				 		</div>
			 	<div class="UIAction">
            <% for(action in uicomponent.getActions()) {
						 if(action.indexOf("Values") > 0) continue ; 
						 if(uicomponent.isEditPortlet_ && action.indexOf("Cancel") >= 0) continue ; 
						 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>
	<%uiform.end()%>
</div>
<%
} else {
%>
<div class="UISettingForm $uicomponent.id" style="padding:4px;">
	<div class="UITabPane">
		<div style="padding:2px;">
			<div class="WorkingArea">
			
			 	<div class="UIHorizontalTabs">
			 		<div class="LeftHorizontalTabs">
			 			<div class="RightHorizontalTabs">
			 				<div class="CenterHorizontalTabs">
								<div class="TabsContainer">
									<%
										String selTabId = uicomponent.getSelectedTab() ;
										if(uicomponent.isResetMail){
											uicomponent.isResetMail = false;
											selTabId = uicomponent.SET_DEFAULT_EMAIL_TAB;
										}
										String actionChangeTab =	"";
										int count = 0;
										for(inputSet in uicomponent.getChildren()) {
											if(!inputSet.isRendered()) continue ;
											actionChangeTab =	uicomponent.event("ChildTabChange", "parent/" + count);
											String className="NormalTab" ;
											if(inputSet.getId().equals(selTabId)){
											 className="SelectedTab" ;
											}
											String tabNames = inputSet.getId();
											String tabName = _ctx.appRes(uicomponent.getName() + ".tab.label." + inputSet.name) ;
											count ++;
									%>
											<div class="UITab NormalTabStyle">
												<div class="$className">
													<div class="LeftTab">
														<div class="RightTab">
															<div class="MiddleTab" onmousedown="$actionChangeTab" onkeydown="$actionChangeTab">$tabName</div>
														</div>
													</div>
												</div>
											</div>
									<% }%>
								</div>
							</div>
						</div>
					</div>
				</div>
			 
				<%uiform.begin()%>
				<div style="background-color:#F3F3F3;">
				
					<div class="UITabContentContainer">
						<%
							for(formInput in uicomponent.getChildren()) {
								if(!formInput.isRendered()) continue ;
								String display = "none" ;
								if(formInput.getId().equals(selTabId)) display="block" ;
						%>
								<div class="UITabContent"	style="display:$display;">
								<%if(formInput.getId().equals(uicomponent.SET_DEFAULT_EMAIL_TAB)){%>
										<div>
											<!-- -------------------------------------------------------------------------------------------------------------------- -->
											<div class="UIHorizontalTabs">
										 		<div class="LeftHorizontalTabs">
										 			<div class="RightHorizontalTabs">
										 				<div class="CenterHorizontalTabs">
															<div class="TabsContainer">
																<%
																	count = 0;
																	for(childInputSet in formInput.getChildren()) {
																		actionChangeTab =	uicomponent.event("ChildTabChange", "child/" + count);
																		if(!childInputSet.isRendered()) continue ;
																		String childClassName="NormalTab" ;
																		if(count == uicomponent.indexOfTab) childClassName="SelectedTab" ;
																		String childTabName = _ctx.appRes(uicomponent.getName() + ".tab.label." + childInputSet.name) ;
																%>
																		<div class="UITab NormalTabStyle">
																			<div class="$childClassName">
																				<div class="LeftTab">
																					<div class="RightTab">
																						<div class="MiddleTab" onmousedown="$actionChangeTab" onkeydown="$actionChangeTab">$childTabName</div>
																					</div>
																				</div>
																			</div>
																		</div>
																<%	count ++; 
																}%>
															</div>
														</div>
													</div>
												</div>
											</div>
											
											<!-- -------------------------------------------------------------------------------------------------------------------- -->
											<div style="background-color:#F3F3F3;">
												<div class="UITabContentContainer">
													<%
														int i = 0;
														for(uiFormInput in formInput.getChildren()) {
															String actionReset = uicomponent.event("ResetMailContent", "" + i);
															if(!uiFormInput.isRendered()) continue ;
															String displayChild = "none" ;
															if(i == uicomponent.indexOfTab) displayChild="block" ;
															else displayChild = "none" ;
															i ++;
													%>
															<div class="UITabContent"	style="display:$displayChild; padding:5px;">
																<table class="UIFormGrid" style="width:100%;">
																	<tbody>
																		<%//uicomponent.renderUIComponent(uiFormInput);
																			for(childForm in uiFormInput.getChildren()) {
																			%>
																				<tr>
																					<td class="FieldLabel" style="white-space:nowrap; width:120px;">
																						<label for="<%=childForm.getId();%>"><%=_ctx.appRes("FAQPortletSetting.label." + childForm.getName())%></label>
																					</td>
																					<td class="FieldComponent">
																						<div style="float:left; width:90%;">
																							<%uicomponent.renderUIComponent(childForm);%>
																						</div>
																						<div onclick="$actionReset" style="cursor:pointer;" title="<%=_ctx.appRes("UISettingForm.label.resetMailContent")%>">
																							<div class="refreshMail"><span></span></div>
																						</div>
																					</td>
																				</tr>
																		<%}%>
																	</tbody>
																</table>
															</div>
													<%}%>
												</div>
											</div>
									 	</div>
								 <%}else if(formInput.getId().equals(uicomponent.CATEGORY_SCOPING)) {%>
								 		<!-- View interface -->
										<div class="HorizontalLayout ViewQuestionsToSelect" style="overflow:auto;">
											<%
											List listCate = uicomponent.listCate;
											Stack<String> stackCateid = new Stack<String>() ;
									    StringBuffer stringBuffer = new StringBuffer() ;
									    int n = listCate.size() ;
									    int i = 0 ;
									    int id = 0 ;
									   %>
										   <!-- ===================================== view all subcategories of root category ==================================== -->
										   <%
										   if(uicomponent.listCate != null && !uicomponent.listCate.isEmpty()){
										   	for(cate in uicomponent.listCate) {
										   		stackCateid.push(cate.getCategory().getId()) ;
										    	id ++ ;
										    	i ++ ;
										      if(i == 1) {%>
											      <div class="FAQDomNode">
															<div class="FAQCategoryTreeView" id="FAQCate$i">
																<div style="float:left" onclick="eXo.faq.UIAnswersPortlet.checkedNode(this)">
															 	 		<%formInput.renderChild(cate.getCategory().getId());%>
															 	 </div>
																<label for="<%=cate.getCategory().getId()%>" class="LabelNameCategory" onclick="eXo.faq.UIAnswersPortlet.treeView('FAQViewChild$id')"><%= cate.getCategory().getName();%></label>
															</div>
															<div class="FAQChildNodeContainer" id="FAQViewChild$i">
										  	<%
									      	} else if(i > 1) {
										        int sub = cate.getDeft() - listCate.get(i - 2).getDeft() ;
										        if(sub == 0) {%>
										        		</div>
										        	</div>
											      <div class="FAQDomNode">
										        	<div class="FAQCategoryTreeView">
										        			<div style="float:left" onclick="eXo.faq.UIAnswersPortlet.checkedNode(this)">
															 	 		<%formInput.renderChild(cate.getCategory().getId());%>
															 		</div>
															 		<label for="<%=cate.getCategory().getId()%>" class="LabelNameCategory" onclick="eXo.faq.UIAnswersPortlet.treeView('FAQViewChild$id')"><%= cate.getCategory().getName();%></label>
															</div>
															<div class="FAQChildNodeContainer" id="FAQViewChild$i">
															
										    <%
										        } else if(sub > 0) {%>
												      <div class="FAQDomNode">
																<div class="FAQCategoryTreeView">
														    	<div id="FAQCate$i" style=" overflow-x:auto;">
														    		<div style="float:left" onclick="eXo.faq.UIAnswersPortlet.checkedNode(this)">
																 	 		<%formInput.renderChild(cate.getCategory().getId());%>
																 	 </div>
																 		<label for="<%=cate.getCategory().getId()%>" class="LabelNameCategory" onclick="eXo.faq.UIAnswersPortlet.treeView('FAQViewChild$id')"><%= cate.getCategory().getName();%></label>
														    	</div>
														   	</div>
																<div class="FAQChildNodeContainer" id="FAQViewChild$i">
										    <%
										        } else {%>
										     		<%for(int j = 0 ; j < (-1*sub) + 1; j ++) {%>
											    				</div>
											    			</div>
										     		<%}%>
											    	<div class="FAQDomNode">
															<div class="Icon FAQCategoryTreeView">
																<div style="float:left" onclick="eXo.faq.UIAnswersPortlet.checkedNode(this)">
															 	 		<%formInput.renderChild(cate.getCategory().getId());%>
															 	</div>
																<label for="<%=cate.getCategory().getId()%>" class="LabelNameCategory" onclick="eXo.faq.UIAnswersPortlet.treeView('FAQViewChild$id')"><%= cate.getCategory().getName();%></label>
															</div>
															<div class="FAQChildNodeContainer" id="FAQViewChild$i">
										     <%
										        }
										      }
										    }%>
													</div>
										    </div>
										    <%
										    for(i = 1 ; i < listCate.get(n - 1).getDeft() ; i ++) {%>
										    		</div>
										    	</div>
										  	<%
										    }%>
										<%}%>
										</div>
										
								 <%}else {
										uicomponent.renderUIComponent(formInput) ;
									}
									%>
								</div>
						<%}%>
					</div>
				</div>
				 <div class="UIAction">
        <%for(action in uicomponent.getActions()) { 
									if(uicomponent.isEditPortlet_ && action.indexOf("Cancel") >= 0) continue ; 
									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>
				<%uiform.end()%>
			</div>
		</div>	
	</div>
</div>
<%
}
%>
