<div class="group" #group>

    <div class="group-header" (click)="toggle()">
        <span class="group-arrow">
            <mat-icon [ngClass]="{'flip-arrow': !data.closed}">keyboard_arrow_up</mat-icon>
        </span>
        <span class="group-title mat-body-2"  [ngClass]="{'data-error': data.error===true}" translate>
            {{data.name}}   
        </span>
        <span class="group-options">
            <span [matMenuTriggerFor]="menu"></span> 
            <mat-icon (click)="openMenu($event)" *ngIf="menuSource.length > 0">settings</mat-icon>
        </span>
    </div>

    <mat-menu #menu="matMenu" xPosition="before" yPosition="below">
        <button mat-menu-item *ngFor="let m of menuSource" [ngClass]="{'primary': m.primary}" (click)="m.handler(data)">
            <mat-icon [color]="m.primary?'primary':''">{{m.icon}}</mat-icon>
            <span translate>{{m.title}}</span>
        </button>
    </mat-menu>

    <div
        class="group-body" 
        appDropList="sidebar-nodes" 
        appDropListId="group-{{data.id}}"
        appPreviewComponentType="resource" 
        #listContainer
    >
        <app-resource-node 
            appDrag="sidebar-nodes" 
            *ngFor="let resource of data.resources" 
            [data]="resource"
            [previewData]="resource.name"
            (appDragDropped)="resourceDragEnded($event, resource)"
        ></app-resource-node>
        <app-resource-node 
            appDrag="sidebar-nodes" 
            *ngFor="let resource of additionalResources" 
            [data]="resource"
            [previewData]="resource.name"
            (appDragDropped)="resourceDragEnded($event, resource)"
        ></app-resource-node>
    </div>
        
</div>


