<of-block-progressbar [target]="content" [pending]="!finished"></of-block-progressbar>

<p-panel #content [showHeader]="false" class="block-panel">

    <p-messages [(value)]="msgs"></p-messages>

    <p-tree [value]="zoneNode" layout="vertical">
        <!-- ZONE node template -->
        <ng-template let-node pTemplate="ZONE">
            <div>
                {{node.label}}
            </div>
        </ng-template>

        <!-- HOST node template -->
        <ng-template let-node pTemplate="HOST">
            <div @discoveryResultAnim>
                <div *ngIf="checkHighlight(node.label) else unhighlightHost">
                    <p-toggleButton onLabel="{{node.label}}" offLabel="{{node.label}}" onIcon="fa-check" offIcon="fa-square" [style]="{'width':'200px'}"
                        (onChange)="onTargetSelect($event, node)"></p-toggleButton>
                </div>

                <ng-template #unhighlightHost>
                    <p-toggleButton onLabel="{{node.label}}" offLabel="{{node.label}}" onIcon="fa-check" offIcon="fa-square" [style]="{'width':'200px', 'opacity': '0.2'}"
                        (onChange)="onTargetSelect($event, node)"></p-toggleButton>
                </ng-template>
            </div>
        </ng-template>

        <!-- SERVICE node template -->
        <ng-template let-node pTemplate="SERVICE">
            <div @discoveryResultAnim>
                <div *ngIf="checkHighligt(node.data.name) else unhighlightServ">
                    <p-toggleButton onLabel="{{node.label}} {{node.data.portType}}" offLabel="{{node.label}} {{node.data.portType}} {{node.data.portNumber}}"
                        onIcon="fa-check" offIcon="fa-square" [style]="{'width':'300px'}" (onChange)="onTargetSelect($event, node.data.target)"></p-toggleButton>
                </div>

                <ng-template #unhighlightServ>
                    <p-toggleButton onLabel="{{node.label}} {{node.data.portType}}" offLabel="{{node.label}} {{node.data.portType}} {{node.data.portNumber}}"
                        onIcon="fa-check" offIcon="fa-square" [style]="{'width':'300px', 'opacity': '0.2'}" (onChange)="onTargetSelect($event, node.data.target)"></p-toggleButton>
                </ng-template>

            </div>
        </ng-template>
    </p-tree>

    <button class="ui-button-width-fit" [disabled]="selectedItems.length === 0" type="button" label="Save" icon="ui-icon-close"
        pButton (click)="saveTargets()"></button>

</p-panel>