<h1>Targets</h1>
<div *ngIf="!targetList; else content">
  No data
</div>

<ng-template #content>
  <div class="ui-g">
    <div class="ui-g-12 ui-md-3">
      <of-target-filter></of-target-filter>
    </div>

    <div class="ui-g-12 ui-md-9">
      <p-table [value]="targetList" selectionMode="single" (onRowSelect)="onRowSelect($event)" [resizableColumns]="true" >
        <ng-template pTemplate="header">
          <tr>
            <th style="width: 4em">No.</th>
            <th style="width: 8em">Status</th>
            <th style="width: 15em">Type</th>
            <th>Name</th>
            <th style="width: 15em">Sensors</th>
            <th style="width: 8em">Created at</th>
            <th style="width: 10em"></th>
          </tr>
        </ng-template>
        <ng-template pTemplate="body" let-target let-rowIndex="rowIndex">
          <tr [pSelectableRow]="target">
            <td>{{(rowIndex + 1) }}</td>
            <td></td>
            <td>{{target.infra.metaInfraType.name}}</td>
            <td>{{target.displayName}}</td>
            <td>{{target.sensorCount}}</td>
            <td>{{target.createDate | date: 'yyyy-MM-dd'}}</td>
            <td>
              <button type="button" label="Add Sensor" icon="ui-icon-add" pButton class="ui-s-button" (click)="onAddSensor(target)"></button>
            </td>
          </tr>
        </ng-template>
      </p-table>
    </div>
  </div>
<!--<p-paginator #paginator [rows]="targetPage.size" [totalRecords]="targetPage.totalElements" [first]="(pageIdx-1) * targetPage.size"-->
             <!--(onPageChange)="onPaginate($event)"></p-paginator>-->

</ng-template>