<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)="openNewSubsModal(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>_id</th>
            <th>Description</th>
            <th>Subscription ID</th> 
            <th mdbTooltip="Use subnets in existing VNet?"><mdb-icon fas icon="network-wired" class="grey-text" aria-hidden="true"></mdb-icon></th> 
            <th>Location</th>
            <th>Subnet ID</th> 
            <th>AppGw Subnet ID</th> 
            <th></th>      
        </tr>
    </thead>
    <tbody>
        <tr mdbTableCol *ngFor="let item of elements; let i = index">
            <th *ngIf="i+1 >= mdbTablePagination.firstItemIndex && i < mdbTablePagination.lastItemIndex"
                scope="row">{{item._id}}</th>
            <td *ngIf="i+1 >= mdbTablePagination.firstItemIndex && i < mdbTablePagination.lastItemIndex">{{item.description}}</td>
            <td *ngIf="i+1 >= mdbTablePagination.firstItemIndex && i < mdbTablePagination.lastItemIndex">{{item.subsId}}</td> 
            <td mdbTooltip="Use subnets in existing VNet?" style="width: 34px; text-align: center;" *ngIf="i+1 >= mdbTablePagination.firstItemIndex && i < mdbTablePagination.lastItemIndex"><mdb-icon *ngIf="item.vnetExists" fas icon="check"></mdb-icon></td>
            <td *ngIf="i+1 >= mdbTablePagination.firstItemIndex && i < mdbTablePagination.lastItemIndex">{{item.location}}</td> 
            <td *ngIf="i+1 >= mdbTablePagination.firstItemIndex && i < mdbTablePagination.lastItemIndex">{{item.subnetId}}</td> 
            <td *ngIf="i+1 >= mdbTablePagination.firstItemIndex && i < mdbTablePagination.lastItemIndex">{{item.appGwSubnetId}}</td> 
            <td *ngIf="i+1 >= mdbTablePagination.firstItemIndex && i < mdbTablePagination.lastItemIndex">
                <button title="Edit" (click)="openNewSubsModal(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="8">
                <mdb-table-pagination [tableEl]="tableEl" [searchDataSource]="elements"></mdb-table-pagination>
            </td>
        </tr>
    </tfoot>
</table>
