<app-logs [show]="logShow" (onClose)="onLogsClose()" [type]="logstype" [selectedprov]="selectedprov"></app-logs>
<div style="margin-top: 80px;">

    <a class="lui-text-info" [routerLink]="['/admin', 'users']"><i class="fas fa-long-arrow-alt-left"></i> Back to Users</a>

    <div *ngIf="user" style="text-align: center;">
        <h1><img src="/photos/user/{{user.oid}}" (error)="onImgError($event, user)" style="border: 1px solid #ccc;width: 60px;" /> {{user.displayName}}</h1>
        <div>Id: {{user._id}}</div>
        <div>Email: {{user.upn}}</div>
        <div>Last Login: {{user.lastLogin | date: 'MMM dd, yyyy - H:mm'}}</div>
    </div>

    <h1>Provisions <span *ngIf="provisions && provisions.length">({{provisions.length}})</span></h1>
    <h4>Current</h4>
    <div *ngIf="provisions && provisions.length" class="flexcontainer">
        <div *ngFor="let provision of provisions; let i = index" class="box"> 
            <div class="title desc {{provision.status}} {{provision.statusVms}} {{provision.destroy? provision.destroy.status : ''}}">
                <div mdbTooltip="{{provision.description}}" class="subtitle">{{provision.description}}</div>
            </div>
            <div style="border-top: 1px dashed #fff;" class="title {{provision.status}} {{provision.statusVms}} {{provision.destroy? provision.destroy.status : ''}}">
                <div class="maintitle"><span *ngIf="provision._scenarioDoc">{{provision._scenarioDoc.title}}</span><span *ngIf="!provision._scenarioDoc">Old scenario (please destroy)</span></div>
                <div style="font-size: 14px;">{{provision.scenario}} (v{{provision.scenarioVersion}}) <span *ngIf="provision.scenarioVersion !== provision._scenarioDoc.version" class="text-danger newversion">New version available!</span></div>
            </div>
            <div class="contentbox">
                <div *ngIf="provision.vmImage && provision.vmImage.vm1">
                    <div *ngIf="provision.statusVms">
                        Current VMs status:&nbsp;
                        <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 === 'Stopped'"> (for {{provision.inactiveAsDays}})</span>
                    </div>
                    <div *ngIf="provision.statusVms">
                        <mdb-icon fas icon="play-circle"></mdb-icon> Accumulated Running Time: <span style="font-weight: bold;">{{provision.runningAsDays}}</span>
                    </div>  
                    <div *ngIf="provision.schedule && !provision.schedule.is24x7">
                        <span mdbTooltip="{{!provision.schedule.isStartupTimeEnable? 'Scheduled startup deactivated. Re-enable it in the schedule panel.' : ''}}" [ngClass]="{'linethrough': !provision.schedule.isStartupTimeEnable}" *ngIf="provision.statusVms === 'Stopped'">
                            <mdb-icon far icon="clock"></mdb-icon> VMs startup scheduled at <b>{{provision.schedule.localeStartupTime}}h</b> ({{provision.schedule.localTimezone}})
                        </span> 
                        <span *ngIf="provision.statusVms === 'Running'"><mdb-icon far icon="clock"></mdb-icon> VMs shutdown scheduled at <b>{{provision.schedule.localeShutdownTime}}h</b> ({{provision.schedule.localTimezone}})</span> 
                    </div>
                    
                    <!--<div *ngIf="provision.statusVms === 'Running' || provision.statusVms === 'Stopping'">
                        <div *ngIf="!provision.schedule || provision.schedule.is24x7">
                            VMs will run <b>nonstop</b> for <b>{{provision.autoshutdownAsDays}}</b><span *ngIf="provision.status === 'provisioned'"> - <a mdbTooltip="Renew 24x7 period" href (click)="openConfirmExtendModal($event, provision)"><mdb-icon fas icon="redo-alt"></mdb-icon></a></span>
                        </div>
                    </div>-->
                        
                    <!--<div *ngIf="provision.statusVms === 'Running' || provision.statusVms === 'Stopping'">
                        <mdb-icon *ngIf="provision.schedule && !provision.schedule.is24x7" fas icon="stopwatch"></mdb-icon> 
                        <span *ngIf="provision.schedule && !provision.schedule.is24x7"> Scheduled shutdown in ~ <span style="font-weight: bold;">{{provision.autoshutdownAsHours}}</span></span> 
                        
                    </div>-->
                    <div *ngIf="provision.statusVms === 'Stopped' || provision.statusVms === 'Starting'">
                        <span *ngIf="!provision.schedule || provision.schedule.is24x7 || (provision.schedule && !provision.schedule.is24x7 && !provision.schedule.isStartupTimeEnable)">
                            <mdb-icon fas icon="times-circle"></mdb-icon> Scheduled auto-destroy in ~ <b>{{provision.autoDestroyAsDays}}</b>
                        </span>
                    </div>
                    <hr>
                </div>
                <div>
                    Provision ({{provision.created | date: 'MMM dd, yyyy'}})
                    - 
                    <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'}}) 
                    - 
                    <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="Edit running schedule" *ngIf="provision._scenarioDoc.isDivvyEnabled && provision.status === 'provisioned'" (click)="openScheduleModal(provision)" class="lui-button">
                    <mdb-icon far icon="clock"></mdb-icon>
                </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="float: right;" mdbTooltip="Destroy provision" *ngIf="!provision.isDestroyed && (provision.status === 'provisioned' || provision.status === 'error' || provision.status === 'aborted') && (!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;" *ngIf="destroys && destroys.length">History <button mdbTooltip="Show/Hide History" (click)="toggleHistory()" class="lui-button"><span class="lui-icon lui-icon--triangle-{{history? 'top' : 'bottom'}}" aria-hidden="true"></span></button></h4>
    <div *ngIf="destroys && destroys.length && history" class="flexcontainer">
        <div *ngFor="let provision of destroys; let i = index" class="box">
            <div class="title desc {{provision.status}} {{provision.destroy.status}}">
                <div mdbTooltip="{{provision.description}}" class="subtitle">{{provision.description}}</div>
            </div>
            <div style="border-top: 1px dashed #bbb;" class="title {{provision.status}} {{provision.destroy.status}}">
                <div class="maintitle"><span *ngIf="provision._scenarioDoc">{{provision._scenarioDoc.title}}</span><span *ngIf="!provision._scenarioDoc">Old scenario (please delete)</span></div>
                <div style="font-size: 14px;">{{provision.scenario}} (v{{provision.scenarioVersion}})</div>
            </div>
            <div class="contentbox destroyed">
                <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>