<%  
  import org.exoplatform.faq.service.CategoryInfo;
  import org.exoplatform.faq.service.Utils;
  import org.exoplatform.answer.webui.FAQUtils;
  String tooltip = "";
  def requireJS = _ctx.getRequestContext()
      .getJavascriptManager().require("SHARED/FaqPortlet", "faq");
  requireJS.addScripts("faq.focusQuestion();")
		  .addScripts("faq.createLink('$uicomponent.id', '$uicomponent.useAjax');")
		  .addScripts("faq.backtotop();");
  requireJS.require("SHARED/jquery", "jq").require("SHARED/bts_tooltip", null)
  		.addScripts("(function(gj) { gj('*[rel=tooltip]').tooltip();}) (jq);");
%>
<div class="roundCornerBoxWithTitle" id="$uicomponent.id">
	<h5 class="titleBox"><%= uicomponent.getDisplaySpaceName(); %></h5>
	<div class="faqCont">
    <%
      CategoryInfo cateInfo = uicomponent.getCategoryInfo();
      if(cateInfo != null) {
          List subCategoryInfos = cateInfo.getSubCateInfos();
          List questionCates = cateInfo.getQuestionInfos();
          
          String path = cateInfo.getPath();
          if(path == null || path.length() == 0){
            path = Utils.CATEGORY_HOME;
          }
          String []ids = path.split("/");
          List navPath = cateInfo.getPathName();
          navPath = uicomponent.arrangeList(navPath);
          if(navPath.size() > 1) {
            print "<div id=\"UIWikiBreadCrumb\" class=\"uiWikiBreadCrumb\">";
  			    print "<ul class=\"breadcrumb\">";

  			    String link = ids[0], viewName;
            String url;
            for(int i = 0; i < navPath.size(); i++) {
              pathName = navPath[i];
              if(pathName.indexOf("<img") >= 0){
                pathName = Utils.CATEGORY_HOME;
              }
              if(pathName.equals(Utils.CATEGORY_HOME)){ 
                pathName = _ctx.appRes("UIBreadcumbs.label."+ Utils.CATEGORY_HOME);
                link = Utils.CATEGORY_HOME;
              }
              viewName = pathName;
              if(pathName.length() > 40 && pathName.indexOf("<img") < 0){
                viewName = FAQUtils.getSubString(pathName, 40);
              }
              if(i < ids.length && i > 0) {
                link = link + "/" + ids[i];
              }
              if(i < (ids.length-1) || link.equals(Utils.CATEGORY_HOME)){
                if(uicomponent.isInSpace() && link.equals(Utils.CATEGORY_HOME)) {
                    url = "javaScript:void(0)";
                  } else {
                    url = uicomponent.getURL(link);
                  }
              }

              tooltip = "rel=\"tooltip\" data-placement=\"bottom\" title=\"" + viewName + "\"";
              if(i == navPath.size() -1) {
                print "<li class=\"active\" "+tooltip+">" + viewName + "</li>";
              } else {
                print "<li " + tooltip + "><a class=\"actions-link\" href=\"" + url + "\" data-actions=\"" + 
              								 uicomponent.event("ChangePath", link) + "\">" + viewName + "</a>";
                print "<span class=\"uiIconMiniArrowRight\">&nbsp;</span></li>";
              }
            }
            
            print "</ul></div>";
          }
    %>
		
    <!--  Questions -->
		<div class="questionBlock">
			<h4><%=_ctx.appRes("UIViewer.label.Question")%></h4>
      <%for(questionCate in questionCates) { 
        String question_ =  questionCate.getQuestion();
        question_ = question_.replaceAll("<br/>", " ");
        question_ = uicomponent.render(question_);
        String id_ = questionCate.getId();
    %>
      <ul class="viewerQuestion">
        <li><i class="uiIconMiniArrowRight uiIconLightGray"></i><a href="#${id_}" name="name${id_}">$question_</a></li>
      </ul>
    <%} %>

      <%
      for(categoryInfo in subCategoryInfos){ 
          String categoryName = FAQUtils.getSubString(categoryInfo.getName(), 20);
          List questionInfos = categoryInfo.getQuestionInfos();
          List subCategories = categoryInfo.getSubCateInfos();
          tooltip = "rel=\"tooltip\" data-placement=\"bottom\" title=\"" + categoryInfo.getName() + "\"";
      %>    
			<div class="questionList">
        <h5>
          <a href="<%=uicomponent.getURL(categoryInfo.getPath());%>" 
          		class="actions-link" data-actions="<%=uicomponent.event("ChangePath", categoryInfo.getPath());%>" <%=tooltip%>>$categoryName</a>
          <%if (!subCategories.isEmpty()) {%>
            <span>&#91;</span>
          <%}
            int j = 0;
            for(subCategory in subCategories) { 
              String subCateName = FAQUtils.getSubString(subCategory.getName(), 20);
              tooltip = "rel=\"tooltip\" data-placement=\"bottom\" title=\"" + subCategory.getName() + "\"";
              String subPath = subCategory.getPath();
          %>
          <a class="childItem actions-link" href="<%=uicomponent.getURL(subPath)%>" 
          		data-actions="<%=uicomponent.event("ChangePath", subPath)%>" <%=tooltip%>>$subCateName</a>
          <%
             if(j != (subCategories.size-1)) {
                 print "<span> | </span>";
             }
              j++;
            }
            if (!subCategories.isEmpty()) {
          %>
            <span>&#93;</span>
          <%}%>
        </h5>
				<ul>
          <%for(questionInfo in questionInfos) { 
              String question = questionInfo.getQuestion();
              question = uicomponent.render(question);
              String id = questionInfo.getId();
          %>
					<li><i class="uiIconMiniArrowRight uiIconLightGray"></i><a href="#${id}">$question</a></li>
				  <%} %>
        </ul>
			</div>
      <%} %>
		</div>
    <!-- End Questions -->
    
    <!-- Answers -->
		<div class="answersBlock">
			<h4><%=_ctx.appRes("UIViewer.label.Answers")%></h4>
      
      <!-- Questions in current category -->
			<div class="viewerAnswer">
        <%for(questionCate in questionCates) { 
            String question_ =  questionCate.getQuestion();
            question_ = uicomponent.render(question_);
            String id_ = questionCate.getId();
            List answers_ = questionCate.getAnswers();
            String questionDetail_ = uicomponent.render(questionCate.getDetail());
        %>
          <div>
            <h5 class="titleWithBorder" name="$id_"><i class="uiIconMiniArrowDown uiIconLightGray"></i>$question_</h5>
            <% if (questionDetail_ != null && !questionDetail_.trim().isEmpty()) {
                 print "<div class='description'>" + questionDetail_ + "</div>";
            	 }
            %>
            <%for(answer in answers_){ 
               String answerValue = uicomponent.render(answer.getResponses());
               String viewProfile = _ctx.appRes("UIViewer.label.ViewProfile");
               String markVote = ((answer.getMarkVotes() > 0) ? "+" : "") + String.valueOf(answer.getMarkVotes());
            %>
              <div class="answers"><span>$answerValue</span>
								<div class="clearfix footerData">
									<div class="pull-right">		
										<a class="avatarMini" href="<%=uicomponent.event("ViewProfile", answer.getResponseBy())%>" data-placement="bottom" rel="tooltip" data-original-title="$viewProfile">
											<img alt="Avatar" width="16px" src="<%=FAQUtils.getUserAvatar(answer.getResponseBy())%>" alt="<%=_ctx.appRes("UIViewer.label.Avatar")%>"/>&nbsp;
											<span class="userName"><%=FAQUtils.getFullName(answer.getResponseBy())%></span>
										</a>
									</div>
									<div class="voteAnswerContainer">
										<span class="date"><%=uicomponent.convertXTimeAgo(answer.getDateResponse())%></span>&nbsp;<span>
											<i class="uiIconAnsThumbUpMini uiIconAnsLightGray"></i>
										</span>				
										<span>
											<i class="uiIconAnsThumbDownMini uiIconAnsLightGray"></i>
										</span>
										<span class="textVoteAnswer"><%=markVote%></span>				
									</div>
								</div>
             </div>
            <%} %>
          </div>
        <% } %>	
			</div>
			
      <!-- Questions in sub-categories -->
      <%for(categoryInfo in subCategoryInfos) { 
        String categoryName = FAQUtils.getSubString(categoryInfo.getName(), 20);
        tooltip = "rel=\"tooltip\" data-placement=\"bottom\" title=\"" + categoryInfo.getName() + "\"";
        List questionInfos = categoryInfo.getQuestionInfos();
        String id = categoryInfo.getId();
      %>
      <div class="answerList">
        <h5><span <%=tooltip%>>$categoryName</span></h5>
        <%for(questionInfo in questionInfos) {
          String question = questionInfo.getQuestion();
          question = uicomponent.render(question);
          List answers = questionInfo.getAnswers();
          String qsId = questionInfo.getId();
          String questionDetail_ = uicomponent.render(questionInfo.getDetail());
        %>
          <div>
            <h5 class="titleWithBorder" name="$qsId"><i class="uiIconMiniArrowDown uiIconLightGray"></i>$question</h5>
            <%
            if (questionDetail_ != null && !questionDetail_.trim().isEmpty()) 
            {
              print "<div class='description'>" + questionDetail_+ "</div>";    
            }
            %>
            <%for(answer in answers){ 
              String answerValue = uicomponent.render(answer.getResponses());
              String viewProfile = _ctx.appRes("UIViewer.label.ViewProfile");
              String markVote = ((answer.getMarkVotes() > 0) ? "+" : "") + String.valueOf(answer.getMarkVotes());
            %>
             <div class="answers"><span>$answerValue</span>
							<div class="clearfix footerData">
								<div class="pull-right">		
									<a class="avatarMini" href="<%=uicomponent.event("ViewProfile", answer.getResponseBy())%>" data-placement="bottom" rel="tooltip" data-original-title="$viewProfile">
										<img alt="Avatar" width="16px" src="<%=FAQUtils.getUserAvatar(answer.getResponseBy())%>" alt="<%=_ctx.appRes("UIViewer.label.Avatar")%>"/>&nbsp;
										<span class="userName"><%=FAQUtils.getFullName(answer.getResponseBy())%></span>
									</a>
								</div>
								<div class="voteAnswerContainer">
									<span class="date"><%=uicomponent.convertXTimeAgo(answer.getDateResponse())%></span>&nbsp;<span>
										<i class="uiIconAnsThumbUpMini uiIconAnsLightGray"></i>
									</span>				
									<span>
										<i class="uiIconAnsThumbDownMini uiIconAnsLightGray"></i>
									</span>
									<span class="textVoteAnswer">$markVote</span>				
								</div>
							</div>
             </div>
            <%} %>                  
          </div>
        <% } %>
      </div>
      <% } %>
		</div>
    <!-- End Anwser -->
    
    <%} %>
	</div>
</div>
<a rel="tooltip" onclick="" class="backtotop goUp pull-right" href="javascript:void(0);">
 <i class="uiIconGoUp uiIconLightGray"></i>
</a>