<form #form="ngForm">
    <div class="ui-g ui-fluid">
        <div class="ui-g-12 nopad">
            <p-toolbar>
                <div class="ui-toolbar-group-left">
                    Matrices Report
                </div>
            </p-toolbar>
        </div>
    </div>
    <div class="ui-g form-group">
        <div class="ui-g-12 ui-md-1">
            <label>Date</label>
        </div>
        <div class="ui-g-12 ui-md-3 ui-fluid">
            <p-calendar [(ngModel)]="report.Date" name="Date{{report.ObjectID}}" fieldLabel="Date" [showIcon]="true" dataType="string" dateFormat="dd-mm-yy" [showTime]="false"></p-calendar>
        </div>
        <div class="ui-g-12 ui-md-1">
            <label>To</label>
        </div>
        <div class="ui-g-12 ui-md-3 ui-fluid">
            <p-calendar [(ngModel)]="report.To" name="To{{report.ObjectID}}" fieldLabel="To" [showIcon]="true" dataType="string" dateFormat="dd-mm-yy" [showTime]="false"></p-calendar>
        </div>
    </div>
    <div class="ui-g form-group">
        <div class="ui-g-12 ui-md-1">
            <label>Coupon</label>
        </div>
        <div class="ui-g-12 ui-md-3 ui-fluid">
            <p-autoComplete [(ngModel)]="report.Coupon" name="Coupon{{report.ObjectID}}" fieldLabel="Coupon" field="XXXX" [suggestions]="coupons" (completeMethod)="autoCompleteCoupon($event)" 
                (onClear)="this.report.Coupon = null" [forceSelection]="true" [minLength]="0"></p-autoComplete>
        </div>
        <div class="ui-g-12 ui-md-4">
            <label> The coupon filter is applies only to Subscription Revenue & One-Off Revenue values </label>
        </div>
    </div>
    <div class="ui-g form-group">
        <div class="ui-g-12 ui-md-1 ui-fluid">
            <p-button label="Export"></p-button>
        </div>
        <div class="ui-g-12 ui-md-3 ui-fluid">
            <p-button label="Clear"></p-button>
        </div>
        <div class="ui-g-12 ui-md-1 ui-fluid">
            <p-button label="Search"></p-button>
        </div>
    </div>
    <h4></h4><br/>
    <p-table #bosTable [columns]="bosCols" [value]="bos" [paginator]="false" >
        <ng-template pTemplate="colgroup" let-columns>
            <colgroup>
                <col *ngFor="let col of columns" [style.width]="col.width">
            </colgroup>
        </ng-template>
        <ng-template pTemplate="header" let-columns>
            <tr>
                <th *ngFor="let col of columns" [pSortableColumn]="col.field" [pSortableColumnDisabled]="col.noSort">
                    {{col.header}}
                    <p-sortIcon [field]="col.field" *ngIf="!col.noSort"></p-sortIcon>
                </th>
            </tr>
            <tr>
                <th *ngFor="let col of columns">
                    <input *ngIf="!col.noFilter" pInputText type="text" (input)="bosTable.filter($event.target.value, col.field, 'contains')">
                </th>
            </tr>
        </ng-template>
        <ng-template pTemplate="body" let-rowData let-rowIndex="rowIndex">
            <tr>
                <td>
                    {{rowData.Date}}
                </td>
                <td>
                    {{rowData.NumberofCareerSeekers}}
                </td>
                <td>
                    {{rowData.NumberofPremiumCareerSeekers}}
                </td>
                <td>
                    {{rowData.RenewalsDue}}
                </td>
                <td>
                    {{rowData.SubscriptionRevenue}}
                </td>
                <td>
                    {{rowData.OneOffRevenue}}
                </td>
            </tr>
        </ng-template>
    </p-table>
    <p-progressSpinner *ngIf="showLoader"></p-progressSpinner>
</form>