<!--
~ Copyright 2018-present Open Networking Foundation
~
~ Licensed under the Apache License, Version 2.0 (the "License");
~ you may not use this file except in compliance with the License.
~ You may obtain a copy of the License at
~
~     http://www.apache.org/licenses/LICENSE-2.0
~
~ Unless required by applicable law or agreed to in writing, software
~ distributed under the License is distributed on an "AS IS" BASIS,
~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
~ See the License for the specific language governing permissions and
~ limitations under the License.
-->
<svg:g class="topo2-force" xmlns:svg="http://www.w3.org/2000/svg">
    <svg:g id="new-zoom-layer">
        <svg:g class="topo2-links">
            <!-- Template explanation: Creates an SVG Group and in
                line 1) use the svg component onos-linksvg, setting it's link
                 Input parameter to the link item from the next line
                line 2) Use the built in NgFor directive to iterate through the
                 set of links filtered by the filteredLinks() function.
            -->
            <svg:g onos-linksvg [link]="link"
                   *ngFor="let link of filteredLinks()"
                   (selectedEvent)="updateSelected($event)">
            </svg:g>
        </svg:g>
        <svg:g class="topo2-linkLabels" />
        <svg:g class="topo2-numLinkLabels" />
        <svg:g class="topo2-nodes">
            <!-- Template explanation - create an SVG Group and
                line 1) use the svg component onos-devicenodesvg, setting it's device
                 Input parameter to the device item from the next line
                line 2) Use the built in NgFor directive to iterate through all
                 of the devices in the chosen layer index. The current iteration
                 is in the device variable
                line 3) Use the onosDraggable directive and pass this device in to
                 its draggableNode Input parameter and setting the draggableInGraph
                 Input parameter to 'graph'
                line 4) when the onos-devicenodesvg component emits the selectedEvent
                 call the updateSelected() method of this (forcesvg) component
            -->
            <svg:g onos-devicenodesvg [device]="device"
                   *ngFor="let device of regionData.devices[visibleLayerIdx()]"
                   onosDraggableNode [draggableNode]="device" [draggableInGraph]="graph"
                   (selectedEvent)="updateSelected($event)">
            </svg:g>
            <!-- Template explanation - only display the hosts if 'showHosts' is set true -->
            <svg:g *ngIf="showHosts">
                <!-- Template explanation - create an SVG Group and
                    line 1) use the svg component onos-hostnodesvg, setting it's host
                     Input parameter to the host item from the next line
                    line 2) Use the built in NgFor directive to iterate through all
                     of the hosts in the chosen layer index. The current iteration
                     is in the 'host' variable
                    line 3) Use the onosDraggable directive and pass this host in to
                     its draggableNode Input parameter and setting the draggableInGraph
                     Input parameter to 'graph'
                    line 4) when the onos-hostnodesvg component emits the selectedEvent
                     call the updateSelected() method of this (forcesvg) component
                -->
                <svg:g onos-hostnodesvg [host]="host"
                       *ngFor="let host of regionData.hosts[visibleLayerIdx()]"
                       onosDraggableNode [draggableNode]="host" [draggableInGraph]="graph"
                       (selectedEvent)="updateSelected($event)">
                </svg:g>
            </svg:g>
            <svg:g onos-subregionnodesvg [subRegion]="subRegion"
                   *ngFor="let subRegion of regionData.subregions"
                   onosDraggableNode [draggableNode]="host" [draggableInGraph]="graph">
            </svg:g>
        </svg:g>
    </svg:g>
    <!--<svg:g class="topo2-portLabels">-->
        <!--&lt;!&ndash;TODO make each of these in to a component that can be inserted &ndash;&gt;-->
        <!--<svg:g *ngIf="selectedLink !== null" id="topo-port-src" class="portLabel" opacity="1">-->
            <!--<rect x="0" y="0" width="1" height="1" [ngStyle]="{'transform': 'scale(1)'}"></rect>-->
            <!--<text dy="0.3em" [ngStyle]="{'transform': 'scale(1)'}">{{ selectedLink.portA }}</text>-->
        <!--</svg:g>-->

        <!--<svg:g *ngIf="selectedLink !== null" id="topo-port-tgt" class="portLabel" opacity="1">-->
            <!--<rect x="0" y="0" width="1" height="1" [ngStyle]="{'transform': 'scale(1)'}"></rect>-->
            <!--<text dy="0.3em" [ngStyle]="{'transform': 'scale(1)'}">{{ selectedLink.portA }}</text>-->
        <!--</svg:g>-->
    <!--</svg:g>-->
</svg:g>