<div class="panel panel-default servicedeskAdm lt-module-page__content-panel position-relative">

    <div class="saveConfigurationButton abs-position">
        <button type="button" ng-click="vm.createEditCategory();" class="btn btn-success">{{'Create category' | translate}}</button>
    </div>

    <div class="panel-heading">{{'Categories' | translate}}</div>
    

    <ul class="list-group lt-tree" ng-repeat="siteType in vm.nestedSiteTypes | orderBy: 'name'" wizdom-include="'listTree'">

    </ul>

    <script type="text/ng-template" id="listTree">
        <li class="list-group-item lt-tree__item">
            <div class="lt-tree-item__title">
                <i style="padding-right:8px;" class="{{siteType.icon}}" title="{{siteType.name}}"></i>{{siteType.name}}
                
            </div>
            <div class="lt-tree-item__actions">
                <span class="streamline icon-hierarchy-files" aria-hidden="true" title="{{'New subcategory' | translate}}" ng-click="vm.createSubCategory(siteType);"></span>
                <span class="streamline icon-content-pencil-write" title="Edit metadata" ng-click="vm.selectSitetype(siteType)"></span>
                <span class="streamline icon-pencil-1" aria-hidden="true" title="{{'Edit' | translate}}" ng-click="vm.createEditCategory(siteType);"></span>
                <span class="streamline icon-bin-1" aria-hidden="true" title="{{'Delete' | translate}}" ng-style="{visibility: (!siteType.subCategories || siteType.subCategories.length === 0) ? 'visible':'hidden'}" ng-click="vm.deleteCategory(siteType)"></span>
            </div>
        </li>
        <ul class="list-group lt-tree lt-tree__child" ng-repeat="siteType in siteType.subCategories | orderBy: 'name'" wizdom-include="::'listTreeSub'"></ul>
    </script>


    <script type="text/ng-template" id="listTreeSub">
        <li class="list-group-item lt-tree__item">

            <div class="lt-tree-item__title">
                <i style="padding-right:8px;" class="{{siteType.icon}}" title="{{siteType.name}}"></i>{{siteType.name}}
                
            </div>
            <div class="lt-tree-item__actions">
                <span class="streamline icon-content-pencil-write" title="Edit metadata" ng-click="vm.selectSitetype(siteType)"></span>
                <span class="streamline icon-pencil-1" aria-hidden="true" title="{{'Edit' | translate}}" ng-click="vm.createEditCategory(siteType);"></span>
                <span class="streamline icon-bin-1" aria-hidden="true" title="{{'Delete' | translate}}" ng-style="{visibility: (!siteType.subCategories || siteType.subCategories.length === 0) ? 'visible':'hidden'}" ng-click="vm.deleteCategory(siteType)"></span>
            </div>

        </li>
    </script>

    
</div>
