<!--
  ~ Licensed to the Apache Software Foundation (ASF) under one
  ~ or more contributor license agreements.  See the NOTICE file
  ~ distributed with this work for additional information
  ~ regarding copyright ownership.  The ASF licenses this file
  ~ to you under the Apache License, Version 2.0 (the
  ~ "License"); you may not use this file except in compliance
  ~ with the License.  You may obtain a copy of the License at
  ~
  ~   http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing,
  ~ software distributed under the License is distributed on an
  ~ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
  ~ KIND, either express or implied.  See the License for the
  ~ specific language governing permissions and limitations
  ~ under the License.
  -->

<nz-modal [(nzVisible)]="isVisible" (nzOnCancel)="isVisible = false" nzTitle="{{ 'Create Notebook' | translate }}" [nzWidth]="700">
  <div *nzModalFooter>
    <button nz-button id="nb-form-btn-cancel" nzType="default" (click)="isVisible = false">{{ 'Cancel' | translate }}</button>
    <button nz-button id="nb-form-btn-create" nzType="primary" [disabled]="checkStatus()" (click)="submitForm()">
      {{ 'Create' | translate }}
    </button>
  </div>
  <form [formGroup]="notebookForm">
    <nz-form-item>
      <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="notebookName">{{ 'Notebook Name' | translate }}</nz-form-label>
      <nz-form-control [nzSm]="14" [nzXs]="24">
        <input nz-input required type="text" name="notebookName" id="notebookName" formControlName="notebookName" />
      </nz-form-control>
      <div class="alert-message" *ngIf="notebookForm.get('notebookName').hasError('pattern')">
        {{ 'Only letters(a-z), numbers(0-9), and hyphens are allowed, but you can\'t start with numbers/hyphens or end with hyphens.' | translate }}
      </div>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="environment">{{ 'Environment' | translate }}</nz-form-label>
      <nz-form-control [nzSm]="14" [nzXs]="24">
        <nz-select required name="select-envName" formControlName="envName">
          <nz-option
            *ngFor="let env of envNameList; let i; of: index"
            id="env{{ i }}"
            [nzValue]="env"
            [nzLabel]="env"
          ></nz-option>
        </nz-select>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="cpus">CPU</nz-form-label>
      <nz-form-control [nzSm]="14" [nzXs]="24">
        <input nz-input min="0" required type="number" name="cpus" id="cpus" step="0.1" formControlName="cpus" />
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="gpus">GPU</nz-form-label>
      <nz-form-control [nzSm]="14" [nzXs]="24">
        <input nz-input min="0" type="number" name="gpus" id="gpus" formControlName="gpus" />
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="memoryNum">{{ 'Memory' | translate }}</nz-form-label>
      <nz-form-control [nzSm]="14" [nzXs]="24">
        <div nz-col nzSpan="6">
          <input nz-input required name="memoryNum" placeholder="{{ 'EX' | translate }}:1024" formControlName="memoryNum" />
        </div>
        <div nz-col nzSpan="6" style="margin-left: 5px">
          <nz-select formControlName="unit">
            <nz-option *ngFor="let unit of MEMORY_UNITS" [nzValue]="unit" [nzLabel]="unit"></nz-option>
          </nz-select>
        </div>
      </nz-form-control>
    </nz-form-item>
    <div formArrayName="envVars">
      <ng-container *ngFor="let envVar of envVars.controls; index as i">
        <nz-form-item>
          <nz-form-label nzRequired [nzSm]="6" [nzXs]="24">{{ 'EnvVar' | translate }}{{ i + 1 }}</nz-form-label>
          <div [formGroupName]="i">
            <div nz-col nzSpan="12">
              <input
                style="width: 30%"
                nz-input
                required
                id="key{{ i }}"
                name="key{{ i }}"
                placeholder="{{ 'Key' | translate }}"
                formControlName="key"
              />
              <input
                style="width: 60%; margin-left: 10px"
                nz-input
                required
                id="value{{ i }}"
                name="value{{ i }}"
                placeholder="{{ 'Value' | translate }}"
                formControlName="value"
              />
              <i
                nz-icon
                style="margin-left: 5px"
                nzType="close-circle"
                nzTheme="fill"
                (click)="deleteItem(envVars, i)"
              ></i>
            </div>
          </div>
        </nz-form-item>
      </ng-container>
    </div>
    <button nz-button style="display: block; margin: auto" id="envVar-btn" type="default" (click)="onCreateEnvVar()">
      {{ 'New EnvVar' | translate }}
    </button>
  </form>
</nz-modal>
