<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">
    <input type="text" class="form-control w-25" [(ngModel)]="searchText" (keyup)="searchItems()" id="search-input"
            mdbInput>
    <label for="search-input">Search</label>
</div>

<div style="padding: 5px 0px;">   
    <span style="padding-right: 20px;" *ngIf="elements && elements.length">Total: {{elements.length}}</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>ProvisionID</th>
            <th [mdbTableSort]="elements" sortBy="created" >Prov. Date <mdb-icon fas icon="sort"></mdb-icon></th>
            <th [mdbTableSort]="elements" sortBy="user.displayName">User <mdb-icon fas icon="sort"></mdb-icon></th>
            <th [mdbTableSort]="elements" sortBy="scenario">Scenario (v)<mdb-icon fas icon="sort"></mdb-icon></th>
            <th [mdbTableSort]="elements" sortBy="isExternalAccess">Ext. Access? <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="status">Status <mdb-icon fas icon="sort"></mdb-icon></th>
            <th style="border-left:2px solid #ccc;">DestroyID</th>
            <th>Dest. Date</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 (click)="openInfoModal(provision)" scope="row" *ngIf="pagingIsDisabled || (i+1 >= mdbTablePagination.firstItemIndex && i < mdbTablePagination.lastItemIndex)"> 
                <a href (click)="showLogs($event, provision, 'provision')" class="lui-text-info">{{ provision._id }}</a>
            </td>
            <td (click)="openInfoModal(provision)" *ngIf="pagingIsDisabled || (i+1 >= mdbTablePagination.firstItemIndex && i < mdbTablePagination.lastItemIndex)">{{provision.created | date: 'MMM dd, yyyy - H:mm'}}</td>
            <td (click)="openInfoModal(provision)" *ngIf="pagingIsDisabled || (i+1 >= mdbTablePagination.firstItemIndex && i < mdbTablePagination.lastItemIndex)" class="ell" title="{{provision.path}}" >{{provision.user.displayName}}</td>
            <td (click)="openInfoModal(provision)"*ngIf="pagingIsDisabled || (i+1 >= mdbTablePagination.firstItemIndex && i < mdbTablePagination.lastItemIndex)">{{provision.scenario}} (v{{provision.scenarioVersion}})</td>
            <td style="text-align: center;" (click)="openInfoModal(provision)"*ngIf="pagingIsDisabled || (i+1 >= mdbTablePagination.firstItemIndex && i < mdbTablePagination.lastItemIndex)"><mdb-icon *ngIf="provision.isExternalAccess" fas icon="check"></mdb-icon></td>
            <td (click)="openInfoModal(provision)" *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">(<span *ngIf="provision.runningDays">{{provision.runningDays}}d&nbsp;</span><span *ngIf="provision.runningHours">{{provision.runningHours}}h&nbsp;</span>{{provision.runningMinutes}}m)</span>
                <div style="font-size: 10px;" *ngIf="!provision.isDestroyed && provision.statusVms === 'Running'">
                    <i>VMs Auto-Stop in: </i>
                    <i>
                        <span *ngIf="provision.autoshutdownDays">{{provision.autoshutdownDays}}d&nbsp;</span>
                        <span *ngIf="provision.autoshutdownHours">{{provision.autoshutdownHours}}h&nbsp;</span>
                        <span>{{provision.autoshutdownMinutes}}m</span>
                    </i>
                </div>
                <div style="font-size: 10px;" *ngIf="!provision.isDestroyed && provision.statusVms === 'Stopped'">
                    <i>VMs Auto-Destroy in: </i>
                    <i>
                        <span *ngIf="provision.autoDestroyDays">{{provision.autoDestroyDays}}d&nbsp;</span>
                        <span *ngIf="provision.autoDestroyHours">{{provision.autoDestroyHours}}h&nbsp;</span>
                        <span>{{provision.autoDestroyMinutes}}m</span>
                    </i>
                </div>
            </td>
            <td (click)="openInfoModal(provision)" *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)" *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></td>
            <td (click)="openInfoModal(provision)" *ngIf="pagingIsDisabled || (i+1 >= mdbTablePagination.firstItemIndex && i < mdbTablePagination.lastItemIndex)" ><span *ngIf="provision.destroy">{{provision.destroy.created | date: 'MMM dd, yyyy - H:mm'}}</span></td>
            <td (click)="openInfoModal(provision)" *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="Stop Vms" *ngIf="!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.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')" (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="Extend Running VMs" *ngIf="!provision.isDestroyed && provision.status === 'provisioned' && provision.statusVms === 'Running'" (click)="openConfirmExtendModal(provision)" class="lui-button">
                    <mdb-icon fas icon="plus-square"></mdb-icon>4d
                </button>
            </td>
        </tr>
    </tbody>
    <tfoot class="grey lighten-5 w-100" [hidden]="pagingIsDisabled">
        <tr>
            <td colspan="11">
                <mdb-table-pagination [tableEl]="tableEl" [searchDataSource]="elements"></mdb-table-pagination>
            </td>
        </tr>
    </tfoot>
</table>
