<div [style.height.px]="height">
  <div dir="rtl">
    <p-button (onClick)="onCancel()" icon="fa fa-fw fa-close"></p-button>
  </div>

  <div *ngIf="!started; else result">
    <of-probe-selector [preProbe]="probe" [visible]="visible" (probeSelected)="onProbeSelect($event)"></of-probe-selector>

    <p-blockUI [target]="df" [blocked]="!selectedProbe && !probe"></p-blockUI>
    <p-panel #df [showHeader]="false">
      <of-discovery-filter [probe]="selectedProbe" [requestStart]="requestStart" (discoveryRequested)="onDiscoveryStart($event)"></of-discovery-filter>
    </p-panel>

    <div dir="rtl">
      <button [disabled]="!selectedProbe && !probe" pButton type="button" label="Start" icon="fa-check" class="ui-button-width-fit"
        (click)="requestStart = true"></button>
      <button pButton type="button" label="Cancel" icon="fa-close" class="ui-button-secondary ui-button-width-fit" (click)="onCancel()"></button>
    </div>
  </div>

  <ng-template #result>
    <of-discovery-result #resultComponent (close)="onCancel()"></of-discovery-result>

    <div dir="rtl">
      <button [disabled]="!selectedProbe && !probe" pButton type="button" label="Start" icon="fa-check" class="ui-button-width-fit"
        (click)="onSave()"></button>
      <button pButton type="button" label="Cancel" icon="fa-close" class="ui-button-secondary ui-button-width-fit" (click)="onCancel()"></button>
    </div>
  </ng-template>
</div>