<div class="blade-static">
  <div class="form-group">
    <div class="form-input __search">
      <input placeholder="{{'platform.placeholders.search-keyword' | translate}}" ng-model="filter.keyword" ng-keyup="$event.which === 13 && filter.criteriaChanged()" />
      <button class="btn __other" style="position: relative;right: 45px;">
        <i class="btn-ico fa fa-times-circle" title="Clear" ng-click="filter.keyword=null;filter.criteriaChanged()"></i>
      </button>
    </div>
  </div>
</div>
<div class="blade-static __bottom" ng-if="pageSettings.itemsPerPageCount < pageSettings.totalItems" ng-include="'pagerTemplate.html'"></div>
<div class="blade-content">
  <div class="blade-inner">
    <div class="inner-block" ng-init="setGridOptions({
                    useExternalSorting: true,
                    rowTemplate: 'dictionary-item.row.html',
                    data: 'currentEntities',
                    columnDefs: [
                            { name: 'actions', displayName: '', enableColumnResizing: false, enableSorting: false, width: 30, cellTemplate: 'list-actions.cell.html', pinnedLeft:true },
                            { name: 'alias', displayName: 'catalog.blades.property-dictionary.labels.alias' },
                            { name: 'colorCode', displayName: 'catalog.blades.property-dictionary.color-code.label', cellTemplate: 'dictionary-item.color.cell.html', visible: false },
                        ]})">
      <div class="table-wrapper" ng-if="currentEntities.length">
        <div ui-grid="gridOptions" ui-grid-auto-resize ui-grid-save-state ui-grid-selection ui-grid-resize-columns ui-grid-move-columns ui-grid-pinning ui-grid-height></div>
        <ul class="menu __context" role="menu" id="prop_dic_item_menu">
          <li class="menu-item" ng-click='selectNode(contextMenuEntity)'>
            <i class="menu-ico fa fa-edit"></i> {{'platform.commands.manage' | translate}}
          </li>
          <li class="menu-item" ng-click='deleteDictItem(contextMenuEntity)'>
            <i class="menu-ico fas fa-trash-alt"></i> {{'platform.commands.delete' | translate}}
          </li>
        </ul>
      </div>
      <div class="note" ng-if="!currentEntities.length">{{ 'platform.list.no-data' | translate }}</div>
    </div>
  </div>
</div>
<script type="text/ng-template" id="list-actions.cell.html">
  <div class="ui-grid-actions" left-click-menu="grid.appScope.contextMenuEntity = row.entity" data-target="prop_dic_item_menu">
    <i class="fa fa-ellipsis-v"></i>
  </div>
</script>
<script type="text/ng-template" id="dictionary-item.row.html">
  <div ng-click='grid.appScope.selectNode(row.entity)' ng-repeat="(colRenderIndex, col) in colContainer.renderedColumns track by col.uid" ui-grid-one-bind-id-grid="rowRenderIndex + '-' + col.uid + '-cell'" class="ui-grid-cell" ng-class="{'ui-grid-row-header-cell': col.isRowHeader, '__hovered': grid.appScope.contextMenuEntity === row.entity, '__selected': row.entity.alias===grid.appScope.selectedNodeId }" role="{{col.isRowHeader ? 'rowheader' : 'gridcell' }}" ui-grid-cell context-menu="grid.appScope.contextMenuEntity = row.entity" data-target="prop_dic_item_menu"></div>
</script>

<script type="text/ng-template" id="dictionary-item.color.cell.html">
  <div class="ui-grid-cell-contents" ng-if="row.entity.colorCode">
    <span class="fa fa-square" ng-style="{ 'color': row.entity.colorCode }"></span>
    <span>{{row.entity.colorCode}}</span>
  </div>
</script>
