<che-popup title="{{editMachineVolumeDialogController.popupTitle}}"
           on-close="editMachineVolumeDialogController.hide()">
  <div class="edit-volume-dialog-content">
    <ng-form flex layout="column" name="VolumeForm">
      <che-input-box che-label-name="Name"
                     id="volume-name-input"
                     che-form="VolumeForm"
                     che-name="name"
                     che-place-holder="Volume name"
                     ng-model="editMachineVolumeDialogController.name"
                     custom-validator="editMachineVolumeDialogController.isUniqueName($value)"
                     ng-pattern="/^[a-z0-9]+$/"
                     ng-minlength="1"
                     ng-maxlength="19"
                     required>
        <div ng-message="pattern">The name shouldn't contain special characters like space, dollar, etc.</div>
        <div ng-message="minlength">The name has to be more than 1 character long.</div>
        <div ng-message="maxlength">The name has to be less than 20 characters long.</div>
        <div ng-message="customValidator">This name is already in use.</div>
      </che-input-box>
      <che-label-container che-label-name="Path" class="edit-volume-path">
          <che-textarea che-form="VolumeForm"
                        id="volume-path-input"
                        che-name="path"
                        che-place-holder="Path in the machine *"
                        ng-model="editMachineVolumeDialogController.path"
                        ng-pattern="/^(?:\/\.?[-\w]+)*$/"
                        ng-minlength="2"
                        ng-maxlength="255"
                        required>
            <div ng-message="minlength">The path has to be more than 1 character long.</div>
            <div ng-message="maxlength">The path has to be less than 256 characters long.</div>
            <div ng-message="pattern">The path should start from '/' and shouldn't contain special characters like space, dollar, etc.</div>
          </che-textarea>
      </che-label-container>
      <div flex layout="row" layout-align="end end">
        <che-button-primary che-button-title="{{editMachineVolumeDialogController.toEdit ? 'Update' : 'Add'}}"
                            id="{{editMachineVolumeDialogController.toEdit ? 'Update' : 'Add'}}-dialog-button"
                            ng-disabled="VolumeForm.$invalid"
                            ng-click="editMachineVolumeDialogController.saveVolume()"></che-button-primary>

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