<p ng-if="sharedImages(project()) == 'anonymous'">
    <span>
        <a ng-click="modifyProject(project())" translate>Project access policy allows anonymous users to pull images.</a> <span translate>Grant additional push or admin access to specific members below.</span>
    </span>
</p>
<p ng-if="sharedImages(project()) == 'shared'">
    <span>
        <a ng-click="modifyProject(project())" translate>Project access policy allows any authenticated user to pull images.</a> <span translate>Grant additional push or admin access to specific members below.</span>
    </span>
</p>
<p ng-if="sharedImages(project()) == 'private'">
    <span>
        <a ng-click="modifyProject(project())" translate>Project access policy only allows specific members to access images.</a> <span>Grant access to specific members below.</span>
    </span>
</p>

<table listing-table class="listing-ct project-body">
    <thead >
        <tr >
            <th translate>Project Members</th>
            <th translate>Roles</th>
            <th translate></th>
        </tr>
    </thead>
    <tbody colspan="3" ng-repeat="user in users()" data-id="{{ user.metadata.name }}" ng-if="user && project() && subjectIsMember(user, project())">
        <tr ng-if="hasRegistryRole(user.metadata.name, project())" class="listing-ct-item inner-project-listing">
            <td ng-click="listing.activate('/users/' + user.metadata.name)">
                <div>
                    <i class="user-page-icons pficon pficon-user"></i>
                    {{ user.metadata.name }}
                </div>
            </td>
            <td>
                <div ng-if="!isSameUser(settings.currentUser, user)"  class="btn-group bootstrap-select namespace-filter" dropdown>
                    <button class="btn btn-default dropdown-toggle" type="button" dropdown-toggle>
                        <span class="pull-left">
                            <span ng-if="isRoles(user, project())">
                                {{ getRegistryRoles(user, project()).join() }}
                            </span>
                        </span>
                    <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu">
                        <li ng-repeat="roleMp in getRegistryRolesMap()"
                            ng-class="{ checked: isRegistryRole(user, roleMp.displayRole, project()) }">
                            <a ng-click="changeRole(user, roleMp, getRegistryRoles(user, project()), project())"
                                value="{{ roleMp.displayRole }}">
                                {{ roleMp.displayRole }}
                            </a>
                        </li>
                    </ul>
                </div>
                <div ng-if="isSameUser(settings.currentUser, user)"  class="btn-group bootstrap-select namespace-filter" dropdown disabled>
                    <button class="btn btn-default dropdown-toggle" type="button" dropdown-toggle disabled>
                        <span class="pull-left">
                            <span translate>Admin</span>
                        </span>
                        <span class="caret"></span>
                    </button>
                </div>
            </td>
            <td><a class="pull-right close-icon">
                    <i translate class=" pficon-close" ng-click="removeMemberFromParent(user, project())"></i>
                </a>
            </td>
        </tr>
    </tbody>
    <tbody colspan="3" ng-repeat="group in groups()" data-id="{{ group.metadata.name }}" ng-if="group && project() && subjectIsMember(group, project())">
        <tr ng-if="hasRegistryRole(group.metadata.name, project())" class="listing-ct-item inner-project-listing">
            <td ng-click="listing.activate('/groups/' + group.metadata.name)">
                <div>
                    <i class="user-page-icons pficon pficon-users"></i>
                    {{ group.metadata.name }}
                </div>
            </td>
            <td>
                <div class="btn-group bootstrap-select namespace-filter" dropdown>
                        <button class="btn btn-default dropdown-toggle" type="button" dropdown-toggle>
                            <span class="pull-left">
                                <span ng-if="isRoles(group, project())">
                                    {{ getRegistryRoles(group, project()).join() }}
                                </span>
                            </span>
                            <span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu">
                            <li ng-repeat="roleMp in getRegistryRolesMap()"
                                ng-class="{ checked: isRegistryRole(group, displayRole, project()) }">
                                <a ng-click="changeRole(group, roleMp, getRegistryRoles(group, project()), project())"
                                    value="{{ roleMp.displayRole }}">
                                    {{ roleMp.displayRole }}
                                </a>
                            </li>
                        </ul>
                    </div>
            </td>
            <td><a class="pull-right close-icon">
                    <i translate class=" pficon-close" ng-click="removeMemberFromParent(group, project())"></i>
                </a>
            </td>
        </tr>
    </tbody>
    <thead>
        <tr>
            <td colspan="3">
                <a class="pull-left" ng-click="addMember(project())">
                    <i translate class="pficon pficon-add-circle-o"></i>
                    <span translate>Add Member</span>
                </a>
            </td>
        </tr>
    </thead>
</table>
