@if ({
  mapState:mapState$|async,
  extent:extent$|async,
  baseLayers:baseLayers$|async,
  overlayLayers:overlayLayers$|async,
  selectedItemLayer:selectedItemLayer$|async,
  features:features$|async,
  position:position$|async,
  parentCode:parentCode$|async,
  panelVisible:panelVisible$|async,
  openedModalName:openedModalName$|async,
  panelCollapsed:panelCollapsed$|async,
  panelExtraWide:panelExtraWide$|async,
  searchMinified:searchMinified$|async,
  selectedItem:selectedItem$|async,
  parentItem:parentItem$|async,
  queryState:queryState$|async,
  searchCollapsed:searchCollapsed$|async,
  clearEnabled:clearEnabled$|async,
  period:period$|async,
  compassHeading:compassHeading$|async,
  styles:styles$|async,
  selectedFeature:selectedFeature$|async,
  fullscreen:fullscreen$|async,
  showDataLayerSlide:showDataLayerSlide$|async,
  menuVisible:menuVisible$|async,
  }; as state) {
  <aol-map #map (moveEnd)="handleOnMoveEnd($event)" (click)="handleOnMouseDown($event)" (dblClick)="handleShowLayerValues($event)" [ngClass]="{'panel-visible':state.panelVisible,'fullscreen':state.fullscreen }" class="map">
    <div>
    </div>
    <aol-view [zoom]="state.mapState.zoom" [rotation]="state.mapState.rotation">
      <aol-coordinate [x]="state.mapState.xCenter" [y]="state.mapState.yCenter" [srid]="'EPSG:4326'"></aol-coordinate>
      <fm-map-zoom-to-extent [extent]="state.extent" [animate]="true"></fm-map-zoom-to-extent>
    </aol-view>
    <aol-interaction-default></aol-interaction-default>
    <aol-interaction-dragrotateandzoom></aol-interaction-dragrotateandzoom>
    <fm-map-item-layers [itemLayers]="state.baseLayers"></fm-map-item-layers>
    @if (!overrideOverlayLayers) {
      <fm-map-item-layers [itemLayers]="state.overlayLayers"></fm-map-item-layers>
    }
    @if (!overrideSelectedItemLayer) {
      <fm-map-item-layers [itemLayer]="state.selectedItemLayer" (onPrerender)="handlePrerender($event)"></fm-map-item-layers>
    }
    <aol-layer-vector>
      <fm-map-item-source-vector [styles]="state.styles" [features]="state.features" (onFeatureSelected)="handleFeatureClick($event)" (onFeatureHover)="handleFeatureHover($event)" [selectedFeature]="state.selectedFeature" [selectedItem]="state.selectedItem"></fm-map-item-source-vector>
    </aol-layer-vector>
    <router-outlet name="map-layers"></router-outlet>
    <fm-map-gps-location [position]="state.position" [headingTolerance]="20" [showHeading]="devicesService.IsMobile()" [showTolerance]="devicesService.IsMobile()" [heading]="state.compassHeading"></fm-map-gps-location>
    <fm-map-layer-values></fm-map-layer-values>
    <div class="viewport-container" [ngStyle]="{'bottom': bottom(state.panelVisible)}">
      <div class="control-container">
        <router-outlet name="map-controls"></router-outlet>
        <fm-map-layer-switcher></fm-map-layer-switcher>
        <fm-map-pan-to-location [position]="state.position" [mapState]="state.mapState" [animate]="true"></fm-map-pan-to-location>
        <fm-map-rotation-reset></fm-map-rotation-reset>
      </div>
      <div class="slide-container"  [ngClass]="{'showDataLayerSlide':state.showDataLayerSlide}">
        <form>
          <input class="dataLayerSlide" (input)="handleSlideChange($event)" type="range" style="width: 100%" value="{{dataLayerSlideValue}}"/>
        </form>
      </div>
    </div>
    <fm-map-file-drop-target [parentCode]="state.parentCode" (onFileDropped)="handleFileDropped($event)"></fm-map-file-drop-target>
    @if (noContent) {
      <div>
        <fm-map-map-search #mapSearch [openedModalName]="state.openedModalName" (onOpenModal)="handleOpenModal($event)" (onCloseModal)="handleCloseModal()" [ngClass]="{'menuVisible':state.menuVisible}" (onToggleMenu)="handleToggleMenu($event)" (onSearchCollapse)="handleSearchCollapse($event)" (onSearchExpand)="handleSearchExpand($event)" [collapsed]="state.searchCollapsed" [searchMinified]="state.searchMinified" (onSearch)="handleSearch($event)" (onClear)="handleClearSearch($event)" [filterOptions]="state.queryState" [clearEnabled]="state.clearEnabled" [period]="state.period" (onPeriodChange)="handlePeriodChange($event)" (onCitySearch)="handleCitySearch($event)"></fm-map-map-search>
      </div>
    }
    <div class="side-panel-container">
      <fm-side-panel [resizeable]="true" (onResize)="handlePanelResize($event)" [visible]="state.panelVisible && noContent" [collapsed]="state.panelCollapsed" [collapsable]="false" [extrawide]="state.panelExtraWide">
        @if (noContent) {
          <div class="panel-wrapper">
            @if (!(state.searchMinified)) {
              <div class="panel-top bg-secondary">
              </div>
            }
            <div class="panel-bottom">
              @if (!(state.selectedItem)) {
                <div>
                  <fm-map-feature-list-container [features]="state.features" [selectedFeature]="state.selectedFeature" [queryState]="state.queryState" [clickedFeature]="clickedFeature"></fm-map-feature-list-container>
                </div>
              }
              @if (state.selectedItem; as item) {
                <div>
                  <fm-map-selected-item-container [item]="item" [parentItem]="state.parentItem" [itemLayer]="state.selectedItemLayer" [overlayLayers]="state.overlayLayers"></fm-map-selected-item-container>
                </div>
              }
              @if (state.features.length == 0) {
                <div class="no-results  m-2">
                  @if (state.queryState.query) {
                    <div>Cannot find <span>{{state.queryState?.query}}</span></div>
                  }
                  @if (state.queryState?.tags) {
                    <div>Cannot find tag <span>{{state.queryState?.tags}}</span></div>
                  }
                </div>
              }
            </div>
          </div>
        }
      </fm-side-panel>
      <fm-side-panel [resizeable]="true" [visible]="!noContent" [extrawide]="state.panelExtraWide">
        <router-outlet (activate)="handleSidepaneloutletActivate($event)" (deactivate)="handleSidepaneloutletDeactivate($event)"></router-outlet>
      </fm-side-panel>
    </div>
  </aol-map>
}