<div
  class="collapseMenu"
  id="collapseMenu"
  style="max-height: {{ tableheight ? tableheight : '' }}"
>
  <div class="panel-group" ng-model="cat.activePanel" bs-collapse>
    <div
      class="panel panel-primary "
      ng-repeat="tooc in tools"
      ng-if="tooc.modules.length>0"
    >
      <div class="panel-heading" ng-class="{'selected': currenttooc==tooc}">
        <h6 class="panel-title">
          <a ng-click="onCategorieClick(tooc)" bs-collapse-toggle>
            {{ tooc.categorie | translate }}
          </a>
        </h6>
      </div>
      <div class="panel-collapse" bs-collapse-target>
        <div class="panel-group" ng-model="panels.activePanel" bs-collapse>
          <div
            class="panel panel-info"
            ng-repeat="tool in tooc.modules track by $index"
          >
            <div class="panel-heading">
              <h6 class="panel-title">
                <widget-tooltip
                  url="widgetTooltips[tool.directive].wiki"
                ></widget-tooltip>
                <a ng-click="onclick(tool)" bs-collapse-toggle>
                  {{ tool.title | translate}}
                </a>
              </h6>
            </div>
            <div class="panel-collapse" bs-collapse-target>
              <div id="{{ tool.name | translate}}" class="panel-body">
                <div
                  id="{{ tool.name  | translate}}"
                  nghtmlcompile="tool.directive"
                ></div>
                <div
                  class="widgetDeprecie"
                  ng-if="!existingDirectives[tool.directive]"
                >
                  <i class="fa fa-warning"></i>
                  {{ 'deprecated_widget.label1' | translate }} <br />
                  {{ 'deprecated_widget.label2' | translate }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
