<div ui-view>

<div class=“panel panel-default”>

<!-- Default panel contents -->
<div class="panel-heading">All reports for: 
  <samp>{{ ctrl.node.name }}</samp> <span class="badge" ng-pluralize
  count="ctrl.pagination.elements()"
  when="{'0': 'no reports',
    '1': '1 report',
    'other': '{} reports'}"></span>
</div>

<!-- Table -->
<table class="table table-striped table-hover">
  <thead>
    <tr>
      <th>#</th>
      <th>Configuration version</th>
      <th>Status</th>
      <th>Environment</th>
      <th>Last run</th>
    </tr>
  </thead>
  <tbody>
    <tr 
      dir-paginate="report in ctrl.node.reports | itemsPerPage: ctrl.pagination.limit() | orderBy: '-time'"
      total-items="ctrl.pagination.elements()">
      <td>{{ $index + 1 }}</td>
      <td><samp>{{ report.configuration_version }}</samp></td>
      <td><ws-status-button 
        status="report.status" 
        id="report.id"
        idname="'reportId'"
        route="'report'"
        ></ws-status-button></td>
      <td>{{ report.environment }}</td>
      <td title="{{ report.time }}">{{ report.time | amCalendar }}</td>
    </tr>
  </tbody>
</table>

</div>

<nav class=“text-center”>

<dir-pagination-controls
  on-page-change="ctrl.onPageChange(newPageNumber)"
  boundary-links="true"
  ></dir-pagination-controls>

</nav>

</div>