
<%  
  import org.exoplatform.web.application.JavascriptManager;
  import org.exoplatform.commons.utils.ExpressionUtil;  
  import org.exoplatform.portal.webui.util.Util;
  import org.exoplatform.web.application.JavascriptManager;
  import org.exoplatform.commons.utils.HTMLEntityEncoder;

  def rcontext = _ctx.getRequestContext(); 
  ResourceBundle res = rcontext.getApplicationResourceBundle(); 
  JavascriptManager jsmanager = rcontext.getJavascriptManager();
  jsmanager.require("SHARED/bts_tab").require("SHARED/bts_dropdown","bts_dropdown");
  
  /** Trim the prefix UIContainer- if any, this hardcoded part is needed to update nested container via Ajax */
  String componentId = uicomponent.getId();
  if(componentId.startsWith("UIContainer-")){
    uicomponent.setId(componentId.substring("UIContainer-".length()));
  }
  
  def children = uicomponent.getChildren();
  
  if(children != null && children.size() > 0){
    boolean hasRenderedChild = false; 
    for(uiChild in children) {
      if(uiChild.isRendered()) {
        if(hasRenderedChild == true){
          hasRenderedChild = false;
          break;
        }
        hasRenderedChild = true;
      }
    }
    if(hasRenderedChild == false) {
      for(uiChild in children) {
          uiChild.setRendered(false);
      }
      uicomponent.getChild(0).setRendered(true);
    }
  }
  
  String uiComponentClass = uicomponent.getCssClass() == null ? "" : uicomponent.getCssClass();

  String id = uicomponent.getId();  
  def header = uicomponent.getTitle() != null ? _ctx.appRes(uicomponent.getTitle()) : null;
%>
<% if(children != null && children.size() > 0) { %>
<div id="$id" class="<%=uiComponentClass%>">
  <div class="VuetifyApp">
    <div id="tab$id">
      <% if(header != null){ %>
      <header>
        <div class="header">$header</div>
      </header>
      <%}%>
      <v-tabs v-model="tab"
        class="v-tabs theme--light v-item-group v-slide-group v-tabs-bar primary--text">
        <%
          int counter = 1;
          String tabClass = "v-tab--active";
          for(uiChild in uicomponent.getChildren()) {
            String status = "";  
            if(uiChild.isRendered()) status = "active";
            String title = uiChild.getTitle();
            String tabId = uiChild.getId();
            if(title == null || title.trim().length() < 1 ) {
               title = _ctx.appRes("UITabContainer.tab") + String.valueOf(counter);
                               uiChild.setTitle(title);
            }
            else title = _ctx.appRes(title);
            String selectTab = uicomponent.event("SelectTab", tabId);
            String tabState = uicomponent.getTabState(uiChild, uicomponent);
            title = HTMLEntityEncoder.getInstance().encode(title);
        %>
        <v-tab class="v-tab $tabClass">
          <a class="tabsTitle"><%=title%></a>
        </v-tab>
         <%
              counter++;
              tabClass = "";
          }
      %>
        <li class="AddTab" onclick="<%=uicomponent.event("AddTab")%>">
          <span class="uiIconLightGray uiIconSimplePlusMini"></span>
        </li>
      </v-tabs>
<%
     String style = "";
     String width = uicomponent.getWidth();
     String height  = uicomponent.getHeight();
     if(width != null || height != null) style="style=\"";
     if(width != null) style += "width: "+width+"px;"
     if(height != null) style += "height: "+height+"px;"
     if(style.length() > 0) style += "\"";
%>
      <v-tabs-items v-model="tab"
        class="v-window v-item-group theme--light v-tabs-items v-window__container">
      <%
      
      String tabItemClass = "v-window-item--active";
      String tabItemStyle = "";
      for(uiChild in uicomponent.getChildren()) {
        String active = "";
        if(uiChild.isRendered()) active = "in active";
    %> <v-tab-item eager class="v-window-item $tabItemClass"
        $tabItemStyle> <% uicomponent.renderUIComponent(uiChild);%>
      </v-tab-item> <%
        tabItemClass = "";
        tabItemStyle = "style='display: none;'";
      }
    %> </v-tabs-items>
    </div>
  </div>
  <% } %>

  <script type="text/javascript">
	require(['SHARED/vuetify'], function(vuetify){
    		  Vue.directive('custom-click-outside', {
                bind: function (el, binding, vnode) {
                  window.event = function (event) {
                    if (!(el === event.target || el.contains(event.target))) {
                      vnode.context[binding.expression](event);
                    }
                  };
                  document.body.addEventListener('click', window.event);
                },
                unbind: function (el) {
                  document.body.removeEventListener('click', window.event);
                }
              });
    		new Vue({
    			el: `#tab$id`,
    			vuetify: new Vuetify(),
    			data () {
    			    return {
    			      tab: null,
    			    }
    			},
                methods: {
                  closeDropDownList() {
                    const array = document.getElementsByClassName("menuable__content__active");
                    for (let i = 0; i < array.length; i++) {
                      array.item(i).style.display = "none";
                    }
                  }
                }
    		})
    	});
</script>