<h1>Info</h1>

<p-dialog [showHeader]="false" [closeOnEscape]="false" [modal]="true" header="Discovery" [width]="800" [(visible)]="display">
  <of-discovery-setting [probe]="probe" [visible]="display" (close)="onDiscoveryClose()"></of-discovery-setting>
</p-dialog>
<div class="ui-g ui-bottom-space-10">
  <p-panel [showHeader]="false" class="nopad">
    <div *ngIf="probe">

      <div class="ui-inputgroup">
        <span class="md-inputfield">
          <input #input type="text" pInputText value="{{probe.displayName}}" (keypress)="onDisplayNameChangeKeypress($event, input.value)">
          <label></label>
        </span>
        <button pButton label="Save" type="button" (click)="onDisplayNameChange(input.value)"></button>
      </div>

      <div class="ui-g form-group">
        <div class="ui-g-12 ui-md-6 ui-key-value ui-bottom-border-1 ui-nopad">
          <of-key-value [key]="'CIDR'" [value]="probe.cidr"></of-key-value>
        </div>
        <div class="ui-g-12 ui-md-6 ui-key-value ui-bottom-border-1 ui-nopad">
          <of-key-value [key]="'Description'" [value]="probe.description"></of-key-value>
        </div>
        <div class="ui-g-12 ui-md-6 ui-key-value ui-bottom-border-1 ui-nopad">
          <of-key-value [key]="'Key'" [value]="probe.probeKey"></of-key-value>
        </div>
        <div class="ui-g-12 ui-md-6 ui-key-value ui-bottom-border-1 ui-nopad">
          <of-key-value [key]="'Authrozied at'" [value]="probe.authorizeDate | date: 'dd/MM/yyyy'"></of-key-value>
        </div>
        <div class="ui-g-12 ui-md-6 ui-key-value ui-bottom-border-sm-1 ui-nopad">
          <of-key-value [key]="'Authrozied by'" [value]="probe.authorizeMember.name"></of-key-value>
        </div>
        <div class="ui-g-12 ui-md-6 ui-key-value ui-nopad">
          <of-key-value [key]="'IP Range'" [value]="IPRange"></of-key-value>
        </div>
      </div>
    </div>
  </p-panel>
</div>
<div class="ui-g" dir="rtl">
  <button class="ui-button-danger ui-button-width-fit" type="button" label="Remove this Probe" icon="ui-icon-close" pButton
    (click)="onRemoveClick()"></button>
  <button class="ui-button-width-fit" type="button" label="Discovery" icon="ui-icon-search" pButton (click)="onDiscoveryClick()"></button>
</div>
<p-confirmDialog header="Confirmation" icon="fa ui-icon-warning" width="425"></p-confirmDialog>
<p-growl [(value)]="msgs"></p-growl>