<h1>Probes</h1>
<of-error-message [error]="error$ | async" [closable]="false"></of-error-message>
<of-block-progressbar [target]="content" [pending]="pending$ | async"></of-block-progressbar>

<p-panel #content [showHeader]="false" class="block-panel">
  <p-table [value]="probeHosts$ | async" selectionMode="single" (onRowSelect)="onProbeSelect($event)" [resizableColumns]="true">
    <ng-template pTemplate="header">
      <tr>
        <th>Probe Name</th>
        <th>Uptime</th>
        <th style="width:10em">IP</th>
        <th style="width:8em">OS</th>
        <th style="width:10em">CIDR</th>
        <th pResizableColumn>Targets</th>
        <th style="width:8em">Authroized at</th>
        <th style="width:9em">Authroized by</th>
      </tr>
    </ng-template>
    <ng-template pTemplate="body" let-probeHost>
      <tr [pSelectableRow]="probeHost">
        <td>{{probeHost.probe.displayName}}</td>
        <td>{{getUptime(probeHost.probe)}}</td>
        <td>{{probeHost.host.ipv4}}</td>
        <td>{{probeHost.host.os.vendor.name}}</td>
        <td>{{probeHost.probe.cidr}}</td>
        <td>{{probeHost.probe.targetCount}}</td>
        <td>{{probeHost.probe.authorizeDate | date: 'dd.MM.yyyy'}}</td>
        <td>{{probeHost.probe.authorizeMember.name}}</td>
      </tr>
    </ng-template>
  </p-table>
</p-panel>