
<div class="row">
    <div class="col-md-2 fusio-sidebar" ng-include src="'app/account/nav.html'"></div>
    <div class="col-md-10">
        <div class="fusio-content">
            <h2>Invoices</h2>
            <div uib-alert ng-class="'alert-info'">
              List of available invoices. 
            </div>

          <table class="table">
            <colgroup>
              <col width="100" />
              <col width="*" />
              <col width="100" />
              <col width="100" />
              <col width="50" />
            </colgroup>
            <thead>
            <tr>
              <th>Status</th>
              <th>Invoice-Id</th>
              <th>Amount</th>
              <th>Date</th>
              <th></th>
            </tr>
            </thead>
            <tbody>
            <tr ng-repeat="invoice in invoices">
              <td>
            <span ng-switch="invoice.status">
                <span ng-switch-when="0"><span class="label label-info fusio-badge">Open</span></span>
                <span ng-switch-when="1"><span class="label label-success fusio-badge">Payed</span></span>
                <span ng-switch-when="2"><span class="label label-danger fusio-badge">Deleted</span></span>
            </span>
              </td>
              <td>{{invoice.displayId}}</td>
              <td>{{invoice.amount | currency : symbol : 2}}</td>
              <td>{{invoice.insertDate | date: 'shortDate'}}</td>
              <td>
                <button class="btn btn-default" ng-disabled="invoice.status != 0 || loading" ng-click="pay(invoice)">Pay</button>
              </td>
            </tr>
            </tbody>
        </div>
    </div>
</div>
