<router-outlet name='baseMap'></router-outlet>
<router-outlet name='treeLayer'></router-outlet>

<!--
<div class="param simplify">
    <span class="title" matTooltip="Simplify the geometries when they are loaded: faster and less network usage, but reduces accuracy">Simplify</span>
    <mat-slider min=0 max="{{ simplify_max }}" step="{{ simplify_step }}" thumbLabel=true>
        <input matSliderThumb [(ngModel)]="simplify"/>
    </mat-slider>
</div>
-->

<mat-expansion-panel>
    <mat-expansion-panel-header>
        <mat-panel-title>
            Background
        </mat-panel-title>
    </mat-expansion-panel-header>
    <button mat-raised-button [matMenuTriggerFor]="bmMenu"
        matTooltip="Type/source of the background layer">
        {{ mapControlService.baseStyleName.value }}
        <mat-icon>more_vert</mat-icon>
    </button>
    <mat-menu #bmMenu="matMenu">
        <button mat-menu-item
            *ngFor="let baseStyle of mapDataService.mapInitData?.baseStyles"
            (click)="mapControlService.baseStyleName.next(baseStyle.name)">
            {{ baseStyle.name }}
        </button>
    </mat-menu>

    <div>
        <mat-slider min="0" max="1"
            step=0.01
            matTooltip="Opacity of the background layer"
            matTooltipPosition="right"
         #ngSlider><input matSliderThumb value="{{ (configService.conf | async).bsData.map.opacity }}" (input)="mapControlService.baseStyleOpacity.next({source: ngSliderThumb, parent: ngSlider, value: ngSliderThumb.value}.value)" #ngSliderThumb="matSliderThumb" />
        </mat-slider>
    </div>
</mat-expansion-panel>

<mat-divider></mat-divider>

<mat-expansion-panel>
    <mat-expansion-panel-header>
        <mat-panel-title>
            Annotations
        </mat-panel-title>
    </mat-expansion-panel-header>

    <div>
        <mat-slide-toggle
            matTooltip='Add labels directly on the map'
            matTooltipPosition="right"
            [checked]="mapControlService.hasLabels.value"
            (change)="mapControlService.toggleLabels($event.checked)"
            >
            Labels
        </mat-slide-toggle>
    </div>

    <div>
        <mat-slide-toggle
            matTooltip='Add tags directly on the map'
            matTooltipPosition="right"
            [checked]="mapControlService.hasTags.value"
            (change)="mapControlService.toggleTags($event.checked)"
            >
            Tags
        </mat-slide-toggle>
    </div>
</mat-expansion-panel>

<mat-expansion-panel>
    <mat-expansion-panel-header>
        <mat-panel-title>
            Filter / search
        </mat-panel-title>
    </mat-expansion-panel-header>

    <div class="param status">
        <mat-form-field>
            <mat-label>Filter by status</mat-label>
            <mat-select [formControl]="status" multiple
                matTooltip='Filter features from survey categories by status'
                matTooltipPosition="right"
                >
                <mat-option *ngFor="let _status of (configService.conf | async).bsData?.map.status" [value]="_status">{{ _status }}</mat-option>
            </mat-select>
        </mat-form-field>
    </div>

    <div class="param search">
        <mat-form-field
            matTooltip="Filter items in the layers currently displayed"
            matTooltipPosition="right"
            >
            <mat-label>Filter labels</mat-label>
            <input matInput
                type="search"
                (input)="filter()"
                (keydown.enter)="mapControlService.zoomToFeatures()"
                [(ngModel)]="searchText"/>
            <button matSuffix mat-icon-button
                *ngIf="searchText"
                aria-label="Clear"
                (click)="searchText='';filter()"
                >
                <mat-icon>close</mat-icon>
            </button>
        </mat-form-field>
    </div>

    <div class="param search">
        <mat-form-field
            matTooltip="Filter displayed tags"
            matTooltipPosition="right"
            >
            <mat-label>Filter tags</mat-label>
            <input matInput
                type="search"
                (input)="filter()"
                (keydown.enter)="mapControlService.zoomToFeatures()"
                [(ngModel)]="tagsFilterText"/>
            <button mat-button matSuffix mat-icon-button
                *ngIf="tagsFilterText"
                aria-label="Clear"
                (click)="tagsFilterText='';filter()"
                >
                <mat-icon>close</mat-icon>
            </button>
        </mat-form-field>
    </div>
</mat-expansion-panel>

<mat-expansion-panel>
    <mat-expansion-panel-header>
        <mat-panel-title>
            Downloads & more
        </mat-panel-title>
    </mat-expansion-panel-header>

    <button mat-raised-button [matMenuTriggerFor]="toolsMenu">
        Downloads
        <mat-icon>more_vert</mat-icon>
    </button>
    <mat-menu #toolsMenu="matMenu" class='extended-width'>
        <button mat-menu-item
            (click)="downloadSelectedLayers('gpkg')">
            Download Geopackage of selected layers (EPSG {{ (configService.conf | async).bsData?.geo.srid }})
        </button>
        <button mat-menu-item [disabled]=true
            (click)="downloadSelectedLayers('dxf')">
            Download DXF of selected layers (EPSG {{ (configService.conf | async).bsData?.geo.srid }})
        </button>
        <button mat-menu-item [disabled]=true
            (click)="downloadSelectedLayers('dxf', true)">
            Download DXF of selected layers (reprojected to EPSG {{ (configService.conf | async).bsData?.geo.srid_for_proj }})
        </button>
        <button mat-menu-item
            (click)="downloadSelectedLayers('shapefile')">
            Download Shapefiles of selected layers  (EPSG {{ (configService.conf | async).bsData?.geo.srid }}) [<i><b>Deprecated</b>: use Geopackage</i>]
        </button>
    </mat-menu>
    <button mat-raised-button [hidden]="authenticationService.isNotAuthorized(['base_map_creator']) | async"
        matTooltip="Create a base map with the selected layers"
        (click)="createBaseMap()">
        Create a base map...
    </button>
</mat-expansion-panel>