<ui-view>
    <div class="billing-page" ng-controller="PaymentsCtrl">
    
    
    
    
    
     
    
       <div class="billing-inner">
    
        
    
                  
    
        <div class="billing-inner">
    
     <div class="col-xlg-12 col-lg-12 col-md-12 col-sm-12 col-xs-12 pull-left billing-panel">
    
       <div class="billing-body">
    
         <div class="panel-content">
    
           <div class="header">Payment History</div>
    
           <div class="row">
    
             <div class="col-xlg-12 col-lg-12 col-md-12 col-sm-12 col-xs-12">
    
    
    
     
    
    <div class="container group">
    
    <div class="col-xlg-12 col-lg-12 col-md-12 col-sm-12 col-xs-12">
    
      <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.payment.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>
    
    
    
    
    
    </div>
    
       </div>
    
     </div>
    
     </div>
    
    </div>
    
        </div>
    
     </div>
    
    </div>
    
    
    
    </div>
    </ui-view>