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

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