<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">Provision information</h3>
    </div>
    <div class="modal-body">
        <div>
            <b>ProvisionID: </b> <span class="mydata">{{info._id}}</span>
        </div>
        <div>
            <b>Purpose: </b> {{info.description}}
        </div>
        <div>
            <b>Scenario: </b> {{info._scenario[0].title}} <span *ngIf="info.isExternalAccess">( External Access is enabled )</span>
        </div>
        
        <div *ngIf="info.vmType && !info.vmImage">
            <b>Instance Type: </b> {{info.vmType}} <span *ngIf="info.nodeCount">( {{info.nodeCount}} nodes )</span>
        </div>
        <div *ngFor="let item of info.vmImage | keyvalue">
            <div *ngIf="item.value.version">
                <b>Product version: </b> <span>{{item.value.version.name}}</span>
            </div>
            <div *ngIf="item.value.vmType" >
                <b>Instance Type: </b> <span>{{item.value.vmType}} </span> <span *ngIf="item.value.diskSizeGb">( {{item.value.diskSizeGb}} GiB on disk ) </span> <span *ngIf="item.value.nodeCount">( {{item.value.nodeCount}} nodes )</span>
            </div>
        </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>
    </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>