<app-logs [show]="logShow" (onClose)="onLogsClose()" [type]="logstype" [selectedprov]="selectedprov"></app-logs>
<div style="margin-top: 80px;">
    <h1>Provisions</h1>
    <h4 style="border-bottom: 1px solid #ccc;">Current</h4>
    <div *ngIf="provisions && provisions.length" class="flexcontainer">
        <div *ngFor="let provision of provisions; let i = index" class="box">
            <div class="title {{provision.status}} {{provision.statusVms}} {{provision.destroy? provision.destroy.status : ''}}">
                <div class="maintitle"><span *ngIf="provision._scenario && provision._scenario[0]">{{provision._scenario[0].title}}</span><span *ngIf="!provision._scenario || !provision._scenario[0]">Old scenario (please destroy)</span></div>
                <div class="subtitle">{{provision.scenario}} (v{{provision.scenarioVersion}})</div>
            </div>
            <div class="title desc {{provision.status}} {{provision.statusVms}} {{provision.destroy? provision.destroy.status : ''}}">
                <div mdbTooltip="{{provision.description}}" class="subtitle">{{provision.description}}</div>
            </div>
            <div class="contentbox">
                <div *ngIf="provision.statusVms">
                    VMs status: 
                    <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> 
                    ( Running time: 
                    <span style="font-weight: bold;" *ngIf="provision.runningDays">{{provision.runningDays}}d&nbsp;</span>
                    <span style="font-weight: bold;" *ngIf="provision.runningHours">{{provision.runningHours}}h&nbsp;</span>
                    <span style="font-weight: bold;">{{provision.runningMinutes}}m</span>&nbsp;)
                    
                </div>
                <div *ngIf="provision.statusVms === 'Running' || provision.statusVms === 'Stopping'">
                    VMs will Auto-Stop in ~
                    <span style="font-weight: bold;">
                        <span *ngIf="provision.autoshutdownDays">{{provision.autoshutdownDays}}d&nbsp;</span>
                        <span *ngIf="provision.autoshutdownHours">{{provision.autoshutdownHours}}h&nbsp;</span>
                        <span>{{provision.autoshutdownMinutes}}m</span>
                    </span>
                </div>
                <div *ngIf="provision.statusVms === 'Stopped' || provision.statusVms === 'Starting'">
                    VMs will Auto-Destroy in ~ 
                    <span style="font-weight: bold;">
                        <span *ngIf="provision.autoDestroyDays">{{provision.autoDestroyDays}}d&nbsp;</span>
                        <span *ngIf="provision.autoDestroyHours">{{provision.autoDestroyHours}}h&nbsp;</span>
                        <span>{{provision.autoDestroyMinutes}}m</span>
                    </span>
                    (Inactive for
                    <span>
                        <span *ngIf="provision.inactiveDays">{{provision.inactiveDays}}d&nbsp;</span>
                        <span *ngIf="provision.inactiveHours">{{provision.inactiveHours}}h&nbsp;</span>
                        <span>{{provision.inactiveMinutes}}m</span>
                    </span>)  
                </div>
                <hr>
                <div>
                    Provision ({{provision.created | date: 'MMM dd, yyyy - H:mm'}}h)
                    - 
                    <span>
                        <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>
                    </span>
                    - 
                    <a href (click)="showLogs($event, provision, 'provision')" class="lui-text-info">Logs</a>
                </div>
                <div *ngIf="provision.destroy">
                    Destroy ({{provision.destroy.created | date: 'MMM dd, yyyy - H:mm'}}h) 
                    - 
                    <span>
                        <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> 
                    - 
                    <a *ngIf="provision.destroy._id" href (click)="showLogs($event, provision, 'destroy')" class="lui-text-info">Logs</a>
                </div>
                
            </div>
            <div class="buttons">
                <button mdbTooltip="Provision information" style="margin-right: 5px;" class="lui-button" (click)="openModal(provision)">
                    <span class="lui-icon lui-icon--info" aria-hidden="true"></span>
                </button>
                <button style="margin-right: 5px;" mdbTooltip="Stop VMs" *ngIf="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: 5px;" mdbTooltip="Start VMs" *ngIf="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: 5px;" mdbTooltip="Extend Running period" *ngIf="provision.status === 'provisioned' && provision.statusVms === 'Running'" (click)="openConfirmExtendModal(provision)" class="lui-button">
                    <mdb-icon fas icon="plus-square"></mdb-icon>4d
                </button>
                <button style="float: right;" mdbTooltip="Destroy provision" *ngIf="!provision.isDestroyed && (provision.status === 'provisioned' || provision.status === 'error') && (!provision.destroy || provision.destroy.status !== 'destroying')" (click)="openConfirmDestroyModal(provision)" class="lui-button">
                    <span class="lui-icon lui-icon--remove lui-text-danger" aria-hidden="true"></span>
                </button>
                <button style="float: right;" mdbTooltip="Remove entry" *ngIf="(provision.isDestroyed && provision.destroy.status === 'destroyed') || provision.status === 'error_init' || provision.status === 'error_plan'" (click)="del(provision)" class="lui-button">
                    <span class="lui-icon lui-icon--bin lui-text-danger" aria-hidden="true"></span>
                </button>         
            </div>
        </div>
    </div>
    <div *ngIf="!provisions || provisions.length === 0">
        <p>There are no current Running provisions</p>
    </div>

    <h4 style="padding-top: 40px; border-bottom: 1px solid #ccc;" *ngIf="destroys && destroys.length">History</h4>
    <div *ngIf="destroys && destroys.length" class="flexcontainer">
        <div *ngFor="let provision of destroys; let i = index" class="box">
            <div class="title {{provision.status}} {{provision.destroy.status}}">
                <div class="maintitle"><span *ngIf="provision._scenario && provision._scenario[0]">{{provision._scenario[0].title}}</span><span *ngIf="!provision._scenario || !provision._scenario[0]">Old scenario (please delete)</span></div>
                <div class="subtitle">{{provision.scenario}} (v{{provision.scenarioVersion}})</div>
            </div>
            <div class="title desc {{provision.status}} {{provision.destroy.status}}">
                <div mdbTooltip="{{provision.description}}" class="subtitle">{{provision.description}}</div>
            </div>
            <div class="contentbox">
                <div>
                    Provision ({{provision.created | date: 'MMM dd, yyyy - H:mm'}}h)
                    - 
                    <span>
                        <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>
                    </span>
                    - 
                    <a href (click)="showLogs($event, provision, 'provision')" class="lui-text-info">Logs</a>
                </div>
                <div *ngIf="provision.destroy">
                    Destroy ({{provision.destroy.created | date: 'MMM dd, yyyy - H:mm'}}h) 
                    - 
                    <span>
                        <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> 
                    - 
                    <a *ngIf="provision.destroy" href (click)="showLogs($event, provision, 'destroy')" class="lui-text-info">Logs</a>
                </div>
                
            </div>
            <div class="buttons">
                <button style="margin-right: 5px;" mdbTooltip="Provision information" class="lui-button" (click)="openModal(provision)"><span class="lui-icon lui-icon--info" aria-hidden="true"></span></button>
                <button style="float:right;" mdbTooltip="Destroy provision" *ngIf="!provision.isDestroyed && (!provision.destroy || provision.destroy.status !== 'destroying') && provision.status !== 'provisioning'" (click)="openConfirmDestroyModal(provision)" class="lui-button"><span class="lui-icon lui-icon--remove lui-text-danger" aria-hidden="true"></span></button>
                <button style="float:right;" mdbTooltip="Remove entry" *ngIf="provision.isDestroyed && provision.destroy.status === 'destroyed'" (click)="del(provision)" class="lui-button"><span class="lui-icon lui-icon--bin lui-text-danger" aria-hidden="true"></span></button>
            </div>
        </div>
    </div>
</div>

<div style="margin-top: 40px; margin-bottom: 100px;">
    <h1>Scenarios</h1>
    <app-scenarios (onStartProvision)="onStartProvision($event)"></app-scenarios>
</div>

<qmi-alert></qmi-alert>