<kendo-grid [data]="gridData"
            (add)="addHandler($event)"
            (cancel)="cancelHandler($event)"
            (save)="saveHandler($event)"
            (edit)="editHandler($event)"
            (remove)="removeHandler($event)"
>
  <ng-template kendoGridToolbarTemplate>
    <div style="width:100%; margin:0px; display:block">
      <div *ngIf="allowAddNew" class="add-new-tool-bar">
        <button kendoGridAddCommand icon="plus" >Add new Income</button>
      </div>
      <div [ngStyle]="{'width': allowAddNew? '70%': '100%'}" class="filter-panel-wrapper" >
          <button kendoButton icon="filter" >Loan</button>
          <button kendoButton icon="filter" >Upload</button>
      </div>
    </div>
  </ng-template>

  <kendo-grid-command-column *ngIf="allowEdit" title="command" width="100">
    <ng-template kendoGridCellTemplate let-isNew="isNew" let-dataItem>
      <button kendoGridEditCommand *ngIf="!dataItem.Uploads !== 0" icon="edit"></button>
      <button kendoGridRemoveCommand *ngIf="!dataItem.Uploads !== 0" icon="delete"></button>
      <button kendoGridSaveCommand [disabled]="incomeFormGroup?.invalid" icon="save"></button>
      <button kendoGridCancelCommand icon="cancel"></button>
    </ng-template>
  </kendo-grid-command-column>

  <kendo-grid-column field="Id" title="Id" width="50" editable="false">
  </kendo-grid-column>

  <kendo-grid-column field="Trail" title="Trail Received" width="200" format="{0:c}" editor="numeric">
  </kendo-grid-column>

  <kendo-grid-column field="Ts" title="Trail Date" editor="date">
    <ng-template kendoGridCellTemplate let-dataItem>
      {{ dataItem.Ts | date: 'yyyy-MM-dd' }}
    </ng-template>
  </kendo-grid-column>

  <kendo-grid-column field="Balance" title="Balance" width="220">
    <ng-template kendoGridCellTemplate let-dataItem>
      <div *ngIf="dataItem.Balance >=0 "> {{ dataItem.Balance | currency}} </div>
      <div *ngIf="dataItem.Balance < 0 "> unknown  </div>
    </ng-template>
    <ng-template kendoGridEditTemplate
                 let-dataItem="dataItem"
                 let-formGroup="formGroup">

      <kendo-switch [checked]="dataItem.Balance >=0"
                    name="showBalance" [(ngModel)]="showBalance"
                    ngModelOptions="{standalone: true}"
                    [onLabel]="'Yes'"
                    [offLabel]="'No'"
      >
      </kendo-switch>

      <kendo-numerictextbox  *ngIf="showBalance" name="balance" [formControl]="formGroup.get('Balance')"
                             [min]="-1" [max]="999999999" [autoCorrect]="true" class="balance">
      </kendo-numerictextbox>
    </ng-template>

  </kendo-grid-column>

  <kendo-grid-column field="OffsetBalance" title="Offset" width="200" >
    <ng-template kendoGridCellTemplate let-dataItem>
      <div *ngIf="dataItem.OffsetBalance >=0 "> {{ dataItem.OffsetBalance | currency}} </div>
      <div *ngIf="dataItem.OffsetBalance < 0 "> unknown  </div>
    </ng-template>
    <ng-template kendoGridEditTemplate
                 let-dataItem="dataItem"
                 let-formGroup="formGroup">

      <kendo-switch [checked]="dataItem.OffsetBalance >=0"
                    name="showOffsetBalance" [(ngModel)]="showOffsetBalance"
                    ngModelOptions="{standalone: true}"
                    [onLabel]="'Yes'"
                    [offLabel]="'No'"
      >
      </kendo-switch>

      <kendo-numerictextbox  *ngIf="showOffsetBalance" name="offsetBalance"
                             [formControl]="formGroup.get('OffsetBalance')"
                             [min]="-1" [max]="999999999" [autoCorrect]="true" class="balance">
      </kendo-numerictextbox>
    </ng-template>
  </kendo-grid-column>

  <kendo-grid-column field="UploadId" title="Uploads" width="100" format="{0:c}" editable="false">
    <ng-template kendoGridCellTemplate let-dataItem let-rowIndex="rowIndex" >
      <button kendoButton *ngIf="dataItem.UploadId > 0" (click)="showUpload(dataItem.UploadId)" icon="attachment"> {{ dataItem.UploadId }}
      </button>
      <p *ngIf="dataItem.Uploads <=0" align="center"> - </p>
    </ng-template>
  </kendo-grid-column>

  <kendo-grid-column field="LoanId" title="Loan" width="80">
    <ng-template kendoGridCellTemplate let-dataItem>
      <button kendoButton [icon]="'page-properties'" (click)="gotoLoan(dataItem.LoanId)" > </button>
    </ng-template>
  </kendo-grid-column>

</kendo-grid>
