<nb-card>
  <nb-card-header>
    <h4>MD2 Mob Info Maintenance</h4>
    <div class="float-right">
      <button kendoButton (click)="addHandler()" [primary]="true">
        <span class="k-icon k-i-plus"></span> Add New
      </button>
    </div>
  </nb-card-header>
  <nb-card-body>
    <kendo-grid #grid [data]="gridData" [loading]="isLoading" [pageSize]="gridState.take" [skip]="gridState.skip"
      [group]="gridState.group" [filter]="gridState.filter" [sort]="gridState.sort" [sortable]="true"
      [filterable]="true" [pageable]="true" [selectable]="true" [groupable]="true"
      (dataStateChange)="gridState = $event; processGridData()">

      <kendo-grid-toolbar>
        <button kendoGridAddCommand>Add new</button>
      </kendo-grid-toolbar>

      <kendo-grid-column field="name" title="Name" [width]="200">
      </kendo-grid-column>

      <kendo-grid-column field="type" title="Type" [width]="1">
        <ng-template kendoGridCellTemplate let-dataItem>
          <ng-template kendoGridCellTemplate let-dataItem>
            {{ getMobTypeName(dataItem.type) }}
          </ng-template>
          <ng-template kendoGridGroupHeaderTemplate let-value="value">
            {{ getMobTypeName(value) }}
          </ng-template>
        </ng-template>
      </kendo-grid-column>

      <kendo-grid-column field="from" title="Game Bundle" [width]="150">
        <ng-template kendoGridCellTemplate let-dataItem>
          {{ getGameBundleName(dataItem.from) }}
        </ng-template>
      </kendo-grid-column>

      <kendo-grid-column field="leaderImgUrl" title="Leader Image" [width]="200">
      </kendo-grid-column>

      <kendo-grid-column field="minionImgUrl" title="Minion Image" [width]="200">
      </kendo-grid-column>

      <kendo-grid-command-column title="Actions" [width]="250">
        <ng-template kendoGridCellTemplate let-isNew="isNew" let-dataItem="dataItem" let-rowIndex="rowIndex">
          <button kendoGridEditCommand [primary]="true">Edit</button>
          <button kendoGridRemoveCommand>Remove</button>
          <button kendoButton (click)="viewDetailHandler({ dataItem })" [look]="'flat'">
            View Details
          </button>
        </ng-template>
      </kendo-grid-command-column>
    </kendo-grid>
  </nb-card-body>
</nb-card>