<of-probe-selector [probeHostID]="probeHostID" (select)="selectedProbe=$event"></of-probe-selector>
<of-probe-summary *ngIf="selectedProbe" @discoveryFilterAnim [probeHost]="selectedProbe"></of-probe-summary>
<div class="ui-g">
  <div class="ui-g-12 ui-md-3">
    <p-accordion [multiple]="true">
      <p-accordionTab header="Discovery Settings" [selected]="true">
        <span *ngIf="!selectedProbe">Choose a Probe to perform Discovery.</span>
        <of-discovery-search-config *ngIf="!requested && selectedProbe" @discoveryFilterAnim [probeHost]="selectedProbe" (requestDiscovery)="onRequestDiscovery($event)"></of-discovery-search-config>
        <of-discovery-request-summary *ngIf="discoverZone" @discoveryFilterAnim [discoverZone]="discoverZone"></of-discovery-request-summary>
      </p-accordionTab>
      <p-accordionTab header="Filter" [selected]="requested" [disabled]="!requested">
        <of-discovery-search-filter #discoveryFilter (search)="filterWord=$event" (serviceSelect)="filterServices=$event"></of-discovery-search-filter>
      </p-accordionTab>
    </p-accordion>
  </div>

  <div class="ui-g-12 ui-md-9">
    <p-panel>
      <!-- <button class="ui-button-danger ui-button-width-fit" type="button" label="Stop" icon="ui-icon-close" pButton (click)="onRequestStop()"></button> -->
      <of-discovery-result #discoveryResult *ngIf="requested else info" 
      [probeHost]="selectedProbe" 
      [filterWord]="filterWord"
      [filterServices]="filterServices"
      [finished]="finished"
      ></of-discovery-result>
    </p-panel>
  </div>
</div>

<ng-template #info>
  <div style="min-height: 100vh">
    Network Discovery 설명 페이지
  </div>
</ng-template>