<che-popup title="{{editEnvVariableDialogController.popupTitle}}"
           on-close="editEnvVariableDialogController.hide()">
  <div class="edit-env-variable-dialog-content">
    <ng-form flex layout="column" name="envVariableForm">
      <che-input-box che-label-name="Name"
                     id="variable-name-input"
                     che-form="envVariableForm"
                     che-name="name"
                     che-place-holder="Environment variable name"
                     ng-model="editEnvVariableDialogController.name"
                     custom-validator="editEnvVariableDialogController.isUniqueName($value)"
                     ng-pattern="/^[A-Za-z0-9_\-\.]+$/"
                     required>
        <div ng-message="pattern">The name shouldn't contain special characters like space, dollar, etc.</div>
        <div ng-message="customValidator">This name is already in use.</div>
      </che-input-box>
      <che-label-container che-label-name="Value">
        <div class="edit-variable-dialog-textarea">
          <che-textarea che-form="envVariableForm"
                        id="variable-value-input"
                        che-name="value"
                        che-place-holder="New environment variable value"
                        ng-model="editEnvVariableDialogController.value"
                        required>
            <div ng-message="required">A value is required.</div>
          </che-textarea>
        </div>
      </che-label-container>
      <div layout="row" flex layout-align="end end">
        <che-button-primary che-button-title="{{editEnvVariableDialogController.toEdit ? 'Update' : 'Add'}}"
                            id="{{editEnvVariableDialogController.toEdit ? 'Update' : 'Add'}}-dialog-button"
                            ng-disabled="envVariableForm.$invalid"
                            ng-click="editEnvVariableDialogController.saveVariable()"></che-button-primary>

        <che-button-notice che-button-title="Cancel"
                           ng-click="editEnvVariableDialogController.hide()"
                           tabindex="0"  id="cancel-dialog-button"></che-button-notice>
      </div>
    </ng-form>
  </div>
</che-popup>
