<che-popup title="{{editMachineServerDialogController.popupTitle}}"
           on-close="editMachineServerDialogController.hide()">
  <div class="edit-server-dialog-content">
    <ng-form name="editServerForm">
      <!-- Reference -->
      <che-input-box che-label-name="Reference"
                     che-form="editServerForm"
                     id="server-reference-input"
                     che-name="reference"
                     che-place-holder="Server reference"
                     ng-model="editMachineServerDialogController.reference"
                     type="type"
                     aria-label="Server reference"
                     required
                     custom-validator="editMachineServerDialogController.isUniqueReference($value)"
                     ng-minlength="3"
                     ng-maxlength="20"
                     ng-pattern="/^[A-Za-z0-9_/\-\.]+$/">
        <div ng-message="pattern">The reference shouldn't contain special characters like space, dollar, etc.
        </div>
        <div ng-message="minlength">The reference has to be more than 3 characters long.</div>
        <div ng-message="maxlength">The reference has to be less than 20 characters long.</div>
        <div ng-message="customValidator">This reference is already in use.</div>
      </che-input-box>
      <!-- Port -->
      <che-input-box che-label-name="Port"
                     che-form="editServerForm"
                     che-name="port"
                     id="server-port-input"
                     che-place-holder="Port number"
                     ng-model="editMachineServerDialogController.port"
                     type="number"
                     min="1"
                     max="65535"
                     custom-validator="editMachineServerDialogController.isUniquePort($value)"
                     aria-label="Server port number"
                     required>
        <div ng-message="customValidator">This port is already in use.</div>
        <div ng-message="min">A number should be greater than 0.</div>
        <div ng-message="max">A number should be less than 65536.</div>
      </che-input-box>
      <!-- Protocol -->
      <che-input-box che-label-name="Protocol"
                     che-form="editServerForm"
                     che-name="protocol"
                     id="server-protocol-input"
                     che-place-holder="Protocol"
                     ng-model="editMachineServerDialogController.protocol"
                     type="type"
                     aria-label="Server protocol"
                     ng-pattern="/^[A-Za-z0-9_\-\.]+$/"
                     required>
        <div ng-message="pattern">The protocol should not contain special characters like space, dollar, etc.</div>
      </che-input-box>
      <div layout="row" layout-align="end end">
        <che-button-primary che-button-title="{{editMachineServerDialogController.toEdit ? 'Update' : 'Add'}}"
                            id="{{editEnvVariableDialogController.toEdit ? 'Update' : 'Add'}}"
                            ng-disabled="editServerForm.$invalid"
                            ng-click="editMachineServerDialogController.saveServer()"></che-button-primary>
        <che-button-notice che-button-title="Close"
                           ng-click="editMachineServerDialogController.hide()"
                           tabindex="0"></che-button-notice>
      </div>
    </ng-form>
  </div>
</che-popup>
