quay/static/directives/billing-invoices.html

<div class="billing-invoices-element">
  <div ng-show="loading">
    <div class="quay-spinner"></div>
  </div>

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

  <div ng-show="!loading && 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" data-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>
            </dl>
          </td>
        </tr>
      </tbody>
    </table>
  </div>

</div>