<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>
    <span style="padding-right: 20px" *ngIf="elements && elements.length">Total: {{elements.length}}</span>
    <button style="margin: 10px 0px" mdbBtn color="dark-green" outline="true" size="sm" class="waves-effect" mdbWavesEffect (click)="openNewVmTypeModal(null);">Add +</button>
</div>
<table mdbTable #tableEl="mdbTable" stickyHeader="true" hover="true" class="z-depth-1 table table-sm">
    <thead class="sticky-top">
        <tr>
            <th>Type</th>
            <th>Description</th> 
            <th>Cost/Hour ($)</th> 
            <th>Disabled?</th> 
            <th></th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let item of elements; let i = index">
            <td *ngIf="i+1 >= mdbTablePagination.firstItemIndex && i < mdbTablePagination.lastItemIndex"
                scope="row">{{item.type}}</td>  
            <td *ngIf="i+1 >= mdbTablePagination.firstItemIndex && i < mdbTablePagination.lastItemIndex">{{item.desc}}</td> 
            <td *ngIf="i+1 >= mdbTablePagination.firstItemIndex && i < mdbTablePagination.lastItemIndex">{{item.costHour}}</td>
            <td *ngIf="i+1 >= mdbTablePagination.firstItemIndex && i < mdbTablePagination.lastItemIndex">{{item.disabled}}</td>
            <td *ngIf="i+1 >= mdbTablePagination.firstItemIndex && i < mdbTablePagination.lastItemIndex">
                <button title="Edit" (click)="openNewVmTypeModal(item)" class="lui-button">
                    <span class="lui-icon lui-icon--edit" aria-hidden="true"></span>
                </button>
            </td>
        </tr>
    </tbody>
    <tfoot class="grey lighten-5 w-100">
        <tr>
            <td colspan="5">
                <mdb-table-pagination [tableEl]="tableEl" [searchDataSource]="elements"></mdb-table-pagination>
            </td>
        </tr>
    </tfoot>
</table>
