<modal-dialog>
    <div class="modal-header">
        <h4 class="modal-title">
          <span translate>Add Member</span>
          <a tabindex="0" role="button" popover-trigger="focus" popover-placement="bottom"
              popover="A member is a user or group.">
              <span class="fa fa-lg fa-info-circle"></span>
          </a>
        </h4>
    </div>
    <div class="modal-body">
        <table class="form-table-ct">
            <tr>
                <td class="top">
                    <label class="control-label" for="add_member" translate>User or Group</label>
                </td>
                <td>
                    <div id="add_member_group" class="input-group bootstrap-select input-combo form-control" dropdown>
                        <input id="add_member_name" class="form-control" type="text" placeholder="Select or type a member"
                            ng-model="selected.memberName">
                        <span class="input-group-btn" dropdown="">
                            <button class="btn btn-default dropdown-toggle" dropdown-toggle>
                                <span class="caret"></span>
                            </button>
                            <ul class="dropdown-menu dropdown-menu-left">
                                <li ng-repeat="member in selected.members track by itemTracker(member)" ng-class="{active: member.name == selected.member}">
                                    <a ng-click="selected.member = member.name; selected.memberName = member.name; selected.memberObj = member"
                                        value="{{ member.name }}">
                                        {{ member.name }}
                                    </a>
                                </li>
                            </ul>
                        </span>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="top">
                    <label class="control-label" for="add_role" translate>Roles</label>
                </td>
                <td>
                    <div id="add_role" class="btn-group bootstrap-select form-control" dropdown>
                        <button class="btn btn-default dropdown-toggle" dropdown-toggle>
                            <span class="pull-left">{{ selected.displayRole }}</span>
                            <span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu">
                            <li ng-repeat="roleMp in selected.roles track by roleMp.displayRole" ng-class="{active: roleMp.displayRole == selected.displayRole}">
                                <a ng-click="selected.displayRole = roleMp.displayRole; selected.ocRole = roleMp.ocRole" value="{{ roleMp.displayRole }}">
                                    {{ roleMp.displayRole }}
                                </a>
                            </li>
                        </ul>
                    </div>
                </td>
            </tr>
        </table>
    </div>
    <div class="modal-footer">
        <button class="btn btn-default btn-cancel" translate>Cancel</button>
        <button class="btn btn-primary" ng-click="complete(performCreate())" translate>Add</button>
    </div>
</modal-dialog>
