<div class="billing-invoices-element">
<div class="cor-loader" ng-show="loading"></div>
<div class="empty" ng-if="!loading && !invoices.length">
<div class="empty-primary-msg">No billing invoices found.</div>
<div class="empty-secondary-msg">
This account has not been billed by <span class="registry-name"></span>.
</div>
<div ng-show="!loading && invoices.length">
<table class="co-table">
<thead>
<td>Billing Date/Time</td>
<td>Amount Due</td>
<td>Status</td>
<td class="options-col"></td>
</thead>
<tbody class="invoice" ng-repeat="invoice in invoices">
<tr class="invoice-title">
<td><span class="invoice-datetime">{{ invoice.date * 1000 | date:'medium' }}</span></td>
<td><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 class="options-col">
<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>
</tr>
</tbody>
</table>