            <div class="checkpoint-inner col-xlg-10 col-lg-9 col-md-9 col-sm-9 col-xs-9 checkpoint-panel">
                <div class="checkpoint-body">
                    <div class="panel-content">
                        <div class="header">Checkpoint Information </div>
                        <div class="row">
                            <div class="bs-component">
                                <table class="table table-striped table-hover">
                                    <thead>
                                    <tr>
                                        <th>Id</th>
                                        <th>Checkpoint Name</th>
                                        <th>Client Name</th>
                                        <th>Site Name</th>
                                        <th>Device Serial</th>
                                        <th>Created At</th>
                                        <th>
                                        </th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr ng-show="vm.checkpoints.length <= 0">
                                        <td colspan="5" style="text-align:center;">Loading new data!!</td>
                                    </tr>
                                    <tr dir-paginate="checkpoint in vm.checkpoints|itemsPerPage:vm.checkpointsPerPage" class="table-border" total-items="vm.totalCheckpoints">
                                        <td>{{checkpoint.id}}</td>
                                        <td>{{checkpoint.name}}</td>
                                        <td>{{checkpoint.clientName}}</td>
                                        <td>{{checkpoint.siteName}}</td>
                                        <td>{{checkpoint.deviceserial}}</td>
                                        <td>{{checkpoint.createdAt | date:'dd/MM/yyyy HH:mm:ss' }}</td>
                                        <td><div class="btn-group btn-group-sm ">
                                            <button class="btn btn-info" type="button" ui-sref="main.checkpoints.edit({id: checkpoint.id})" app-table-button="pencil"> <span class="glyphicon glyphicon-pencil"></span><span class="hidden-xs hidden-sm">&nbsp; {{ 'userlist.edit' | translate }}</span> </button>
                                            <button class="btn btn-info" type="button" ui-sref="main.checkpoints.view({id: checkpoint.id})" ng-click="displayDataEntries(form)" app-table-button="list"> <span class="glyphicon glyphicon-list"></span><span class="hidden-xs hidden-sm">&nbsp;{{ 'userlist.view' | translate }}</span> </button>
                                            <button type="button" data-ng-click="vm.deleteCheckpoint(row.id,  $index)"  app-table-button="trash" class="btn btn-info"> <span class="glyphicon glyphicon-trash"></span><span class="hidden-xs hidden-sm">&nbsp;{{ 'checkpointlist.delete' | translate }}</span> </button>
                                        </div></td>
                                    </tr>
                                    </tbody>
                                </table>

                                <div class="col-xlg- col-lg-6 col-md-6 col-sm-6 col-xs-6">
                                <dir-pagination-controls
                                        max-size="8"
                                        direction-links="true"
                                        boundary-links="true"
                                        on-page-change="vm.pageChanged(newPageNumber)">
                                </dir-pagination-controls>
                                </div>
                                <div class="col-xlg- col-lg-6 col-md-6 col-sm-6 col-xs-6 pull-right">
                                <div class="form-group select-page-size-wrap ">
                                    <label>
                                        <select class="form-control selectpicker show-tick" title="Rows on page" selectpicker
                                                ng-model="vm.checkpointsPerPage" ng-options="i for i in [1,10,15,20,25]">
                                        </select>
                                    </label>
                                </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
