<app-logs [show]="logShow" (onClose)="onLogsClose()" [type]="logstype" [selectedprov]="selectedprov"></app-logs>
<br>
<mdb-checkbox [inline]="true" [checked]="true" [default]="true" [(ngModel)]="filter.showDestroyed" (change)="onCheckValue()">Show destroyed</mdb-checkbox>
<div class="md-form">
    <div>
        <input type="text" class="form-control w-25" [(ngModel)]="searchText" (keyup)="searchItems()" id="search-input"
                mdbInput>
        <label for="search-input">Search</label>
    </div>
</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>
    <i style="float: right;font-size: 16px;font-weight: bold;">{{nowTimeUTC}} UTC</i>
</div>

<table mdbTable #tableEl="mdbTable" stickyHeader="true" hover="true" class="z-depth-1 table table-sm">
    <thead class="sticky-top white-text">
        <tr>
            <th style="width: 255px;">Provision ID</th>
            <th [mdbTableSort]="elements" sortBy="created" >Prov. Date <mdb-icon fas icon="sort"></mdb-icon></th>
            <th [mdbTableSort]="elements" sortBy="scenario">Scenario <mdb-icon fas icon="sort"></mdb-icon></th>
            <th [mdbTableSort]="elements" sortBy="deployOpts.location">Region <mdb-icon fas icon="sort"></mdb-icon></th>
            <th [mdbTableSort]="elements" sortBy="statusVms">VMs (Running time)<mdb-icon fas icon="sort"></mdb-icon></th>
            <th [mdbTableSort]="elements" sortBy="user.displayName">Owner <mdb-icon fas icon="sort"></mdb-icon></th>
            <th [mdbTableSort]="elements" sortBy="status">Status <mdb-icon fas icon="sort"></mdb-icon></th>
            <th style="border-left:2px solid #ccc;">Destroy ID</th>
            <th>Status</th>
            <th style="border-left:2px solid #ccc;">Actions</th>
        </tr>
    </thead>
    <tbody>
        <tr mdbTableCol *ngFor="let provision of elements; let i = index">
            <td scope="row" *ngIf="pagingIsDisabled || (i+1 >= mdbTablePagination.firstItemIndex && i < mdbTablePagination.lastItemIndex)"> 
                <a style="padding-right: 10px;" mdbTooltip="Open resource group in Azure" target="_blank" href="{{getAzureProvisionUrl(provision)}}" class="lui-text-info"><i class="fas fa-external-link-alt"></i></a>
                <a href (click)="showLogs($event, provision, 'provision')" class="lui-text-info">{{ provision._id }}</a>
                <div style="font-size: 10px;">{{provision.description}}</div>
            </td>
            <td (click)="openInfoModal(provision._id)" *ngIf="pagingIsDisabled || (i+1 >= mdbTablePagination.firstItemIndex && i < mdbTablePagination.lastItemIndex)">{{provision.created | date: 'dd-MM-yyyy H:mm'}}</td>
            <td (click)="openInfoModal(provision._id)" *ngIf="pagingIsDisabled || (i+1 >= mdbTablePagination.firstItemIndex && i < mdbTablePagination.lastItemIndex)">
                <div><mdb-icon mdbTooltip="External Access enabled" fas icon="globe-americas" *ngIf="provision.isExternalAccess" aria-hidden="true"></mdb-icon> {{provision.scenario}}</div>
                <div style="font-size: 10px;">v{{provision.scenarioVersion}}</div>
            </td>
            <td (click)="openInfoModal(provision._id)" *ngIf="pagingIsDisabled || (i+1 >= mdbTablePagination.firstItemIndex && i < mdbTablePagination.lastItemIndex)">
                <div *ngIf="provision.deployOpts">{{provision.deployOpts.location}}</div>
                <div *ngIf="!provision.deployOpts">East US</div>
            </td>
            <td (click)="openInfoModal(provision._id)" *ngIf="pagingIsDisabled || (i+1 >= mdbTablePagination.firstItemIndex && i < mdbTablePagination.lastItemIndex)">
                <span>
                    <span style="text-transform: capitalize;" class="badge badge-secondary" [ngClass]="{'badge-success': provision.statusVms === 'Running', 'badge-warning': provision.statusVms === 'Stopped' || provision.statusVms === 'Stopping' || provision.statusVms === 'Starting'}">{{provision.statusVms}}</span>
                    <span *ngIf="provision.statusVms === 'Starting' || provision.statusVms === 'Stopping'" class="spinner-border spinner-border-sm text-warning" role="status">
                        <span class="sr-only"></span>
                    </span>
                </span> 
                <span *ngIf="provision.statusVms" mdbTooltip="As hours: {{provision.runningAsHours}}">({{provision.runningAsDays}})</span>
                <div style="font-size: 10px;" *ngIf="!provision.isDestroyed && provision.statusVms === 'Running'">
                    <i *ngIf="provision.schedule && !provision.schedule.is24x7"><mdb-icon far icon="clock"></mdb-icon> Shutdown at: {{provision.schedule.utcTagShutdownTime}} UTC</i>
                    <i *ngIf="!provision.schedule || provision.schedule.is24x7"><mdb-icon fas icon="stop-circle"></mdb-icon> Shutdown in: {{provision.autoshutdownAsHours}}</i>
                </div>
                <div style="font-size: 10px;" *ngIf="!provision.isDestroyed && provision.statusVms === 'Stopped'">
                    <i *ngIf="!provision.schedule || provision.schedule.is24x7"><mdb-icon fas icon="times-circle"></mdb-icon> Destroy in: {{provision.autoDestroyAsDays}}</i>
                    <i [ngClass]="{'linethrough': provision.schedule && !provision.schedule.isStartupTimeEnable}" *ngIf="provision.schedule && !provision.schedule.is24x7"><mdb-icon far icon="clock"></mdb-icon> Startup at: {{provision.schedule.utcTagStartupTime}} UTC</i>
                    <i style="display: block;" *ngIf="provision.schedule && !provision.schedule.is24x7 && !provision.schedule.isStartupTimeEnable"><mdb-icon fas icon="times-circle"></mdb-icon> Destroy in: {{provision.autoDestroyAsDays}}</i>
                </div>
            </td>
            <td *ngIf="pagingIsDisabled || (i+1 >= mdbTablePagination.firstItemIndex && i < mdbTablePagination.lastItemIndex)" class="ell" >
                <a href="/user/{{provision.user._id}}" target="_blank" class="lui-text-info" title="Go to User">{{provision.user.displayName}}</a>
                <a style="padding-left: 8px;" href (click)="openOwnerChange($event, provision)" class="fa fa-pencil" title="Change owner and more"></a>
            </td>
            <td (click)="openInfoModal(provision._id)" *ngIf="pagingIsDisabled || (i+1 >= mdbTablePagination.firstItemIndex && i < mdbTablePagination.lastItemIndex)">
                <span style="text-transform: capitalize;" class="badge badge-secondary" [ngClass]="{'badge-warning': provision.status === 'provisioning' || provision.status === 'initializing', 'badge-success': provision.status === 'provisioned', 'badge-danger': (provision.status === 'error' || provision.status === 'error_init' || provision.status === 'error_plan') }">{{provision.status}}</span>
                <span *ngIf="provision.status === 'provisioning' || provision.status === 'initializing'" class="spinner-border spinner-border-sm text-warning" role="status">
                    <span class="sr-only"></span>
                </span>
            </td>
            
            <td (click)="openInfoModal(provision._id)" *ngIf="pagingIsDisabled || (i+1 >= mdbTablePagination.firstItemIndex && i < mdbTablePagination.lastItemIndex)" style="border-left:2px solid #ccc;">
                <a *ngIf="provision.destroy" href (click)="showLogs($event, provision, 'destroy')" class="lui-text-info">{{provision.destroy._id}}</a>
                <div style="font-size: 10px;" *ngIf="provision.destroy">{{provision.destroy.created | date: 'dd-MM-yyyy H:mm'}}</div>
            </td>
            <td (click)="openInfoModal(provision._id)" *ngIf="pagingIsDisabled || (i+1 >= mdbTablePagination.firstItemIndex && i < mdbTablePagination.lastItemIndex)">
                <span *ngIf="provision.destroy">
                    <span style="text-transform: capitalize;" class="badge badge-secondary" [ngClass]="{'badge-warning': provision.destroy.status === 'destroying', 'badge-success': provision.destroy.status === 'destroyed', 'badge-danger': provision.destroy.status === 'error'}">{{provision.destroy.status}}</span>
                    <span *ngIf="provision.destroy.status === 'destroying'" class="spinner-border spinner-border-sm text-warning" role="status">
                        <span class="sr-only"></span>
                    </span>
                </span>
            </td>
            
            <!--<td><span *ngIf="provision.isDestroyed" class="lui-icon lui-icon--tick lui-text-success"></span></td>-->
            <td style="border-left:2px solid #ccc;" *ngIf="pagingIsDisabled || (i+1 >= mdbTablePagination.firstItemIndex && i < mdbTablePagination.lastItemIndex)">
                <!--<button style="margin-right: 3px;" title="Provision info" class="lui-button" (click)="openInfoModal(provision)">
                    <span class="lui-icon lui-icon--info" aria-hidden="true"></span>
                </button>-->
                <button style="margin-right: 3px;" title="Abort provision" *ngIf="!provision.isDestroyed && provision.status === 'provisioning'" (click)="openConfirmAbortModal(provision)" class="lui-button lui-text-danger">
                    Abort
                </button>
                <button style="margin-right: 3px;" title="Stop Vms" *ngIf="provision.vmImage && provision.vmImage.vm1 && !provision.isDestroyed && provision.status === 'provisioned' && provision.statusVms === 'Running'" (click)="openConfirmStopModal(provision)" class="lui-button">
                    <span class="lui-icon lui-icon--stop" aria-hidden="true"></span>
                </button>
                <button style="margin-right: 3px;" title="Start Vms" *ngIf="provision.vmImage && provision.vmImage.vm1 && !provision.isDestroyed && provision.status === 'provisioned' && provision.statusVms === 'Stopped'" (click)="openConfirmStartModal(provision)" class="lui-button">
                    <span class="lui-icon lui-icon--run" aria-hidden="true"></span>
                </button>
                <button style="margin-right: 3px;" title="Destroy provision" *ngIf="!provision.isDestroyed && (!provision.destroy || provision.destroy.status !== 'destroying') && (provision.status === 'provisioned' || provision.status === 'error' || provision.status === 'aborted' )" (click)="openConfirmDestroyModal(provision)" class="lui-button lui-text-danger">
                    <span class="lui-icon lui-icon--remove" aria-hidden="true"></span>
                </button>
                <button style="margin-right: 3px;" title="Remove entry" *ngIf="(provision.isDestroyed && provision.destroy.status === 'destroyed') || provision.status === 'error_init' || provision.status === 'error_plan'" (click)="openConfirmDeleteModal(provision);" class="lui-button lui-text-danger">
                    <span class="lui-icon lui-icon--bin" aria-hidden="true"></span>
                </button>
                <button style="margin-right: 3px;" title="Renew 24x7 period" *ngIf="(!provision.isDestroyed && provision.status === 'provisioned' && provision.statusVms === 'Running') && (!provision.schedule || provision.schedule.is24x7)" (click)="openConfirmExtendModal(provision)" class="lui-button">
                    <mdb-icon fas icon="redo-alt"></mdb-icon>
                </button>
            </td>
        </tr>
    </tbody>
    <tfoot class="grey lighten-5 w-100" [hidden]="pagingIsDisabled">
        <tr>
            <td colspan="10">
                <mdb-table-pagination [tableEl]="tableEl" [searchDataSource]="elements"></mdb-table-pagination>
            </td>
        </tr>
    </tfoot>
</table>