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

      <che-button-notice che-button-title="Close"
                         ng-click="editServerDialogController.hide()"
                         tabindex="0"></che-button-notice>
    </div>
  </ng-form>
</che-popup>
