<div class="title"
    matTooltip="Individual layers, organized by Misc (custom defined), survey categories, and live (computed, dynamic)"
    matTooltipPosition="right"
>
    Layers
</div>

<div class="loadingIndicator" *ngIf='loading'>
    <mat-progress-bar mode="indeterminate"></mat-progress-bar>
</div>

<mat-tree class="noselect" [dataSource]="nestedDataSource" [treeControl]="treeControl">
    <mat-nested-tree-node *matTreeNodeDef="let node">
        <div class="mat-tree-node">
            <button
             *ngIf="node.hasChildren()"
             mat-icon-button
             matTreeNodeToggle
             [matTreeNodeToggleRecursive]=false
             [disabled]="!node.hasChildren()"
             [attr.aria-label]="'toggle ' + node.name">
                <mat-icon>
                    {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
                </mat-icon>
            </button>
            <gisaf-tree-layer-item
                [node]="node"
                [checked]="isNodeActive(node)"
                [layerNodeMenu]="layerNodeMenu"
                [layerGroupNodeMenu]="layerGroupNodeMenu"
                (showLayer)="showLayer.emit($event)"
                (hideLayer)="hideLayer.emit($event)"
                (layerItemSelectionToggle)="layerItemSelectionToggle($event)"
                (toggleNode)="treeControl.toggle(node)"
                >
            </gisaf-tree-layer-item>
        </div>
        <div class="map-tree-node-nested"
             [class.map-invisible]="!treeControl.isExpanded(node)">
            <ng-container matTreeNodeOutlet></ng-container>
        </div>
    </mat-nested-tree-node>
</mat-tree>

<mat-menu #layerGroupNodeMenu="matMenu" class='extended-width'>
    <ng-template matMenuContent let-node="node">
        <button mat-menu-item (click)="downloadGpkg(node)">
            <mat-icon>file_download</mat-icon>
            <span>Download Geopackage (EPSG {{ (configService.conf | async).bsData?.geo.srid_for_proj }})</span>
        </button>
    </ng-template>
</mat-menu>

<mat-menu #layerNodeMenu="matMenu" class='extended-width'>
    <ng-template matMenuContent let-node="node">
        <button mat-menu-item (click)="downloadGpkg(node)">
            <mat-icon>file_download</mat-icon>
            <span>Download Geopackage (EPSG {{ (configService.conf | async).bsData?.geo.srid_for_proj }})</span>
        </button>
        <button mat-menu-item (click)="downloadDXF(node)">
            <mat-icon>file_download</mat-icon>
            <span>Download DXF (EPSG {{ (configService.conf | async).bsData?.geo.srid }})</span>
        </button>
        <button mat-menu-item (click)="downloadDXF(node, true)">
            <mat-icon>file_download</mat-icon>
            <span>Download DXF (reprojected to EPSG {{ (configService.conf | async).bsData?.geo.srid_for_proj }})</span>
        </button>
        <button mat-menu-item (click)="downloadLayer(node)">
            <mat-icon>file_download</mat-icon>
            <span>Download Shapefile (EPSG {{ (configService.conf | async).bsData?.geo.srid }}) [<i><b>Deprecated</b>: use Geopackage</i>]</span>
        </button>
        <button mat-menu-item (click)="downloadRawData(node)" *ngIf="node.rawSurveyStore">
            <mat-icon>file_download</mat-icon>
            <span>Download Shapefile of raw survey points</span>
        </button>
        <!--
        <button mat-menu-item (click)="goToAdmin(node)">
            <mat-icon>star</mat-icon>
            <span>Go to admin for this layer</span>
        </button>
        -->
    </ng-template>
</mat-menu>
