<div class="resource-view" resource="orgResource" error-message="'No matching organization found'">
  <div class="org-view container">
    <div class="organization-header" organization="organization">
      <div class="header-buttons" ng-show="organization.is_admin">

        <span class="popup-input-button" pattern="TEAM_PATTERN" placeholder="'Team Name'"
              submitted="createTeam(value)">
          <i class="fa fa-group"></i> Create Team
        </span>

        <a class="btn btn-default" href="/organization/{{ organization.name }}/admin"><i class="fa fa-gear"></i> Settings</a>
      </div>
    </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">
        Team Permissions
        <i class="info-icon fa fa-info-circle" data-placement="bottom" data-original-title="" 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>"></i>
      </div>
    </div>

    <div class="team-listing" ng-repeat="(name, team) in organization.teams">
      <div id="team-{{name}}" class="row">
        <div class="col-sm-7 col-md-8">
          <div class="team-title">
            <i class="fa fa-group"></i>
            <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>

        <div class="col-sm-5 col-md-4 control-col" ng-show="organization.is_admin">
          <span class="role-group" current-role="team.role" role-changed="setRole(role, team.name)" roles="teamRoles"></span>
          <button class="btn btn-sm btn-danger" ng-click="askDeleteTeam(team.name)">Delete</button>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Modal message dialog -->
<div class="modal fade" id="cannotChangeTeamModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title">Cannot change team</h4>
      </div>
      <div class="modal-body">
        <span ng-show="!roleError">You do not have permission to change properties on teams.</span>
        <span ng-show="roleError">{{ roleError }}</span>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->


<!-- Modal message dialog -->
<div class="modal fade" id="confirmdeleteModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title">Delete Team?</h4>
      </div>
      <div class="modal-body">
        Are you sure you would like to delete this team? This <b>cannot be undone</b>.
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-danger" ng-click="deleteTeam()">Delete Team</button>
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->