<div class="site-inner col-xlg-10 col-lg-9 col-md-9 col-sm-9 col-xs-9 site-panel">
    <div class="site-body">
        <div class="panel-content">
            <div class="header">Site Information </div>
            <div class="row">
                <div class="bs-component">
                    <table class="table table-striped table-hover">
                        <thead>
                        <tr>
                            <th>Id</th>
                            <th>Site 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.sites.length <= 0">
                            <td colspan="5" style="text-align:center;">Loading new data!!</td>
                        </tr>
                        <tr dir-paginate="site in vm.sites|itemsPerPage:vm.sitesPerPage" class="table-border" total-items="vm.totalSites">
                            <td>{{site.id}}</td>
                            <td>{{site.name}}</td>
                            <td>{{site.clientName}}</td>
                            <td>{{site.siteName}}</td>
                            <td>{{site.deviceserial}}</td>
                            <td>{{site.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.sites.edit({id: site.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.sites.view({id: site.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.deleteSite(row.id,  $index)"  app-table-button="trash" class="btn btn-info"> <span class="glyphicon glyphicon-trash"></span><span class="hidden-xs hidden-sm">&nbsp;{{ 'sitelist.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.sitesPerPage" ng-options="i for i in [1,10,15,20,25]">
                                </select>
                            </label>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
