<che-popup title="{{editMachineDialogController.isAdd ? 'Add a new' : 'Edit the'}} machine"
           on-close="editMachineDialogController.cancel()">
  <ng-form name="editMachineForm" class="edit-machine-form">
    <div class="form-input-fields" flex="100" layout="column">

      <div layout="row" layout-align="start start">
        <div flex="15">
          <span>Name:</span>
        </div>
        <div flex="85">
          <che-input-box type="text"
                         che-form="editMachineForm"
                         che-name="name"
                         che-place-holder="enter machine's name"
                         che-on-change="editMachineDialogController.onNameChange($value)"
                         custom-validator="editMachineDialogController.isUnique($value)"
                         ng-model-options="{ updateOn: 'default blur', debounce: { 'default': 500, 'blur': 0 } }"
                         ng-model="editMachineDialogController.machineName"
                         ng-maxlength="128"
                         ng-pattern="/^[A-Za-z0-9_\-\.]+$/"
                         required>
            <che-error-messages che-message-scope="workspace-details-environment" che-message-name="Machine name">
              <div ng-message></div>
              <div ng-message="required">Machine's name is required.</div>
              <div ng-message="customValidator">This machine's name is already in use.</div>
              <div ng-message="maxlength">Machine's name should be less than 128 characters long.</div>
              <div ng-message="pattern">The name should not contain special characters like space, dollar, etc.</div>
            </che-error-messages>
          </che-input-box>
        </div>
      </div>
      <div layout="row" layout-align="start start" class="ram-slider" ng-if="editMachineDialogController.machineRAM">
        <div flex="15">
          <label>RAM:</label>
        </div>
        <div flex="85">
          <che-workspace-ram-allocation-slider ng-model="editMachineDialogController.machineRAM"
                                               che-on-change="editMachineDialogController.updateMachineRAM()">
          </che-workspace-ram-allocation-slider>
        </div>
      </div>
      <div layout="row" layout-align="start start">
        <div flex="15">
          <span>Recipe:</span>
        </div>
        <div flex="85">
          <che-editor editor-content="editMachineDialogController.machineRecipeScript"
                      editor-state="editorState"
                      validator="editMachineDialogController.isRecipeValid()"
                      on-content-change="editMachineDialogController.parseMachineRecipe()"
                      editor-read-only="editMachineDialogController.isEditorReadOnly"
                      editor-mode="{{editMachineDialogController.editorMode}}"></che-editor>
        </div>
      </div>
    </div>
    <che-button-notice che-button-title="Close"
                       ng-click="editMachineDialogController.cancel()">
    </che-button-notice>
    <che-button-primary che-button-title="{{editMachineDialogController.isAdd ? 'Add' : 'Save'}}"
                        id="save-machine-button"
                        ng-click="editMachineDialogController.updateMachine()"
                        ng-disabled="editMachineForm.$invalid || !editMachineDialogController.isChange() || !editorState.isValid">
    </che-button-primary>
  </ng-form>
</che-popup>
