<ui-view>
    <div ng-controller="InvoicesCtrl">


    <div class="horizontal-scroll">
      <div class="form-group select-page-size-wrap ">
        <label>Rows on page
          <select class="form-control selectpicker show-tick" title="Rows on page" selectpicker
                  ng-model="smartTablePageSize" ng-options="i for i in [5,10,15,20,25]">
          </select>
        </label>
      </div>
      <table class="table" st-table="smartTableData">
        <thead>
        <tr class="sortable ">
          <th class="table-id" st-sort="id" st-sort-default="true">Invoice #</th>
          <th st-sort="date">Invoice Date</th>
          <th st-sort="expires">Due date</th>
          <th st-sort="amount">Total </th>
          <th st-sort="status">Status </th>
        
        </tr>
        <tr>
          <th></th>
          <th><input st-search="date" placeholder="Search Date" class="input-sm form-control search-input"
                     type="search"/></th>
        
          <th><input st-search="expires" placeholder="Search Due date" class="input-sm form-control search-input"
                     type="search"/></th>
          <th><input st-search="amount" placeholder="Search amount" class="input-sm form-control search-input" type="search"/>
          </th>
          <th><input st-search="status" placeholder="Search Status" class="input-sm form-control search-input" type="search"/>
          </th>
         
        </tr>
        </thead>
        <tbody>
        <tr ng-repeat="invoice in  vm.invoices">
          <td class="table-id">{{invoice.id}}</td>
          <td>{{invoice.date | date:'dd/MM/yyyy HH:mm:ss' }}</td>
          <td>{{invoice.expires | date:'dd/MM/yyyy HH:mm:ss' }} </td>
          <td>${{invoice.amount}}</td>
          <td>{{invoice.status}}
             <span ng-if="invoice.status == 'false'"><button class="btn btn-info" type="button" ui-sref="main.invoices.view({id: invoice.id})"  app-table-button="list">Pay Now</button></span>
            <span ng-if="invoice.status == 'true'"><button class="btn btn-info" type="button" ui-sref="main.payments.view({id: invoice.id})"  app-table-button="list"></button>Paid</button></span>
            </td>
      
        </tr>
        </tbody>
        <tfoot>
        <tr>
          <td colspan="6" class="text-center">
            <div st-pagination="" st-items-by-page="smartTablePageSize" st-displayed-pages="5"></div>
          </td>
        </tr>
        </tfoot>
      </table>
    </div>

    </div>
</ui-view>