<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: {{totalCount}}</span>
    <button style="margin: 10px 0px" mdbBtn color="dark-green" outline="true" size="sm" class="waves-effect" mdbWavesEffect (click)="openNewScenarioModal(null);">Add +</button>
</div>
<table mdbTable #tableEl="mdbTable" bordered="true" stickyHeader="true" hover="true" class="table table-sm">
    <thead class="sticky-top">
        <tr>
            <th style="width: 120px;">Name (v)</th>
            <th>Title (Labels)</th>
            <th style="width: 400px;">Description</th>
            <th>Deploy Opts</th>
            <th style="width: 400px;">AvailableProductVersions</th>
            <th mdbTooltip="isRestrictedAccess?" style="width: 34px; text-align: center;"><mdb-icon fas icon="lock" class="grey-text" aria-hidden="true"></mdb-icon></th>
            <th mdbTooltip="isExternal?" style="width: 34px; text-align: center;"><mdb-icon fas icon="globe-americas" class="grey-text" aria-hidden="true"></mdb-icon></th>
            <th mdbTooltip="isDivvyEnabled?" style="width: 34px; text-align: center;"><mdb-icon fas icon="clock" class="grey-text" aria-hidden="true"></mdb-icon></th>
            <th mdbTooltip="isWafPolicyAppGw?" style="width: 34px; text-align: center;"><mdb-icon fas icon="fire-extinguisher" class="grey-text" aria-hidden="true"></mdb-icon></th>
            <!--<th mdbTooltip="isVnetIsolated?" style="width: 34px; text-align: center;"><mdb-icon fas icon="network-wired" class="grey-text" aria-hidden="true"></mdb-icon></th>-->
            <th mdbTooltip="isDisabled?" style="width: 34px; text-align: center;"><mdb-icon fas icon="times-circle" class="grey-text" aria-hidden="true"></mdb-icon></th>
            <th>NewImageName(gen)</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.name}} (v{{item.version}})</td>
            <td *ngIf="i+1 >= mdbTablePagination.firstItemIndex && i < mdbTablePagination.lastItemIndex">
                {{item.title}}
                <div>
                    <i *ngIf="item.gitBranch" style="margin-right: 5px;" class="badge badge-info">git-branch: {{item.gitBranch}}</i>
                    <span style="margin-right: 5px;" *ngFor="let tag of item.labels" class="badge badge-secondary">{{tag}}</span>
                </div>
            </td>
            <td style="word-break: break-word;" class="tdflow" *ngIf="i+1 >= mdbTablePagination.firstItemIndex && i < mdbTablePagination.lastItemIndex">{{item.description}}</td>
            <td style="word-break: break-word;" *ngIf="i+1 >= mdbTablePagination.firstItemIndex && i < mdbTablePagination.lastItemIndex">
                <div>
                    <div *ngFor="let do of item.deployOpts">- {{do.description}}</div>
                </div>
            </td>
            <td  *ngIf="i+1 >= mdbTablePagination.firstItemIndex && i < mdbTablePagination.lastItemIndex"><pre>{{item.availableProductVersions | json}}</pre></td>
            <td mdbTooltip="isRestrictedAccess?" style="width: 34px; text-align: center;" *ngIf="i+1 >= mdbTablePagination.firstItemIndex && i < mdbTablePagination.lastItemIndex"><mdb-icon *ngIf="item.isAdminOnly || item.allowedUsers.length > 0" fas icon="check"></mdb-icon></td>
            <td mdbTooltip="isExternal?" style="width: 34px; text-align: center;" *ngIf="i+1 >= mdbTablePagination.firstItemIndex && i < mdbTablePagination.lastItemIndex"><mdb-icon *ngIf="item.isExternal" fas icon="check"></mdb-icon></td>
            <td mdbTooltip="isDivvyEnabled?" style="width: 34px; text-align: center;" *ngIf="i+1 >= mdbTablePagination.firstItemIndex && i < mdbTablePagination.lastItemIndex"><mdb-icon *ngIf="item.isDivvyEnabled" fas icon="check"></mdb-icon></td>
            <td mdbTooltip="isWafPolicyAppGw?" style="width: 34px; text-align: center;" *ngIf="i+1 >= mdbTablePagination.firstItemIndex && i < mdbTablePagination.lastItemIndex"><mdb-icon *ngIf="item.isWafPolicyAppGw" fas icon="check"></mdb-icon></td>
            <!--<td mdbTooltip="isVnetIsolated?" style="width: 34px; text-align: center;" *ngIf="i+1 >= mdbTablePagination.firstItemIndex && i < mdbTablePagination.lastItemIndex"><mdb-icon *ngIf="item.isVnetIsolated" fas icon="check"></mdb-icon></td>-->
            <td mdbTooltip="isDisabled?" style="width: 34px; text-align: center;" *ngIf="i+1 >= mdbTablePagination.firstItemIndex && i < mdbTablePagination.lastItemIndex"><mdb-icon *ngIf="item.isDisabled" fas icon="check"></mdb-icon></td>
            <td *ngIf="i+1 >= mdbTablePagination.firstItemIndex && i < mdbTablePagination.lastItemIndex">{{item.newImageName}}</td>
            <td *ngIf="i+1 >= mdbTablePagination.firstItemIndex && i < mdbTablePagination.lastItemIndex">
                <button title="Edit" (click)="openNewScenarioModal(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="12">
                <mdb-table-pagination [tableEl]="tableEl" [searchDataSource]="elements"></mdb-table-pagination>
            </td>
        </tr>
    </tfoot>
</table>
