<h1>Unauthorized</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 #dt [value]="noauthProbes" selectionMode="single" dataKey="id">
    <ng-template pTemplate="header">
      <tr>
        <th style="width: 3.25em" pResizableColumn></th>
        <th style="width: 20em">Probe Key</th>
        <th>Host Name</th>
        <th>OS</th>
        <th style="width: 7em">Created at</th>
      </tr>
    </ng-template>
    <ng-template pTemplate="body" let-rowData let-expanded="expanded" let-columns="columns">
      <tr [pSelectableRow]="rowData" [pRowToggler]="rowData">
        <td>
          <a href="#">
            <i [ngClass]="expanded ? 'fa fa-fw fa-chevron-circle-down' : 'fa fa-fw fa-chevron-circle-right'"></i>
          </a>
        </td>
        <td>{{rowData.tempProbeKey}}</td>
        <td>{{rowData.descriptions.host.name}}</td>
        <td>{{rowData.descriptions.host.os}}</td>
        <td>{{rowData.createDate | date: 'dd/MM/yyyy'}}</td>
      </tr>
    </ng-template>
    <ng-template pTemplate="rowexpansion" let-rowData let-columns="columns">
      <tr>
        <td [attr.colspan]="5">
          <div class="ui-g ui-g-12">

            <div class="ui-g-12 ui-md-6">
              <div class="ui-g-12">
                <b>Platform:</b> {{rowData.descriptions.host.platform}}
              </div>

              <div class="ui-g-12">
                <b>Platform family:</b> {{rowData.descriptions.host.platformFamily}}
              </div>
              <div class="ui-g-12">
                <b>Kernel:</b> {{rowData.descriptions.host.kernelVersion}}
              </div>
              <div class="ui-g-12">
                <b>HostID:</b> {{rowData.descriptions.host.hostID}}
              </div>
              <div class="ui-g-12">
                <b>Connected:</b>
                <ng-container [ngSwitch]="rowData.connectDate">
                  <ng-container *ngSwitchCase="undefined"> Not Connected</ng-container>
                  <ng-container *ngSwitchDefault> {{rowData.connectDate | date: 'dd/MM/yyyy'}} ({{rowData.connectAddress}})</ng-container>
                </ng-container>
              </div>
            </div>

            <div class="ui-g-12 ui-md-6">
              <div class="ui-g">
                <div class="ui-g-12">
                  <b>NIC:</b> {{rowData.descriptions.network.name}}
                </div>
                <div class="ui-g-12">
                  <b>Network Address:</b> {{rowData.descriptions.network.address}}
                </div>
                <div class="ui-g-12">
                  <b>Gateway:</b> {{rowData.descriptions.network.gateway}}
                </div>
                <div class="ui-g-12">
                  <b>Mac Address:</b> {{rowData.descriptions.network.macAddress}}
                </div>
                <div class="ui-g-12">
                </div>
              </div>
            </div>
            <div class="ui-g-12" dir="rtl">
              <button class="ui-button-danger ui-button-width-fit" type="button" label="Deny" icon="ui-icon-close" pButton (click)="onAcceptOrDeny(false, rowData)"></button>
              <button class=" ui-button-width-fit" type="button" label="Accept" icon="fa-check" pButton (click)="onAcceptOrDeny(true, rowData)"></button>
            </div>
          </div>
        </td>
      </tr>
    </ng-template>
  </p-table>
  <p-confirmDialog header="Confirmation" icon="fa ui-icon-warning" width="425"></p-confirmDialog>
  <!-- <p-growl [(value)]="msgs"></p-growl> -->
</p-panel>