<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></of-discovery-search-filter>
      </p-accordionTab>
    </p-accordion>
  </div>

  <div class="ui-g-12 ui-md-9">
    <p-panel>
      <of-discovery-result *ngIf="requested else info" [started]="requested" (stop)="onRequestDiscoveryStop($event)"></of-discovery-result>
    </p-panel>
  </div>
</div>

<ng-template #info>
  INFO
</ng-template>