<div class="modal-content">
    <div class="modal-header">
        <button type="button" class="close pull-right" aria-label="Close" (click)="modalRef.hide()">
        <span aria-hidden="true">×</span>
        </button>
        <h3 style="text-align: center;" class="modal-title w-100">
            {{info._scenarioDoc.title}}
            <div style="font-size: 16px;">{{info.scenario}} (v{{info.scenarioVersion}})</div>
        </h3>
    </div>
    <div class="modal-body">
        <div style="text-align: right;">
            <span class="mydata">{{info._id}}</span>
        </div>
        <div>
            <b>Purpose: </b> {{info.description}}
        </div>
        <div *ngIf="info.deployOpts">
            <b>Deployed into: </b> {{info.deployOpts.description}}
        </div>
        <div *ngIf="info.schedule">
            <mdb-icon far icon="clock"></mdb-icon>
            <span *ngIf="info.schedule.is24x7"> 24x7 <span *ngIf="info.countExtend">(times extended: {{info.countExtend}})</span></span>
            <span *ngIf="!info.schedule.is24x7"> Running on daily schedule: <span mdbTooltip="{{!info.schedule.isStartupTimeEnable? 'Scheduled startup deactivated. Re-enable it in the schedule panel.' : ''}}" [ngClass]="{'linethrough': !info.schedule.isStartupTimeEnable}">startup at <b>{{info.schedule.localeStartupTime}}h</b></span>, shutdown at <b>{{info.schedule.localeShutdownTime}}h</b> ({{info.schedule.localTimezone}})</span>
        </div>   
        <div *ngIf="!info.schedule">
            <mdb-icon far icon="clock"></mdb-icon> 24x7
        </div>     
        <div *ngIf="info.vmType && !info.vmImage">
            <mdb-icon fas icon="server"></mdb-icon> {{info.vmType}} <span *ngIf="info.nodeCount">( {{info.nodeCount}} nodes )</span>
        </div>
        <div *ngFor="let item of info.vmImage | keyvalue">
            <div *ngIf="!item.value.disabled">   
                <div *ngIf="item.value.version">
                    <div>
                        <mdb-icon fas icon="server"></mdb-icon> {{item.value.version.name}}
                    </div>
                    <div *ngIf="item.value.vmType" style="padding-left: 25px;">
                        <mdb-icon fas icon="long-arrow-alt-right"></mdb-icon> {{item.value.vmType}} <span *ngIf="item.value.diskSizeGb">( {{item.value.diskSizeGb}} GiB on disk ) </span> <span *ngIf="item.value.nodeCount">( {{item.value.nodeCount}} nodes )</span>
                    </div>
                </div>
                <div *ngIf="!item.value.version">
                    <div *ngIf="item.value.vmType">
                        <mdb-icon fas icon="server"></mdb-icon> {{item.value.vmType}} <span *ngIf="item.value.diskSizeGb">( {{item.value.diskSizeGb}} GiB on disk ) </span> <span *ngIf="item.value.nodeCount">( {{item.value.nodeCount}} nodes )</span>
                    </div>
                </div>
            </div>
        </div>
        <div *ngIf="info.isExternalAccess">
            <mdb-icon fas icon="globe-americas"></mdb-icon> External access enabled
        </div>
        <h5 *ngIf="info.outputs" class="info-subtitle">Connection resources</h5>
        <div *ngFor="let item of info.outputs | keyvalue">
            <b>{{item.key}}</b> 
            <div class="mydata">{{item.value}}</div>
        </div>
        <h5 *ngIf="events" class="info-subtitle">Events</h5>
        <table *ngIf="events" class="table table-sm">
            <tbody>
                <tr *ngFor="let item of events; let i = index">
                    <td style="min-width:120px;">{{item.created | date: 'MMM dd, yyyy - H:mm'}}</td>
                    <td style="min-width:130px;">{{item.type}}</td>
                    <td>{{item.message}}</td>
                </tr>
            </tbody>
        </table>
    </div>
    <div class="modal-footer">
        <button type="button" mdbBtn size="sm" color="grey" class="waves-light" aria-label="Close" (click)="modalRef.hide()" mdbWavesEffect>Close</button>
    </div>
</div>