<nb-card>
  <nb-card-header>
    <h4>MD2 Hero Profile Maintenance</h4>
    <button class="float-right" kendoButton (click)="addHandler()" [primary]="true">
      <span class="k-icon k-i-plus"></span> Add New
    </button>

  </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()" (edit)="editHandler($event)"
      (remove)="removeHandler($event)" (add)="addHandler()">

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

      <kendo-grid-column field="title" title="Title" [width]="150">
      </kendo-grid-column>

      <kendo-grid-column field="heroClass" title="Hero Class" [width]="60">
        <ng-template kendoGridCellTemplate let-dataItem>
          {{ getHeroClassName(dataItem.heroClass) }}
        </ng-template>
        <ng-template kendoGridGroupHeaderTemplate let-value="value">
          {{ getHeroClassName(value) }}
        </ng-template>
      </kendo-grid-column>

      <kendo-grid-column field="hP" title="HP" [width]="80">
        <ng-template kendoGridCellTemplate let-dataItem>
          <md2-icon [icon]="MD2Icon.Mana_Color" size="sm"></md2-icon> {{ dataItem.mana }}
          <md2-icon [icon]="MD2Icon.HP_Color" size="sm"></md2-icon> {{ dataItem.hp }}
        </ng-template>
      </kendo-grid-column>

      <kendo-grid-column field="skill" title="Skill" [width]="500">
        <ng-template kendoGridCellTemplate let-dataItem>
          <div [innerHTML]="dataItem.skillHtml"></div>
          <div>
            <md2-icon [icon]="MD2Icon.Shadow" size="sm"></md2-icon> <b>Shadow:</b>
            <div [innerHTML]="dataItem.shadowSkillHtml"></div>
          </div>
        </ng-template>
      </kendo-grid-column>

      <kendo-grid-command-column title="Actions" [width]="140">
        <ng-template kendoGridCellTemplate let-isNew="isNew" let-dataItem="dataItem" let-rowIndex="rowIndex">
          <button kendoGridEditCommand [primary]="true">Edit</button>
          <button kendoGridRemoveCommand>Remove</button>
        </ng-template>
      </kendo-grid-command-column>
    </kendo-grid>
  </nb-card-body>
</nb-card>