<div style="background-color:#fff" class="menu-manage">
    <div class="page-nav-header">
        <div class="nav-header-container" style="line-height:70px;margin-left:20px">
            <button type="button" class="btn btn-default circle" ng-click="addMenu()">{{'AddNewMenu'|translate}}</button>
            <button type="button" class="btn btn-default circle" ng-click="deleteMenus()">{{'DeleteSelectedMenu'|translate}}</button>
           <!--{{set}}-->
        </div>

    </div>
    <div style="float:left">
        <script type="text/ng-template" id="tree_node_template">
            <div ng-if="menu.subMenus && menu.subMenus.length > 0" class="expander-container">
                <i class="fa fa-plus tree-i" aria-hidden="true" ng-click="toggle(this)" ng-class="{hidden: !collapsed}"></i>
                <i class="fa fa-minus tree-i" aria-hidden="true" ng-click="toggle(this)" ng-class="{hidden: collapsed}"></i>
            </div>
            <div ui-tree-handle>
                <input type="checkbox" ng-model="menu.isChecked" ng-click="toggleSub(menu)">
                <div class="tree-menu-item" ng-class="{active:selectedMenu == menu}" ng-bind-template="{{menu.name}}" ng-click="selectMenu(menu)"></div>
            </div>
            <ul ui-tree-nodes="" ng-model="menu.subMenus" ng-class="{hidden: collapsed}">
                <li ng-repeat="menu in menu.subMenus" ui-tree-node ng-include="'tree_node_template'">
                </li>
            </ul>
        </script>
        <div ui-tree data-drag-enabled="false" class="tree-view">
            <div class="form-group">
                <label for="name" class="control-label" translate="ServiceType"></label><br />
                <select class="form-control" style="width:92%" ng-model="selectedServiceType"
                        ng-options="item.name for item in serviceTypeList track by item.id" ng-change="updateMenus(selectedServiceType)">
                </select>
            </div>
            <div class="left-tree">
                <ul ui-tree-nodes="" ng-model="menuData" ng-show="showTree">
                    <li ng-repeat="menu in menuData" ui-tree-node ng-include="'tree_node_template'">

                    </li>
                </ul>
                <!--<input type="text" ng-model="bagSearch" ng-if="false"/>
                <div ivh-treeview="menuData"
                     ivh-treeview-filter="bagSearch"
                     ivh-treeview-on-label-select="selectMenu(ivhNode, ivhIsExpanded, ivhTree)">
                </div>-->
            </div>
        </div>
    </div>
    <div style="overflow:hidden;padding:20px;margin-top:25px;width:850px;" ng-show="editMenuModel != null">
        <form class="form-horizontal">
            <div class="form-group">
                <label for="name" class="col-sm-2 control-label" translate="Name"></label>
                <div class="col-sm-10">
                    <input type="text" id="name" class="form-control" ng-model="editMenuModel.name" placeholder="{{'Name'|translate}}">
                </div>
            </div>
            <div class="form-group">
                <label for="navigation-url" class="col-sm-2 control-label" translate="NavigationUrl"></label>
                <div class="col-sm-10">
                    <input type="text" id="navigation-url" class="form-control" ng-model="editMenuModel.navigationUrl" placeholder="{{'NavigationUrl'|translate}}">
                </div>
            </div>
            <div class="form-group">
                <label for="icon-class" class="col-sm-2 control-label" translate="IconName"></label>
                <div class="col-sm-10">
                    <input type="text" id="icon-class" class="form-control" ng-model="editMenuModel.iconClassName" placeholder="{{'IconName'|translate}}">
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-offset-2 col-sm-10">
                    <div class="checkbox">
                        <label><input type="checkbox" id="is-active" ng-model="editMenuModel.isActive"> {{'IsActive'|translate}}</label>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-offset-2 col-sm-10">
                    <div class="checkbox">
                        <label><input type="checkbox" id="is-visible" ng-model="editMenuModel.isVisible"> {{'IsDisplay'|translate}}</label>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-offset-2 col-sm-10">
                    <button type="button" class="btn btn-primary" ng-click="save()">{{'Save'|translate}}</button>
                    <button type="button" class="btn btn-default" ng-click="cancel()">{{'Cancel'|translate}}</button>
                </div>
            </div>
        </form>
    </div>
    <div class="clear"></div>
</div>