<che-popup title="{{editVariableDialogController.popupTitle}}"
           on-close="editVariableDialogController.hide()"
           class="edit-variable-dialog-content">
  <ng-form flex layout="column" name="envVariableForm">
    <che-label-container che-label-name="Name">
      <div class="edit-variable-dialog-input">
        <che-input che-form="envVariableForm"
                   che-name="name"
                   che-place-holder="Environment variable name"
                   ng-model="editVariableDialogController.name"
                   custom-validator="editVariableDialogController.isUniqueName($value)"
                   required>
          <div ng-message="required">A name is required.</div>
          <div ng-message="customValidator">This name is already in use.</div>
        </che-input>
      </div>
    </che-label-container>
    <che-label-container che-label-name="Value">
      <div class="edit-variable-dialog-textarea">
        <che-textarea che-form="envVariableForm"
                      che-name="value"
                      che-place-holder="New environment variable value"
                      ng-model="editVariableDialogController.value"
                      required>
          <div ng-message="required">A value is required.</div>
        </che-textarea>
      </div>
    </che-label-container>

    <che-label-container>
      <div layout="row" flex layout-align="end end">
        <che-button-primary che-button-title="{{editVariableDialogController.toEdit ? 'Update' : 'Add'}}"
                            ng-disabled="envVariableForm.$invalid"
                            ng-click="editVariableDialogController.saveVariable()"></che-button-primary>

        <che-button-notice che-button-title="Cancel"
                           ng-click="editVariableDialogController.hide()"
                           tabindex="0"></che-button-notice>
      </div>
    </che-label-container>
  </ng-form>
</che-popup>
