<!--
~ 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 xmlns:svg="http://www.w3.org/2000/svg" #devSvg
       [attr.transform]="'translate(' + device?.x + ',' + device?.y + '), scale(' + scale + ')'"
        [ngClass]="['node', 'device', device.online?'online':'', selected?'selected':'']"
        (click)="toggleSelected(device)">
    <svg:rect class="node-container" x="-18" y="-18" width="36" height="36">
              <!--[attr.width]="devText.getComputedTextLength()+36" -->
              <!--[@deviceLabelToggle]="{ value: labelToggle, params: {txtWidth: devSvg.getBBox().width+'px' }}">-->
    </svg:rect>
    <svg:rect x="-16" y="-16" width="32" height="32" [ngStyle]="{'fill': 'rgb(91, 153, 210)'}">
    </svg:rect>
    <svg:text #devText text-anchor="start" y="0.3em" x="22" [ngStyle]="{'transform': 'scale(' + scale + ')'}">
        {{ labelToggle == 0 ? '': labelToggle == 1 ? device.id:device.props.name }}
    </svg:text>
    <!-- It's not possible to drive the following xref dynamically -->
    <svg:use *ngIf="device.type == 'switch'" xlink:href="#m_switch" width="36" height="36" x="-18" y="-18">
    </svg:use>
    <svg:use *ngIf="device.type == 'roadm'" xlink:href="#m_roadm" width="36" height="36" x="-18" y="-18">
    </svg:use>
</svg:g>