<h1>Targets</h1>

<p-table [value]="infras" 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: 8em">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-infra let-rowIndex="rowIndex">
    <tr [pSelectableRow]="infra">
      <td>{{rowIndex + 1}}</td>
      <td>??</td>
      <td>{{infra.infraType.name}}</td>
      <td>{{infra.target.displayName}}</td>
      <td>{{infra.target.sensorCount}}</td>
      <td>{{infra.createDate | date: 'dd.MM.yyyy'}}</td>
      <td>
        <button type="button" label="Add Sensor" icon="ui-icon-add" pButton class="ui-s-button" (click)="onAddSensor(infra.target)"></button>
      </td>
    </tr>
  </ng-template>
</p-table>
<p-paginator [rows]="pageSize" [totalRecords]="totalLength" (onPageChange)="onPaging($event)"></p-paginator>


<p-dialog [modal]="true" [width]="800" [(visible)]="sensorSettingDisplay" [showHeader]="false" [closeOnEscape]="false">
  <of-sensor-setting [visible]="sensorSettingDisplay" [preTarget]="target" (close)="onSensorSettingClose()"></of-sensor-setting>
</p-dialog>