<div class="modal-header">
    <button type="button" class="close" ng-click="close()" aria-label="Close"><span aria-hidden="true">&times;</span></button>
    <h4 class="modal-title"><i class="fa fa-users"></i> User Access <small>{{group.name}}</small></h4>
</div>
<div class="modal-body">
    <div ng-show="loading && !users.length">
        Loading...
    </div>
    <div ng-show="!loading && !users.length">
        <p>
            No users for this group. You can associate a new user to this group by
            selecting a specific user's "Groups" on the "People" page.
        </p>
    </div>
    <div class="table-responsive" ng-show="users.length" style="margin: 0;">
        <table class="table table-striped table-hover table-vmiddle" style="margin: 0;">
            <tbody>
                <tr ng-repeat="user in users | orderBy: ['email']">
                    <td style="width: 70px;">
                        <div class="btn-group" data-append-to=".modal">
                            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                                <i class="fa fa-cog"></i> <span class="caret"></span>
                            </button>
                            <ul class="dropdown-menu">
                                <li ng-show="user.organizationUserId">
                                    <a href="#" stop-click ng-click="remove(user)" class="text-red">
                                        <i class="fa fa-fw fa-remove"></i> Remove
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </td>
                    <td style="width: 45px;">
                        <letter-avatar data="{{user.name || user.email}}"></letter-avatar>
                    </td>
                    <td>
                        {{user.email}}
                        <div ng-if="user.name"><small class="text-muted">{{user.name}}</small></div>
                    </td>
                    <td style="width: 100px;">
                        {{user.type | enumName: 'OrgUserType'}}
                    </td>
                    <td style="width: 120px;">
                        <span class="label {{user.status | enumLabelClass: 'OrgUserStatus'}}">
                            {{user.status | enumName: 'OrgUserStatus'}}
                        </span>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>
<div class="modal-footer">
    <button type="button" class="btn btn-default btn-flat" ng-click="close()">Close</button>
</div>