<h1>Discovery</h1>
<div class="ui-g">
  <div class="ui-g-12">
    <of-probe-selector [probeHostID]="probeHostID" (select)="selectedProbe=$event"></of-probe-selector>
    <of-probe-summary *ngIf="selectedProbe" @discoveryFilterAnim [probeHost]="selectedProbe"></of-probe-summary>
  </div>
</div>
<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">
    <!-- <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"></of-discovery-result>
  </div>
</div>

<ng-template #info>
  <p-panel [showHeader]="false">
    <div style="min-height: 98px">
      Network Discovery 설명 페이지
    </div>
  </p-panel>
</ng-template>