<div>
    <h2 class="title">{{fields.transferSlipTitle}}</h2>
    <div class="row show-grid">
        <div class="col-md-1 grid-title">{{fields.date}}</div>
        <div class="col-md-2">
            <wj-input-date [(value)]="data.date"
                           min="2016-01-01"
                           max="2016-12-31"
                           format="d">
            </wj-input-date>
        </div>
        <div class="col-md-2 grid-title">{{fields.slipNo}}</div>
        <div class="col-md-2">
            <input type="text" class="form-control" [(ngModel)]="data.slipNo" />
        </div>
        <div class="col-md-2 grid-title">{{fields.settlementTitle}}</div>
        <div class="col-md-2">
            <input type="text" class="form-control" [(ngModel)]="data.settlement" />
        </div>
    </div>
    <wj-multi-row #multiRow [itemsSource]="items">
    </wj-multi-row>
    <div class="row show-grid">
        <div style="width:125px;" class="summary-cell">{{fields.debtorSumTitle}}</div>
        <div style="width:125px;" class="summary-cell">{{debtorSum}}</div>
        <div style="width:125px;" class="summary-cell">{{fields.creditorSumTitle}}</div>
        <div style="width:125px;" class="summary-cell">{{creditorSum}}</div>
        <div style="width:110px;" class="summary-cell">{{fields.debtorCreditorBalanceTitle}}</div>
        <div style="width:100px;" class="summary-cell">{{balance}}</div>
    </div>
    <div class="pull-right btn-group">
        <button class="btn btn-default" [disabled]="pageIndex == 0" (click)="moveToFirstPage()">
            <span class="glyphicon glyphicon-fast-backward"></span>
        </button>
        <button class="btn btn-default" [disabled]="pageIndex == 0" (click)="moveToPreviousPage()">
            <span class="glyphicon glyphicon-backward"></span>
        </button>
        <button type="button" class="btn" disabled style="width:100px">
            {{pageIndex + 1 | number:'1.0-0'}} / {{pageCount | number:'1.0-0'}}
        </button>
        <button class="btn btn-default" [disabled]="pageIndex == pageCount - 1" (click)="moveToNextPage()">
            <span class="glyphicon glyphicon-forward"></span>
        </button>
        <button class="btn btn-default" [disabled]="pageIndex == pageCount - 1" (click)="moveToLastPage()">
            <span class="glyphicon glyphicon-fast-forward"></span>
        </button>
    </div>
    <div class="btn-group">
        <button class="btn btn-default" (click)="exportToExcel()">
            {{fields.exportXlsx}}
        </button>
        <button class="btn btn-default" (click)="exportToPDF()">
            {{fields.exportPDF}}
        </button>
    </div>
</div>
