<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: 20px;" *ngIf="elements && elements.length">Total: {{totalCount}}</span>
    <button style="margin: 10px 0px;" *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;" *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></th>
            <th>Id</th>
            <th [mdbTableSort]="elements" sortBy="created">Created <mdb-icon fas icon="sort"></mdb-icon></th>
            <th>Name</th>
            <th>Email</th>
            <th>Role</th>
            <th style="text-align: center;">Is Admin?</th>
            <th [mdbTableSort]="elements" sortBy="lastLogin">LastLogin <mdb-icon fas icon="sort"></mdb-icon></th>
        </tr>
    </thead>
    <tbody>
        <tr mdbTableCol *ngFor="let user of elements; let i = index">
            <td *ngIf="i+1 >= mdbTablePagination.firstItemIndex && i < mdbTablePagination.lastItemIndex">
               <img src="/photos/user/{{user.oid}}" (error)="onImgError($event, user)" style="border: 1px solid #ccc;width: 40px;" />
            </td>
            <td *ngIf="i+1 >= mdbTablePagination.firstItemIndex && i < mdbTablePagination.lastItemIndex"
                scope="row"><a [routerLink]="['/user', user._id]">{{user._id}}</a></td>
            <td *ngIf="i+1 >= mdbTablePagination.firstItemIndex && i < mdbTablePagination.lastItemIndex">{{user.created | date: 'MMM dd, yyyy - H:mm'}}</td>
            <td *ngIf="i+1 >= mdbTablePagination.firstItemIndex && i < mdbTablePagination.lastItemIndex">{{user.displayName}}</td>
            <td *ngIf="i+1 >= mdbTablePagination.firstItemIndex && i < mdbTablePagination.lastItemIndex">{{user.upn}}</td>
            <td *ngIf="i+1 >= mdbTablePagination.firstItemIndex && i < mdbTablePagination.lastItemIndex"><span>{{user.role}}</span></td>
            <td style="text-align: center;" *ngIf="i+1 >= mdbTablePagination.firstItemIndex && i < mdbTablePagination.lastItemIndex">
                <mdb-checkbox *ngIf="user.role !== 'superadmin' && currentUser && currentUser._id.toString() !== user._id.toString()" [checked]="user.role === 'admin' || user.role === 'superadmin'" [default]="false" (change)="FieldsChange(user, $event)"></mdb-checkbox>
            </td>
            <!--<td *ngIf="i+1 >= mdbTablePagination.firstItemIndex && i < mdbTablePagination.lastItemIndex">
                <div *ngIf="currentUser && currentUser._id.toString() !== user._id.toString()">    
                    <button *ngIf="user.role !== 'admin' && user.role !== 'superadmin'" class="lui-button" (click)="setAdmin(user)">Set Admin</button>
                    <button *ngIf="user.role === 'admin'" class="lui-button" (click)="removeAdmin(user)">Remove Admin</button>
                </div>
            </td>-->
            <td *ngIf="i+1 >= mdbTablePagination.firstItemIndex && i < mdbTablePagination.lastItemIndex"><span *ngIf="user.lastLogin">{{user.lastLogin | date: 'MMM dd, yyyy - H:mm'}}</span></td>
        </tr>
    </tbody>
    <tfoot class="grey lighten-5 w-100">
        <tr>
            <td colspan="8">
                <mdb-table-pagination [tableEl]="tableEl" [searchDataSource]="elements"></mdb-table-pagination>
            </td>
        </tr>
    </tfoot>
</table>
