text: <!-- #layout name=blank-->
  <div id="app">
    <div class="page-header">
      <h1 class="title">Product categories</h1>
    </div>
    <kb-breadcrumb :breads="breads"></kb-breadcrumb>
  
    <div class="panel panel-default panel-small">
      <div class="panel-heading">
        <a
          href="javascript:;"
          class="btn navbar-btn green"
          @click="onAddNewCategory"
          >Add new category</a
        >
        <template v-if="showFunctionBtn">
          <a
            href="javascript:;"
            class="btn navbar-btn green"
            @click="onAddNewSubCategory"
            >Add sub-category</a
          >
          <a href="javascript:;" class="btn navbar-btn green" @click="onEdit"
            >Edit</a
          >
          <a
            href="javascript:;"
            class="btn navbar-btn red"
            @click="removeCategory"
            >Delete</a
          >
        </template>
      </div>
      <div class="panel-body">
        <div id="categories"></div>
      </div>
    </div>
    <button class="btn green" v-show="isJsTreeChanged" @click="saveCategory"
      >Save</button
    >
  
    <div
      v-kb-modal="showMultilingualModal"
      class="modal fade"
      data-backdrop="static"
      data-keyboard="false"
    >
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button class="close" @click="onHideMultilingualModal"
              ><i class="fa fa-close"></i
            ></button>
            <h4 class="modal-title">Multilingual</h4>
          </div>
          <div class="modal-body" v-if="currentCateNames">
            <div
              class="form-group"
              v-for="($data, index) in cultureKeys"
              :key="index"
            >
              <label class="control-label"
                >{{ $data + ' - ' + cultures[$data] }}</label
              >
              <input
                type="text"
                class="form-control"
                v-model="currentCateNames[$data]"
              />
            </div>
          </div>
          <div class="modal-footer">
            <button class="btn green" @click="onSaveMultilingualModal"
              >Save</button
            >
            <button class="btn grey" @click="onHideMultilingualModal"
              >Cancel</button
            >
          </div>
        </div>
      </div>
    </div>
  </div>
  <script>
    (function() {
      Kooboo.loadJS([
        "/_Admin/Scripts/kooboo/Guid.js",
        "/_Admin/Scripts/lib/jstree.min.js",
        "/_Admin/Scripts/components/kbBreadcrumb.js"
      ]);
      Kooboo.loadCSS(["/_Admin/Styles/jstree/style.min.css"]);
    })();
  </script>
  <script src="/_Admin/View/ECommerce/Product/Categories.js"></script>
  