<!--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>
    <h5 class="modal-title w-100 font-weight-bold">
      New provision
      <div style="font-size: 14px;">{{scenario.title}}</div>
    </h5>
  </div>
  <div class="modal-body" style="max-height: 550px; overflow: auto;">
    <!--<h5>{{scenario.title}}</h5>-->
    <div class="needs-validation">
      <div class="md-form row" style="padding: 15px;">
        <div class="col-sm-6">
          <h5>Purpose: (*)</h5>
          <textarea [(ngModel)]="sendData.description" type="text" class="md-textarea form-control" rows="1" mdbInput
            placeholder="Short description or Salesforce opportunity" required></textarea>
        </div>
        <div *ngIf="scenario.deployOpts" class="col-sm-6">
          <div>
            <label>Deploy into region: (*)</label>
          </div>
          <select id="region" class="browser-default custom-select custom-select-sm" [(ngModel)]="selectedDeployOpts"
            required>
            <option value="" selected disabled>-- Select --</option>
            <option *ngFor="let item of scenario.deployOpts" [value]="item._id">{{item.description}}</option>
          </select>
        </div>
      </div>
    </div>

    <div *ngIf="scenario.isDivvyEnabled" style="background: #f0f0f0; padding: 15px 15px; margin: 7px 0px;">
      <div>
        <h5>
          <mdb-icon far icon="clock"></mdb-icon> VMs Running schedule
        </h5>
      </div>
      <p [ngClass]="{'disabled': schedule.is24x7}" style="font-size: 12px;"><i>Everyday VMs for this scenario will run
          as scheduled bellow</i></p>
      <div [ngClass]="{'disabled': schedule.is24x7}">
        Timezone is <b>{{zone}}</b> <i>(times relative to this timezone)</i>
      </div>
      <div class="row" [ngClass]="{'disabled': schedule.is24x7}">
        <div class="col-sm-6">
          <section style="padding: 10px 0px;">
            <mdb-checkbox [default]="true" [checked]="schedule.isStartupTimeEnable"
              (change)="checkOnchangeStartupTime($event)"><b>Startup time:</b> <i [ngClass]="{'disabled': !schedule.isStartupTimeEnable}" class="utc">({{getUTCTimes().startupTime}} UTC)</i></mdb-checkbox>
          </section>
          <div [ngClass]="{'disabled': !schedule.isStartupTimeEnable}">
            <ngb-timepicker style="font-size: 10px;" [(ngModel)]="schedule.startupTime" [meridian]="true"
              [minuteStep]="15" [disabled]="schedule.is24x7 || !schedule.isStartupTimeEnable"></ngb-timepicker>
          </div>
          
        </div>
        <div class="col-sm-6">
          <section style="padding: 10px 0px;">
            <mdb-checkbox [default]="true" [checked]="true" [disabled]="true"><b>Shutdown time:</b> <i class="utc">({{getUTCTimes().shutdownTime}} UTC)</i></mdb-checkbox>
          </section>
          <div>
            <ngb-timepicker style="font-size: 10px;" [(ngModel)]="schedule.shutdownTime" [meridian]="true"
              [minuteStep]="15" [disabled]="schedule.is24x7"></ngb-timepicker>
          </div>
          
        </div>
      </div>
      <hr>
      <section style="padding: 0px; margin: 0px 20px">
        <mdb-checkbox [default]="false" [checked]="schedule.is24x7" (change)="checkOnchangeSchedule($event)">Run 24x7
          <i>(<mdb-icon fas icon="exclamation-triangle"></mdb-icon> requires permission from regional manager)</i>
        </mdb-checkbox>
      </section>
      <div style="padding-left: 25px;font-size: 12px;">
        <mdb-icon fas icon="long-arrow-alt-right"></mdb-icon> VMs will run 24 hours during 7 days. Then, if 24x7 is not
        renewed, VMs will shutdown.
      </div>
    </div>

    <div *ngIf="scenario.availableProductVersions && scenario.availableProductVersions.length"
      style="padding: 15px; margin: 7px 0px; background: #f0f0f0;">
      <h5 style="font-weight: 600;">
        <mdb-icon fas icon="server"></mdb-icon> Servers
      </h5>
      <div *ngFor="let server of scenario.availableProductVersions" style="margin-bottom: 15px;margin-top: 15px;">
        <h5 style="margin-bottom: 10px;">
          {{server.product}}
        </h5>
        <div *ngIf="server.optional !== undefined">
          <mdb-checkbox style="display: inline-block;padding-left: 20px;vertical-align: top;" [default]="false"
            [checked]="selectedServers[server.index] || server.optional === undefined"
            (change)="checkOnchangeServer($event, server)" [disabled]="server.optional === undefined">Enable
          </mdb-checkbox>
        </div>
        <div
          *ngIf="server.versions && server.versions.length && (selectedServers[server.index] || server.optional === undefined)">
          <div>
            <div>Product version:</div>
          </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 class="row"
          *ngIf="(selectedServers[server.index] || server.optional === undefined) && selectedVmType[server.index]">
          <div class="col-sm-6">
            <div>
              <div>VM type:</div>
            </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>
          <div class="col-sm-6">
            <div>
              <div>Disk size (GiB):</div>
            </div>
            <select class="browser-default custom-select custom-select-sm"
              [(ngModel)]="selectedDiskSizeGb[server.index]">
              <option *ngFor="let item of availableDiskSizes[server.index]" [value]="item">{{item}}</option>
            </select>
          </div>
        </div>
        <div *ngIf="server.nodeCount">
          <div>Num. nodes:</div>
        </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 *ngIf="scenario.isExternal && scenario.availableProductVersions && scenario.availableProductVersions.length"
      style="background: #f0f0f0; padding: 15px 15px; margin: 7px 0px;">
      <div>
        <h5>
          <mdb-icon fas icon="globe-americas"></mdb-icon> External access
        </h5>
      </div>
      <section style="padding-left: 20px;">
        <mdb-checkbox [default]="false" (change)="checkOnchange($event)">Enable (<mdb-icon fas
            icon="exclamation-triangle"></mdb-icon> only if it's strictly necessary)</mdb-checkbox>
      </section>
      <!--<i *ngIf="!scenario.isExternal">This scenario only allows access from VPN</i>-->
    </div>

    <div *ngIf="scenario.availableProductVersions && scenario.availableProductVersions.length"
      style="padding: 15px 15px; margin: 7px 0px;">
      <div>
        <h5>
          <mdb-icon fas icon="info"></mdb-icon> Important Notes:
        </h5>
      </div>
      <ul>
        <li *ngIf="scenario.isDivvyEnabled && !schedule.is24x7">VMs will auto-stop after VMs running for <b>{{scenario.allowedOnScheduleRunningDays}} days</b> (in accumulation) following the schedule. This time is reset at every <b>manual</b> stop.</li>
        <li *ngIf="!scenario.isDivvyEnabled || schedule.is24x7">VMs will auto-stop after VMs running for <b>{{scenario.allowed24x7RunningDays}} days</b>. You can extend this running period later.</li>
        <li>Provision will auto-destroy after <b *ngIf="!sendData.isExternalAccess">{{scenario.allowedInnactiveDays}} days</b><b *ngIf="sendData.isExternalAccess">{{scenario.allowedInnactiveDays/2}} days</b> of innactivity (VMs stopped
        for {{scenario.allowedInnactiveDays}} days).</li>
      </ul>
    </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-->
