<kendo-grid
[kendoGridBinding]="gridView"
kendoGridSelectBy="id"
[selectedKeys]="mySelection"
[pageSize]="15"
[pageable]="true"
[sortable]="true"
[groupable]="false"
[reorderable]="true"
[resizable]="true"
[height] = "700"
class="fullheight_grid"
[columnMenu]="{ filter: true }"
>
<ng-template kendoGridToolbarTemplate>
    <input placeholder="Search in all columns..." kendoTextBox (input)="onFilter($event.target.value)"/>
    <button kendoGridExcelCommand type="button" icon="file-excel" style="float:right;">Export to Excel</button>
    <button kendoGridPDFCommand icon="file-pdf" style="float:right;">Export to PDF</button>
</ng-template>
<kendo-grid-checkbox-column
    [width]="45"
    [headerClass]="{'text-center': true}"
    [class]="{'text-center': true}"
    [resizable]="false"
    [columnMenu]="false"
    showSelectAll="true"
></kendo-grid-checkbox-column>
<kendo-grid-column-group title="People" [columnMenu]="false">
    <kendo-grid-column field="clients" title="Clients" [width]="220">
        <ng-template kendoGridCellTemplate let-dataItem>
            <div class="customer-photo" [ngStyle]="{'background-image' : photoURL(dataItem)}"></div>
            <div class="customer-name">{{ dataItem.full_name }}</div>
        </ng-template>
    </kendo-grid-column>
    <kendo-grid-column field="brokers" title="Brokers" [width]="220">
    </kendo-grid-column>
    <kendo-grid-column field="bdm" title="BDM/Referals" [width]="220">
    </kendo-grid-column>
    <kendo-grid-column
        field="country"
        title="Country"
        [width]="100"
        [class]="{'text-center': true}"
        [resizable]="false"
    >
        <ng-template kendoGridCellTemplate let-dataItem>
            <img class="flag" [src]="flagURL(dataItem)" width="30">
        </ng-template>
    </kendo-grid-column>
</kendo-grid-column-group>
<kendo-grid-column-group title="Loan Information" [columnMenu]="false">
    <kendo-grid-column field="status" title="Status" [width]="220">
    </kendo-grid-column>

    <kendo-grid-column
        field="status"
        title="Status"
        [width]="200"
        [class]="{'text-center': true}"
        [resizable]="false"
        filter="boolean"
    >
        <ng-template kendoGridCellTemplate let-dataItem>
            <span *ngIf="dataItem.status != 'none'" class="badge badge-success">{{dataItem.status}}</span>
        </ng-template>
    </kendo-grid-column>

    <kendo-grid-column
        field="loan_limit"
        title="Loan Limit"
        [width]="120"
        filter="numeric"
    >
        <ng-template kendoGridCellTemplate let-dataItem>
            <span [ngClass]="{'red text-bold': dataItem.loan_limit < 1000000}">{{ dataItem.loan_limit | currency }}</span>
        </ng-template>
    </kendo-grid-column>

    <kendo-grid-column field="lender" title="Lender" [width]="100">
    </kendo-grid-column>

    <!-- <kendo-grid-column
        field="is_online"
        title="is_online"
        [width]="100"
        [class]="{'text-center': true}"
        [resizable]="false"
        filter="boolean"
    >
        <ng-template kendoGridCellTemplate let-dataItem>
            <span *ngIf="dataItem.is_online === true" class="badge badge-success">Online</span>
            <span *ngIf="dataItem.is_online === false" class="badge badge-danger">Offline</span>
        </ng-template>
    </kendo-grid-column> -->

    <kendo-grid-column
        field="rating"
        title="Rating"
        [width]="110"
        [resizable]="false"
        filter="numeric"
    >
        <ng-template kendoGridCellTemplate let-dataItem>
            <app-biukop-rating
                [value]="dataItem.rating"
                [max]="5"
            ></app-biukop-rating>
        </ng-template>
    </kendo-grid-column>
    <kendo-grid-column
        field="target"
        title="Repayment Progress"
        [width]="230"
        [resizable]="false"
        filter="numeric"
    >
        <ng-template kendoGridCellTemplate let-dataItem>
            <kendo-sparkline type="bar"
                [data]="dataItem.target"
                [tooltip]="{visible: false}"
                [transitions]="true"
                [seriesDefaults]="{labels: {background: 'none', visible: true, format: '{0}%'}}"
            >
                <kendo-chart-area opacity="0" [width]="200"></kendo-chart-area>
                <kendo-chart-value-axis>
                    <kendo-chart-value-axis-item [min]="0" [max]="130">
                    </kendo-chart-value-axis-item>
                </kendo-chart-value-axis>
            </kendo-sparkline>
        </ng-template>
    </kendo-grid-column>
    <!-- <kendo-grid-column
        field="budget"
        title="Budget"
        [width]="100"
        filter="numeric"
    >
        <ng-template kendoGridCellTemplate let-dataItem>
            <span [ngClass]="{'red text-bold': dataItem.budget < 0}">{{ dataItem.budget | currency }}</span>
        </ng-template>
    </kendo-grid-column> -->
    <kendo-grid-column field="address" title="Address" [width]="200">
    </kendo-grid-column>
</kendo-grid-column-group>
<kendo-grid-column-group title="Dates" [columnMenu]="false">
    <kendo-grid-column field="submittsion_date" width="200" title="Submission Date">
        <ng-template kendoGridCellTemplate let-dataItem>
            {{dataItem.submittsion_date | date: 'yyyy-MM-dd'}}
        </ng-template>
    </kendo-grid-column>

    <kendo-grid-column field="settlement_date" width="200" title="Settlement Date">
        <ng-template kendoGridCellTemplate let-dataItem>
            {{dataItem.settlement_date | date: 'yyyy-MM-dd'}}
        </ng-template>
    </kendo-grid-column>
</kendo-grid-column-group>

<kendo-grid-pdf fileName="Transaction.pdf" [repeatHeaders]="true"></kendo-grid-pdf>
<kendo-grid-excel fileName="Transaction.xlsx"></kendo-grid-excel>

<div *kendoGridDetailTemplate="let dataItem">
    some details {{dataItem.id}}
    <trans-details [item]="dataItem"></trans-details>
</div>
</kendo-grid>
