<div class="md-form">
    <input type="text" class="form-control w-25" [(ngModel)]="searchText" (keyup)="searchItems()" id="search-input2"
            mdbInput>
    <label for="search-input2">Search</label>
</div>
<div style="padding: 5px 0px;">   
    <span style="padding-right: 5px;" *ngIf="elements && elements.length">Total: {{totalCount}}</span><i>(showing last 300 results)</i> 
    
    <button style="margin: 10px 0px 10px 20px;" *ngIf="loading" mdbBtn color="grey" outline="true" type="button" size="sm" disabled mdbWavesEffect>
        <span>Refreshing...</span>
        <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
    </button>
    <button style="margin: 10px 0px 10px 20px;" *ngIf="!loading" (click)="refreshData();" mdbBtn type="button" size="sm" color="grey" outline="true" mdbWavesEffect>
        Refresh <mdb-icon fas icon="sync" class="ml-1" ></mdb-icon>
    </button>
</div>
<table mdbTable #tableEl="mdbTable" stickyHeader="true" hover="true" class="z-depth-1 table table-sm">
    <thead class="sticky-top">
        <tr>
            <th style="width: 155px;">Date</th>
            <th>Type</th> 
            <th>ProvisionID</th>
            <th>Message</th>    
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let item of elements; let i = index">
            <th *ngIf="i+1 >= mdbTablePagination.firstItemIndex && i < mdbTablePagination.lastItemIndex"
                scope="row">{{item.created | date: 'MMM dd, yyyy - H:mm'}}</th>     
            <td *ngIf="i+1 >= mdbTablePagination.firstItemIndex && i < mdbTablePagination.lastItemIndex">
                <span style="text-transform: capitalize;" class="badge" [ngClass]="{'badge-warning': item.type.indexOf('warning') !== -1, 'badge-secondary': item.type.indexOf('warning') === -1}">
                    {{item.type.replace("warning", "")}}
                </span>
                
            </td>
            <th *ngIf="i+1 >= mdbTablePagination.firstItemIndex && i < mdbTablePagination.lastItemIndex"><a href="#" class="lui-text-info" (click)="openInfoModal($event,item.provision)">{{item.provision}}</a></th>
            <td *ngIf="i+1 >= mdbTablePagination.firstItemIndex && i < mdbTablePagination.lastItemIndex">{{item.message}}</td>
        </tr>
    </tbody>
    <tfoot class="grey lighten-5 w-100">
        <tr>
            <td colspan="4">
                <mdb-table-pagination [tableEl]="tableEl" [searchDataSource]="elements"></mdb-table-pagination>
            </td>
        </tr>
    </tfoot>
</table>
