quay/static/directives/plan-manager.html

<div class="plan-manager-element">
  <!-- Loading/Changing -->
  <div class="quay-spinner 3x" ng-show="planLoading"></div>

  <!-- Alerts -->
  <div class="alert alert-danger" ng-show="limit == 'over' && !planLoading">
    You are using more private repositories than your plan allows. Please
    upgrade your subscription to avoid disruptions in your <span ng-show="organization">organization's</span> service.
  </div>
  
  <div class="alert alert-warning" ng-show="limit == 'at' && !planLoading">
    You are at your current plan's number of allowed private repositories. It might be time to think about
    upgrading your subscription to avoid future disruptions in your <span ng-show="organization">organization's</span> service.
  </div>

  <div class="alert alert-success" ng-show="limit == 'near' && !planLoading">
    You are nearing the number of allowed private repositories. It might be time to think about
    upgrading your subscription to avoid future disruptions in your <span ng-show="organization">organization's</span> service.
  </div>      

  <!-- Trial info -->
  <div class="alert alert-success" ng-show="subscription.trialEnd != null" style="font-size: 125%">
    Free trial until <strong>{{ parseDate(subscription.trialEnd)  | date }}</strong>
  </div>
  
  <!-- Chart -->
  <div class="usage-chart" total="subscribedPlan.privateRepos || 0"
       current="subscription.usedPrivateRepos || 0"
       limit="limit"
       usage-title="Repository Usage"
       ng-show="!planLoading"></div>

  <!-- Plans Table -->
  <table class="table table-hover plans-list-table" ng-show="!planLoading">
    <thead>
      <td>Plan</td>
      <td>Private Repositories</td>
      <td style="min-width: 64px">Price</td>
      <td></td>
    </thead>
     
    <tr ng-repeat="plan in plans" ng-show="isPlanVisible(plan, subscribedPlan)"
        ng-class="{'active':(subscribedPlan.stripeId === plan.stripeId), 'deprecated-plan':plan.deprecated}">
      <td>
        {{ plan.title }}
        <div class="deprecated-plan-label" ng-show="plan.deprecated">
          <span class="context-tooltip" data-title="This plan has been discontinued. As a valued early adopter, you may continue to stay on this plan indefinitely." bs-tooltip="tooltip.title" data-placement="right">Discontinued Plan</span>
        </div>
      </td>
      <td>{{ plan.privateRepos }}</td>
      <td><div class="plan-price">${{ plan.price / 100 }}</div></td>
      <td class="controls">
        <div ng-switch='plan.deprecated'>
          <div ng-switch-when='true'>
            <button class="btn btn-danger" ng-click="cancelSubscription()">
              <span class="quay-spinner" ng-show="planChanging"></span>
              <span ng-show="!planChanging">Cancel</span>
            </button>
          </div>
          <div ng-switch-default>
            <button class="btn" ng-show="subscribedPlan.stripeId !== plan.stripeId"
                    ng-class="subscribedPlan.price == 0 ? 'btn-primary' : 'btn-default'"
                    ng-click="changeSubscription(plan.stripeId)">
              <span class="quay-spinner" ng-show="planChanging"></span>
              <span ng-show="!planChanging && subscribedPlan.price != 0">Change</span>
              <span ng-show="!planChanging && subscribedPlan.price == 0 && !isExistingCustomer">Start Free Trial</span>
              <span ng-show="!planChanging && subscribedPlan.price == 0 && isExistingCustomer">Subscribe</span>
            </button>
            <button class="btn btn-danger" ng-show="subscription.plan === plan.stripeId && plan.price > 0"
                    ng-click="cancelSubscription()">
              <span class="quay-spinner" ng-show="planChanging"></span>
              <span ng-show="!planChanging">Cancel</span>
            </button>
          </div>
        </div>
      </td>
    </tr>
  </table>
</div>