<div class="teams-manager-element">
  <div class="manager-header" header-title="Teams">
    <span class="popup-input-button" 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>

  <div class="row hidden-xs">
    <div class="col-md-4 col-md-offset-8 col-sm-5 col-sm-offset-7 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="askDeleteTeam(team.name)">
            <i class="fa fa-times"></i> Delete Team {{ team.name }}
          </span>
        </span>
      </div>
    </div>
  </div>
</div>