<div *ngIf="node.isSelectable();else group" class="layer">
    <mat-checkbox
        [(ngModel)]="checked"
        [(indeterminate)]="indeterminate"
        (change)="toggleLayer($event)"
        matTooltip="{{ node.description || node.title || node.name }} ({{ node.gisType }}, {{ node.count }})"
        matTooltipPosition="right"
        [class.hasPlugins]="!!node.tagPlugins"
        [hidden]='isHidden() | async'
        >
        <div class="gisaf-intext"
            [matMenuTriggerFor]="layerNodeMenu"
            [matMenuTriggerData]="{node: node}"
            [innerHTML]='node.symbol'
            >
        </div>
        <div class="layer-title">{{node.title || node.name || node.description}}<!-- ({{ node.count }})--></div>
    </mat-checkbox>
</div>

<ng-template #group>
    <div
        [matTooltip]="node.description"
        matTooltipPosition="right"
        class="layer-group">
        <span (click)="toggleNode.emit($event)">
            {{ node.title || node.name }}
        </span>
        <mat-icon class="group-menu" [matMenuTriggerFor]="layerGroupNodeMenu" [matMenuTriggerData]="{node: node}">
            more_vert
        </mat-icon>
    </div>
</ng-template>