<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)="openNewApiKeyModal(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 style="width: 155px;">Created</th>
            <th>User (role)</th> 
            <th>Description</th> 
            <th>Key</th> 
            <th>Is Active?</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.created | date: 'MMM dd, yyyy - H:mm'}}</td>  
            <td *ngIf="i+1 >= mdbTablePagination.firstItemIndex && i < mdbTablePagination.lastItemIndex">{{item.user.displayName}} ({{item.user.role}})</td> 
            <td *ngIf="i+1 >= mdbTablePagination.firstItemIndex && i < mdbTablePagination.lastItemIndex">{{item.description}}</td> 
            <td *ngIf="i+1 >= mdbTablePagination.firstItemIndex && i < mdbTablePagination.lastItemIndex">{{item.apiKey}}</td> 
            <td style="text-align: center;" *ngIf="i+1 >= mdbTablePagination.firstItemIndex && i < mdbTablePagination.lastItemIndex">
                <mdb-icon *ngIf="item.isActive" fas icon="check"></mdb-icon>
                <mdb-icon *ngIf="!item.isActive" class="red-text" fas icon="times"></mdb-icon>
            </td>  
            
            <td *ngIf="i+1 >= mdbTablePagination.firstItemIndex && i < mdbTablePagination.lastItemIndex">
                <button style="margin-right: 3px;" *ngIf="item.isActive" title="Revoke" (click)="openConfirmRevokeModal(item)" class="lui-button">
                    Revoke
                </button>
                <button style="margin-right: 3px;" *ngIf="!item.isActive" title="Delete" (click)="openConfirmDeleteModal(item)" class="lui-button">
                    <span class="lui-icon lui-icon--bin" 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>
