<che-popup title="{{memberDialogController.title}}" on-close="memberDialogController.hide()">
  <div class="member-dialog-content" md-theme="default">
    <ng-form flex layout="column" name="memberForm">
      <che-label-container che-label-name="Email" ng-show="!memberDialogController.member"
                           che-label-description="User email address.">
        <che-input-box che-form="memberForm"
                         che-name="email"
                         che-place-holder="Enter email"
                         ng-model="memberDialogController.email"
                         ng-model-options="{allowInvalid: true}"
                         ng-disabled="memberDialogController.isProcessing"
                         custom-validator="memberDialogController.isValidEmail($value)"
                         type="text"
                         aria-label="New member"
                         ng-keypress="memberForm.$valid && $event.which === 13 && memberDialogController.addMembers()"
                         required focusable>
            <div ng-message="customValidator">{{memberDialogController.emailError}}</div>
          </che-input-box>
      </che-label-container>
      <che-label-container che-label-name="Role" che-label-description="Allowed actions of member." ng-if="!memberDialogController.role">
        <div layout="column">
          <md-radio-group ng-model="memberDialogController.newRole">
            <div ng-repeat="roleInfo in memberDialogController.roles" layout="row">
              <md-radio-button value="{{roleInfo}}">{{roleInfo.title}}</md-radio-button>
              <span class="member-role-description">({{roleInfo.description}})</span>
            </div>
          </md-radio-group>
        </div>
      </che-label-container>
    </ng-form>

    <div layout="row" layout-align="end center">
      <che-button-primary che-button-title="{{memberDialogController.buttonTitle}}"
                          ng-if="!memberDialogController.member"
                          ng-disabled="memberForm.$invalid || memberDialogController.isProcessing"
                          ng-click="memberDialogController.addMembers()"></che-button-primary>
      <che-button-primary che-button-title="{{memberDialogController.buttonTitle}}"
                          ng-disabled="memberDialogController.isProcessing"
                          ng-if="memberDialogController.member"
                          ng-click="memberDialogController.editMember()"></che-button-primary>
      <che-button-cancel-flat che-button-title="Cancel"
                              ng-click="memberDialogController.hide()"
                              tabindex="0"></che-button-cancel-flat>
    </div>
  </div>
</che-popup>
