<!--Content-->
<div class="modal-content">
    <div class="modal-header text-center">
        <button type="button" class="close pull-right" aria-label="Close" (click)="modalRef.hide()">
            <span aria-hidden="true">×</span>
        </button>
        <h4 class="modal-title w-100 font-weight-bold">New provision</h4>
    </div>
    <div class="modal-body" style="max-height: 650px; overflow: auto;">
      <!--<h5>{{scenario.title}}</h5>-->
      <div class="md-form">
        <div>
          <div>Purpose: (*)</div>
          <textarea [(ngModel)]="sendData.description" type="text" class="md-textarea form-control" rows="1" mdbInput placeholder="Short description or Salesforce opportunity"></textarea>
        </div>
      </div>

      <section *ngIf="scenario.isExternal" style="padding: 20px 0px; margin: 0px 20px">
        <mdb-checkbox [default]="false" (change)="checkOnchange($event)">Enable External Access</mdb-checkbox>
      </section>

      <section *ngIf="!scenario.isExternal" style="padding: 20px 0px; margin: 0px 20px">
        <mdb-checkbox [default]="false" (change)="checkOnchange($event)" [disabled]="true"><span style="color:#ccc">Enable External Access</span><br><i><mdb-icon fas icon="exclamation-triangle"></mdb-icon> This scenario only allows access from VPN</i></mdb-checkbox>
      </section>

      <div style="padding-top: 10px" class="md-form" >   

        <div *ngFor="let server of scenario.availableProductVersions" style="margin-bottom: 15px;">
          <h5 style="font-weight: 600; margin-bottom: 0px;">- {{server.product}}</h5>
          <div *ngIf="server.versions && server.versions.length">
            <div >
              <label>Product version: (*)</label>
            </div>
            <select id="pversion" class="browser-default custom-select custom-select-sm" [(ngModel)]="selectedProductVersion[server.index]">
              <option *ngFor="let v of server.versions" [value]="v.name">{{v.name}}</option>
            </select>
         </div>
          <div>
            <label>VM type: (*)</label>
          </div>
          <select id="vmtype" class="browser-default custom-select custom-select-sm" [(ngModel)]="selectedVmType[server.index]">
            <option *ngFor="let item of vmTypes" [value]="item.type">{{item.type}} ({{item.desc}})</option>
          </select>
          <div>
            <label>Disk size (GiB): (*)</label>
          </div>
          <select class="browser-default custom-select custom-select-sm" [(ngModel)]="selectedDiskSizeGb[server.index]">
            <option *ngFor="let item of [128,250,500,750,1000]" [value]="item">{{item}}</option>
          </select>
          <div *ngIf="server.nodeCount">
            <label>Num. nodes: (*)</label>
          </div>
          <select *ngIf="scenario.nodeCount" class="browser-default custom-select custom-select-sm" [(ngModel)]="selectedNodeCount[server.index]">
            <option *ngFor="let item of [1,2,3,4,5,6]" [value]="item">{{item}}</option>
          </select>
        </div>
      </div>
    </div>
    
    <div class="modal-footer d-flex justify-content-center">
      <button mdbBtn color="dark-green" size="sm" outline="true" class="waves-effect" mdbWavesEffect (click)="modalRef.hide()">Cancel</button>
      <button mdbBtn color="dark-green" class="waves-light" size="sm" mdbWavesEffect (click)="confirm();">Create</button>
    </div>
</div>
<!--/.Content-->