<div class="loading" ng-show="loading">
  <i class="fa fa-spinner fa-spin fa-3x"></i>
</div>

<div class="loading" ng-show="!loading && !organization">
  No matching organization found
</div>

<div class="org-admin container" ng-show="!loading && organization">
  <div class="organization-header" organization="organization"></div>
  
  <div class="row">
    <!-- Side tabs -->
    <div class="col-md-2">
      <ul class="nav nav-pills nav-stacked">
        <li class="active"><a href="javascript:void(0)" data-toggle="tab" data-target="#plan">Plan and Usage</a></li>
        <li><a href="javascript:void(0)" data-toggle="tab" data-target="#members" ng-click="loadMembers()">Members</a></li>
      </ul>
    </div>

    <!-- Content -->
    <div class="col-md-10">
      <div class="tab-content">       
        <!-- Plans tab -->
        <div id="plan" class="tab-pane active">
          <div class="plan-manager" organization="orgname"></div>
        </div>

        <!-- Members tab -->
        <div id="members" class="tab-pane">
          <i class="fa fa-spinner fa-spin fa-3x" ng-show="membersLoading"></i>

          <div ng-show="!membersLoading">
            <div class="side-controls">      
              <div class="result-count">
                Showing {{(membersFound | filter:search | limitTo:50).length}} of {{(membersFound | filter:search).length}} matching members
              </div>
              <div class="filter-input">        
                <input id="member-filter" class="form-control" placeholder="Filter Members" type="text" ng-model="search.$">
              </div>
            </div> 

            <table class="table table-striped">
              <thead>
                <th>User</th>
                <th>Teams</th>
              </thead>
              
              <tr ng-repeat="memberInfo in (membersFound | filter:search | limitTo:50)">
                <td>
                  <i class="fa fa-user"></i>
                  {{ memberInfo.username }}
                </td>
                <td>
                  <span class="team-link" ng-repeat="team in memberInfo.teams">
                    <i class="fa fa-group"></i>
                    <a href="/organization/{{ organization.name }}/teams/{{ team }}">{{ team }}</a>
                  </span>
                </td>
              </tr>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>