quay/static/partials/org-admin.html

<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>
        <li ng-show="hasPaidPlan"><a href="javascript:void(0)" data-toggle="tab" data-target="#billingoptions">Billing</a></li>
        <li ng-show="hasPaidPlan"><a href="javascript:void(0)" data-toggle="tab" data-target="#billing" ng-click="loadInvoices()">Billing History</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" plan-changed="planChanged(plan)"></div>
        </div>

        <!-- Billing Options tab -->
        <div id="billingoptions" class="tab-pane">
          <div class="billing-options" organization="organization"></div>
        </div>

        <!-- Billing History tab -->
        <div id="billing" class="tab-pane">
          <div ng-show="invoiceLoading">
            <i class="fa fa-spinner fa-spin fa-3x"></i>
          </div>

          <div ng-show="!invoiceLoading && !invoices">
            No invoices have been created
          </div>

          <div ng-show="!invoiceLoading && invoices">
            <table class="table">
              <thead>
                <th>Billing Date/Time</th>
                <th>Amount Due</th>
                <th>Status</th>
                <th></th>
              </thead>
              
              <tbody class="invoice" ng-repeat="invoice in invoices">
                <tr class="invoice-title">
                  <td ng-click="toggleInvoice(invoice.id)"><span class="invoice-datetime">{{ invoice.date * 1000 | date:'medium' }}</span></td>
                  <td ng-click="toggleInvoice(invoice.id)"><span class="invoice-amount">{{ invoice.amount_due / 100 }}</span></td>
                  <td>
                    <span class="invoice-status">
                      <span class="success" ng-show="invoice.paid">Paid - Thank you!</span>
                      <span class="danger" ng-show="!invoice.paid && invoice.attempted && invoice.closed">Payment failed</span>
                      <span class="danger" ng-show="!invoice.paid && invoice.attempted && !invoice.closed">Payment failed - Will retry soon</span>
                      <span class="pending" ng-show="!invoice.paid && !invoice.attempted">Payment pending</span>
                    </span>
                  </td>
                  <td>
                    <a ng-show="invoice.paid" href="/receipt?id={{ invoice.id }}" download="receipt.pdf" target="_new">
                      <i class="fa fa-download" title="Download Receipt" bs-tooltip="tooltip.title"></i>
                    </a>
                  </td>
                </tr>

                <tr ng-class="invoiceExpanded[invoice.id] ? 'in' : 'out'" class="invoice-details panel-collapse collapse">
                  <td colspan="3">
                    <dl class="dl-normal">
                      <dt>Billing Period</dt>
                      <dd>
                        <span>{{ invoice.period_start * 1000 | date:'mediumDate' }}</span> -
                        <span>{{ invoice.period_end * 1000 | date:'mediumDate' }}</span>
                      </dd>
                      <dt>Plan</dt>
                      <dd>
                        <span>{{ plan_map[invoice.plan].title }}</span>
                      </dd>
                    </dl>
                  </td>
                </tr>
              </tbody>
            </table>
          </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>