<div *ngIf="discoverZone" class="ui-key-value ui-left-info2">
    <div class="ui-g">
        <of-key-value [key]="'Host Range'" [value]="hostRange"></of-key-value>
        <of-key-value [key]="'Port Range'" [value]="portRange"></of-key-value>
        <div class="of-key-value-div">
            <span>Port type</span>
            <span class="ng-star-inserted ui-nopad">
                <span *ngIf="discoverZone.discoverHost.discoverPort.includeTCP">TCP</span>
                <span *ngIf="discoverZone.discoverHost.discoverPort.includeUDP">UDP</span>
            </span>
        </div>


        <div *ngIf="services.length > 0" class="ui-g-12 ui-top-border-1" style="text-align: right">
            <p-overlayPanel #op>
                <div *ngFor="let service of services">
                  {{service}}
                </div>
            </p-overlayPanel>

            <a style="cursor: pointer" (click)="op.toggle($event)">{{services.length}} services has selected.</a>
        </div>
    </div>
</div>