quay/static/directives/teams-manager.html

<div class="teams-manager-element">
  <div class="feedback-bar" feedback="feedback"></div>
  <div class="manager-header" header-title="Teams and Membership">
    <div class="tab-header-controls hidden-xs">
      <div class="btn-group btn-group-sm" ng-show="organization.is_admin">
        <button class="btn"
                ng-class="!showingMembers ? 'btn-primary active' : 'btn-default'" ng-click="showMembers(false)">
          <i class="fa fa-group"></i>Teams View
        </button>
        <button class="btn"
                ng-class="showingMembers ? 'btn-info active' : 'btn-default'" ng-click="showMembers(true)">
          <i class="fa fa-user"></i>Members View
        </button>
      </div>
    </div>

    <span class="popup-input-button visible-xs" ng-if="!showingMembers"
          pattern="TEAM_PATTERN" placeholder="'Team Name'"
          submitted="createTeam(value)" ng-show="organization.is_admin">
      <i class="fa fa-plus" style="margin-right: 6px;"></i> Create New Team
    </span>
  </div>

  <!-- Teams List -->
  <div ng-show="!showingMembers">
    <div class="row" style="margin-left: 0px; margin-right: 0px;">
      <span class="popup-input-button hidden-xs"
            pattern="TEAM_PATTERN" placeholder="'Team Name'"
            submitted="createTeam(value)" ng-show="organization.is_admin"
            style="margin-bottom: 10px;">
        <i class="fa fa-plus" style="margin-right: 6px;"></i> Create New Team
      </span>
    </div>

    <div class="row hidden-xs">
      <div class="col-sm-7 col-md-8 header-col">
        <span class="header-text">Team Summary</span>
      </div>
      <div class="col-md-4 col-sm-5 header-col" ng-show="organization.is_admin">
        <span class="header-text">Team Permissions</span>
        <i class="info-icon fa fa-info-circle" data-placement="bottom" data-original-title="" data-title=""
           data-content="Global permissions for the team and its members<br><br><dl><dt>Member</dt><dd>Permissions are assigned on a per repository basis</dd><dt>Creator</dt><dd>A team can create its own repositories</dd><dt>Admin</dt><dd>A team has full control of the organization</dd></dl>"
           data-html="true"
           data-trigger="hover"
           bs-popover></i>
      </div>
    </div>

    <div class="team-listing" ng-repeat="team in orderedTeams">
      <div id="team-{{team.name}}" class="row">
        <div class="col-sm-7 col-md-8">
          <div class="team-title">
            <span class="avatar" data="team.avatar" size="30"></span>
            <span ng-show="team.can_view">
              <a href="/organization/{{ organization.name }}/teams/{{ team.name }}">{{ team.name }}</a>
            </span>
            <span ng-show="!team.can_view">
              {{ team.name }}
            </span>
          </div>

          <div class="team-description markdown-view" content="team.description" first-line-only="true"></div>

          <div class="team-member-list hidden-xs" ng-if="members[team.name]">
            <div class="cor-loader" ng-if="!members[team.name].members"></div>
            <span class="team-member"
                  ng-repeat="member in members[team.name].members | orderBy:'is_robot' | limitTo: 20">
              <span data-title="{{ member.name }}" bs-tooltip>
                <a href="/user/{{ member.name }}" ng-if="!member.is_robot">
                  <span class="avatar" data="member.avatar" size="26"></span>
                </a>
                <i class="fa ci-robot fa-lg" ng-if="member.is_robot"></i>
              </span>
            </span>
            <span class="team-member-more"
                  ng-if="members[team.name].members.length > 20">+ {{ members[team.name].members.length - 20 }} more team members.</span>
            <span class="team-member-more"
                  ng-if="members[team.name].members && !members[team.name].members.length">(Empty Team)</span>
          </div>
        </div>

        <div class="col-sm-5 col-md-4 control-col" ng-show="organization.is_admin">
          <span class="role-group" current-role="team.role" pull-left="true"
                role-changed="setRole(role, team.name)" roles="teamRoles"></span>

          <span class="cor-options-menu">
            <span class="cor-option" option-click="viewTeam(team.name)">
              <i class="fa fa-user"></i> Manage Team Members
            </span>
            <span class="cor-option" option-click="askDeleteTeam(team.name)">
              <i class="fa fa-times"></i> Delete Team {{ team.name }}
            </span>
          </span>
        </div>
      </div>
    </div>
  </div>

  <!-- Members List -->
  <div ng-show="showingMembers">
    <div class="cor-loader" ng-if="!fullMemberList"></div>

    <div class="filter-box" collection="fullMemberList" filter-model="memberFilter"
         filter-name="Organization Members"></div>

    <div class="empty" ng-if="fullMemberList.length && !(fullMemberList | filter:memberFilter).length">
      <div class="empty-primary-msg">No organization members found matching filter.</div>
      <div class="empty-secondary-msg">
        Please change your filter to display members.
      </div>
    </div>

    <table class="cor-table" ng-if="(fullMemberList | filter:memberFilter).length">
      <thead>
        <td>Member Name</td>
        <td>Teams</td>
        <td>Direct Repository Permissions</td>
        <td class="options-col"></td>
      </thead>

      <tbody ng-repeat="memberInfo in fullMemberList | filter:memberFilter | orderBy:'name'" bindonce>
        <tr>
          <td>
            <div class="entity-reference" entity="memberInfo"></div>
          </td>
          <td>
             <span ng-repeat="team in memberInfo.teams"
                   data-title="Team {{ team.name }}" bs-tooltip>
               <span class="anchor" href="/organization/{{ organization.name }}/teams/{{ team.name }}">
                 <span class="avatar" size="24" data="team.avatar"></span>
               </span>
             </span>
          </td>
          <td>
            <span class="empty" bo-if="memberInfo.repositories.length == 0">
              (No direct permissions on any repositories)
            </span>

            <span class="member-perm-summary" bo-if="memberInfo.repositories.length > 0">
              Direct permissions on {{ memberInfo.repositories.length }}
              <span bo-if="memberInfo.repositories.length == 1">repository</span>
              <span bo-if="memberInfo.repositories.length > 1">repositories</span>
              under this organization
            </span>
          </td>
          <td class="options-col">
            <span class="cor-options-menu" ng-if="memberInfo.name != user.username">
              <span class="cor-option" option-click="askRemoveMember(memberInfo)">
                <i class="fa fa-times"></i> Remove From Organization
              </span>
            </span>
          </td>
        </tr>
      </tbody>
    </table>
  </div>

  <!-- Remove member confirm -->
  <div class="cor-confirm-dialog"
     dialog-context="removeMemberInfo"
     dialog-action="removeMember(info, callback)"
     dialog-title="Remove Organization Member"
     dialog-action-title="Remove Member">
     <div class="co-alert co-alert-info" style="margin-bottom: 10px;">
       <span class="entity-reference" entity="removeMemberInfo"></span> will be removed from all teams and repositories under this organization in which they are a
       member or have permissions.
     </div>

     Continue with removal of <span class="entity-reference" entity="removeMemberInfo"></span>?
  </div>
</div>