<div class="position-absolute w-100 h-100">
  <ng-container *ngTemplateOutlet="viewerTmpl">
  </ng-container>
</div>

<layout-floating-container [zIndex]="10">

  <!-- Annotation mode -->
  <div *ngIf="hideUi$ | async">
    <mat-drawer-container class="mat-drawer-content-overflow-visible w-100 h-100 position-absolute invisible"
      [hasBackdrop]="false">
      <mat-drawer #annotationDrawer
        [mode]="'push'"
        [autoFocus]="false"
        [disableClose]="true"
        class="p-0 pe-all col-10 col-sm-10 col-md-5 col-lg-4 col-xl-3 col-xxl-2">
        <annotation-list></annotation-list>
      </mat-drawer>

      <mat-drawer-content class="visible position-relative pe-none">

        <iav-layout-fourcorners>

          <!-- pullable tab top right corner -->
          <div iavLayoutFourCornersTopLeft class="mt-5">
            <div>
              <ng-container *ngTemplateOutlet="tabTmpl_defaultTmpl; context: {
                matColor: 'primary',
                fontIcon: 'fa-list',
                tooltip: 'Annotation list',
                click: annotationDrawer.toggle.bind(annotationDrawer)
              }">
              </ng-container>
            </div>
  
            <annotating-tools-panel class="z-index-10">
            </annotating-tools-panel>
          </div>
        </iav-layout-fourcorners>
  

      </mat-drawer-content>
    </mat-drawer-container>
    <!-- <annotation-message></annotation-message> -->
  </div>

  <!-- top drawer -->
  <mat-drawer-container
    [hidden]="hideUi$ | async"
    [iav-switch-initstate]="false"
    iav-switch
    #sideNavTopSwitch="iavSwitch"
    class="mat-drawer-content-overflow-visible w-100 h-100 position-absolute invisible"
    [hasBackdrop]="false">

    <!-- sidenav-content -->

    <!-- (closedStart)="sideNavwFullLeftSwitch.switchState && matDrawerLeft.close()"
    (openedStart)="sideNavFullLeftSwitch.switchState && matDrawerLeft.open()" -->
    <mat-drawer class="box-shadow-none border-0 pe-none bg-none col-10 col-sm-10 col-md-5 col-lg-4 col-xl-3 col-xxl-2"
      mode="side"
      [attr.data-mat-drawer-top-open]="matDrawerTop.opened"
      [opened]="sideNavTopSwitch.switchState"
      [autoFocus]="false"
      [disableClose]="true"
      (openedChange)="handleSideNavAnimationDone($event)"
      #matDrawerTop="matDrawer">

      <div class="h-0 w-100 region-text-search-autocomplete-position">
        <ng-container *ngTemplateOutlet="autocompleteTmpl; context: { showTour: true }">
        </ng-container>
      </div>

      <button mat-raised-button
        *ngIf="!(alwaysHideMinorPanel$ | async)"
        [attr.aria-label]="ARIA_LABELS.EXPAND"
        (click)="sideNavFullLeftSwitch && sideNavFullLeftSwitch.open()"
        class="explore-btn pe-all w-100"
        [ngClass]="{
          'darktheme': iavRegion.rgbDarkmode === true,
          'lighttheme': iavRegion.rgbDarkmode === false
        }"
        [style.backgroundColor]="iavRegion?.rgbString || 'accent'">
        <span class="text iv-custom-comp">
          Explore
        </span>

        <div class="hidden"
          iav-region
          [region]="(selectedRegions$ | async) && (selectedRegions$ | async)[0]"
          #iavRegion="iavRegion">
        </div>

      </button>
    </mat-drawer>

    <mat-drawer-content class="visible position-relative pe-none">

      <iav-layout-fourcorners [iav-layout-fourcorners-cnr-cntr-ngclass]="{'w-100': true}">

        <!-- pullable tab top right corner -->
        <div iavLayoutFourCornersTopLeft class="d-flex flex-nowrap w-100">

          <!-- top left -->
          <div class="flex-grow-1 d-flex flex-nowrap">

            <div *ngIf="viewerLoaded"
              class="pe-all tab-toggle-container"
              (click)="sideNavTopSwitch && sideNavTopSwitch.toggle()"
              quick-tour
              [quick-tour-description]="quickTourRegionSearch.description"
              [quick-tour-order]="quickTourRegionSearch.order"
              #regionSearchQuickTour="quickTour">
              <ng-container *ngTemplateOutlet="tabTmpl; context: {
                isOpen: sideNavTopSwitch.switchState,
                regionSelected: selectedRegions$ | async,
                iavAdditionallayers: iavAdditionalLayers$ | async
              }">
              </ng-container>
            </div>

            <iav-cmp-viewer-nehuba-status *ngIf="(useViewer$ | async) === 'nehuba'"
              class="pe-all mt-2 muted-7">
            </iav-cmp-viewer-nehuba-status>
          </div>

          <!-- top right -->
          <div class="flex-grow-0 d-inline-flex align-items-start">

            <!-- signin banner at top right corner -->


            <top-menu-cmp class="mt-3 mr-2 d-inline-block"
              [ismobile]="ismobile"
              [viewerLoaded]="viewerLoaded">
            </top-menu-cmp>

            <div *ngIf="viewerLoaded"
              class="iv-custom-comp bg card m-2 mat-elevation-z2"
              quick-tour
              [quick-tour-description]="quickTourAtlasSelector.description"
              [quick-tour-order]="quickTourAtlasSelector.order">
              <atlas-dropdown-selector class="pe-all mt-2">
              </atlas-dropdown-selector>
            </div>
          </div>
        </div>

      </iav-layout-fourcorners>

    </mat-drawer-content>
  </mat-drawer-container>

  <!-- full left drawer -->
  <mat-drawer-container
    [iav-switch-initstate]="!(alwaysHideMinorPanel$ | async)"
    iav-switch
    #sideNavFullLeftSwitch="iavSwitch"
    class="mat-drawer-content-overflow-visible w-100 h-100 position-absolute invisible"
    [hasBackdrop]="false">

    <!-- sidenav-content -->
    <mat-drawer class="darker-bg iv-custom-comp visible col-10 col-sm-10 col-md-5 col-lg-4 col-xl-3 col-xxl-2 d-flex flex-column pe-all"
      mode="push"
      [opened]="sideNavTopSwitch.switchState && sideNavFullLeftSwitch.switchState"
      [attr.data-mat-drawer-fullleft-open]="matDrawerLeft.opened"
      [autoFocus]="false"
      #matDrawerLeft="matDrawer"
      (openedChange)="$event && sideNavFullLeftSwitch.open()"
      [@openClose]="sideNavTopSwitch.switchState && sideNavFullLeftSwitch.switchState ? 'open' : 'closed'"
      (@openClose.done)="$event.toState === 'closed' && matDrawerLeft.close()"
      [disableClose]="true">

      <div class="position-relative d-flex flex-column h-100">

        <!-- TODO dataset preview will become deprecated in the future.
        Regional feature/data feature will replace it -->
        <div class="hidden"
          iav-shown-dataset
          #iavShownDataset="iavShownDataset">
        </div>

        <div class="hidden"
          iav-shown-previews
          (emitter)="iavAdditionalLayers$.next($event)"
          #previews="iavShownPreviews">
        </div>

        <!-- sidenav datasets -->
        <ng-container *ngIf="iavShownDataset.shownDatasetId$ | async as shownDatasetId">
          <ng-template [ngIf]="shownDatasetId.length > 0" [ngIfElse]="sideNavVolumePreview">

            <!-- single dataset side nav panel -->
            <single-dataset-sidenav-view *ngFor="let id of shownDatasetId"
              (clear)="clearPreviewingDataset(id)"
              [fullId]="id"
              class="bs-border-box ml-15px-n mr-15px-n">
              <mat-chip *ngIf="regionOfInterest$ && regionOfInterest$ | async as region"
                region-of-interest
                iav-region
                [region]="region"
                [ngClass]="{
                  'darktheme':regionDirective.rgbDarkmode === true,
                  'lighttheme': regionDirective.rgbDarkmode === false
                }"
                [style.backgroundColor]="regionDirective.rgbString"
                #regionDirective="iavRegion">
                <span class="iv-custom-comp text text-truncate d-inline">
                  {{ region.name }}
                </span>
              </mat-chip>
            </single-dataset-sidenav-view>
          </ng-template>
        </ng-container>

        <!-- preview volumes -->
        <ng-template #sideNavVolumePreview>
          <ng-container *ngIf="previews.iavAdditionalLayers$ | async | filterPreviewByType : [previews.FILETYPES.VOLUMES] as volumePreviews">
            <ng-template [ngIf]="volumePreviews.length > 0" [ngIfElse]="sidenavRegionTmpl">
              <ng-container *ngFor="let vPreview of volumePreviews">
                <ng-container *ngTemplateOutlet="sidenavDsPreviewTmpl; context: vPreview">

                </ng-container>
              </ng-container>
            </ng-template>
          </ng-container>
        </ng-template>

      </div>
    </mat-drawer>

    <!-- main-content -->
    <mat-drawer-content class="visible position-relative" [hidden]="hideUi$ | async">

      <iav-layout-fourcorners [iav-layout-fourcorners-cnr-cntr-ngclass]="{'w-100': true}">

        <!-- bottom left corner (atlas selector and currently selected) -->
        <div iavLayoutFourCornersBottomLeft class="d-inline-flex align-items-center mb-4 ml-2 w-100">

          <!-- atlas selector -->
          <atlas-layer-selector *ngIf="viewerLoaded && !(isStandaloneVolumes$ | async)"
            #alSelector="atlasLayerSelector"
            (iav-outsideClick)="alSelector.selectorExpanded = false">
          </atlas-layer-selector>

          <!-- chips -->
          <div class="flex-grow-1 flex-shrink-1 overflow-x-auto pe-all">

            <mat-chip-list class="d-inline-block"
              quick-tour
              [quick-tour-description]="quickTourChips.description"
              [quick-tour-order]="quickTourChips.order">
              <!-- additional layer -->

              <ng-container>
                <ng-container *ngTemplateOutlet="currParcellationTmpl; context: { addParc: (selectedAdditionalLayers$ | async), parc: (parcellationSelected$ | async) }">
                </ng-container>
              </ng-container>

              <!-- any selected region(s) -->
              <ng-container>
                <ng-container *ngTemplateOutlet="selectedRegionTmpl">
                </ng-container>
              </ng-container>

              <!-- controls for iav volumes -->
              <div class="hidden" iav-shown-previews #previews="iavShownPreviews"></div>
              <ng-container *ngTemplateOutlet="selectedDatasetPreview; context: { layers: previews.iavAdditionalLayers$ | async | filterPreviewByType : [previews.FILETYPES.VOLUMES] }">
              </ng-container>

            </mat-chip-list>
          </div>
        </div>

      </iav-layout-fourcorners>

    </mat-drawer-content>
  </mat-drawer-container>

</layout-floating-container>

<!-- viewer tmpl -->
<ng-template #viewerTmpl>

  <iav-layout-fourcorners>
    <div iavLayoutFourCornersContent
      class="w-100 h-100 position-absolute">
      <div class="h-100 w-100 overflow-hidden position-relative"
        ctx-menu-host
        [ctx-menu-host-tmpl]="viewerCtxMenuTmpl">

        <ng-container [ngSwitch]="useViewer$ | async">

          <!-- nehuba viewer -->
          <iav-cmp-viewer-nehuba-glue class="d-block w-100 h-100 position-absolute left-0 top-0"
            *ngSwitchCase="'nehuba'"
            (viewerEvent)="handleViewerEvent($event)"
            [selectedTemplate]="templateSelected$ | async"
            [selectedParcellation]="parcellationSelected$ | async"
            #iavCmpViewerNehubaGlue="iavCmpViewerNehubaGlue">
          </iav-cmp-viewer-nehuba-glue>

          <!-- three surfer (free surfer viewer) -->
          <three-surfer-glue-cmp class="d-block w-100 h-100 position-absolute left-0 top-0"
            *ngSwitchCase="'threeSurfer'"
            (viewerEvent)="handleViewerEvent($event)"
            [selectedTemplate]="templateSelected$ | async"
            [selectedParcellation]="parcellationSelected$ | async">
          </three-surfer-glue-cmp>

          <!-- if not supported, show not supported message -->
          <div *ngSwitchCase="'notsupported'">Template not supported by any of the viewers</div>

          <!-- by default, show splash screen -->
          <div *ngSwitchDefault>
            <ui-splashscreen class="position-absolute left-0 top-0">
            </ui-splashscreen>
          </div>
        </ng-container>

      </div>
    </div>
  </iav-layout-fourcorners>
</ng-template>

<!-- parcellation chip / region chip -->
<ng-template #currParcellationTmpl let-parc="parc" let-addParc="addParc">
  <div [matMenuTriggerFor]="layerVersionMenu"
    [matMenuTriggerData]="{ layerVersionMenuTrigger: layerVersionMenuTrigger }"
    #layerVersionMenuTrigger="matMenuTrigger">

    <ng-template [ngIf]="addParc.length > 0" [ngIfElse]="defaultParcTmpl">
      <ng-container *ngFor="let p of addParc">
        <ng-container *ngTemplateOutlet="chipTmpl; context: {
          parcel: p,
          selected: true,
          dismissable: true,
          ariaLabel: ARIA_LABELS.PARC_VER_SELECT,
          onclick: layerVersionMenuTrigger.toggleMenu.bind(layerVersionMenuTrigger)
        }">
        </ng-container>
      </ng-container>
    </ng-template>
    <ng-template #defaultParcTmpl>
      <ng-template [ngIf]="parc">

        <ng-container *ngTemplateOutlet="chipTmpl; context: {
          parcel: parc,
          selected: false,
          dismissable: false,
          ariaLabel: ARIA_LABELS.PARC_VER_SELECT,
          onclick: layerVersionMenuTrigger.toggleMenu.bind(layerVersionMenuTrigger)
        }">
        </ng-container>
      </ng-template>
    </ng-template>
  </div>
</ng-template>


<!-- layer version selector -->
<mat-menu #layerVersionMenu
  class="bg-none box-shadow-none"
  [aria-label]="ARIA_LABELS.PARC_VER_CONTAINER"
  [hasBackdrop]="false">
  <ng-template matMenuContent let-layerVersionMenuTrigger="layerVersionMenuTrigger">
    <div (iav-outsideClick)="layerVersionMenuTrigger.closeMenu()">
      <ng-container *ngFor="let parcVer of selectedLayerVersions$ | async">
        <ng-container *ngIf="parcellationSelected$ | async as selectedParcellation">

          <ng-container *ngTemplateOutlet="chipTmpl; context: {
            parcel: parcVer,
            selected: selectedParcellation['@id'] === parcVer['@id'],
            dismissable: false,
            class: 'w-100',
            ariaLabel: parcVer.displayName || parcVer.name,
            onclick: bindFns([
              [ selectParcellation.bind(this), parcVer ],
              [ layerVersionMenuTrigger.closeMenu.bind(layerVersionMenuTrigger) ]
            ])
          }">
          </ng-container>
        </ng-container>
        <div class="mt-1"></div>
      </ng-container>
    </div>
  </ng-template>
</mat-menu>

<!-- chip tmpl -->
<ng-template #chipTmpl
  let-parcel="parcel"
  let-selected="selected"
  let-dismissable="dismissable"
  let-chipClass="class"
  let-ariaLabel="ariaLabel"
  let-onclick="onclick">
  <mat-chip class="pe-all position-relative z-index-2 d-inline-flex justify-content-between"
    [ngClass]="chipClass"
    [attr.aria-label]="ariaLabel"
    (click)="onclick && onclick()"
    [selected]="selected">

    <span class="ws-no-wrap">
      {{ parcel?.groupName ? (parcel?.groupName + ' - ') : '' }}{{ parcel && (parcel.displayName || parcel.name) }}
    </span>

    <!-- info icon -->
    <ng-template [ngIf]="parcel?.originDatasets?.length > 0" [ngIfElse]="infoIconBasic">

      <mat-icon
        *ngFor="let ds of parcel.originDatasets"
        fontSet="fas"
        fontIcon="fa-info-circle"
        iav-stop="click"
        iav-dataset-show-dataset-dialog
        [iav-dataset-show-dataset-dialog-kgid]="ds['kgId']"
        [iav-dataset-show-dataset-dialog-kgschema]="ds['kgSchema']"
        [iav-dataset-show-dataset-dialog-name]="parcel?.properties?.name"
        [iav-dataset-show-dataset-dialog-description]="parcel?.properties?.description">
      </mat-icon>

    </ng-template>

    <ng-template #infoIconBasic>
      <mat-icon *ngIf="parcel?.properties?.name && parcel?.properties?.description"
        fontSet="fas"
        fontIcon="fa-info-circle"
        iav-stop="click"
        iav-dataset-show-dataset-dialog
        [iav-dataset-show-dataset-dialog-name]="parcel.properties.name"
        [iav-dataset-show-dataset-dialog-description]="parcel.properties.description">

      </mat-icon>
    </ng-template>

    <!-- dismiss icon -->
    <mat-icon
      *ngIf="dismissable"
      (click)="clearAdditionalLayer(parcel); $event.stopPropagation()"
      fontSet="fas"
      fontIcon="fa-times">
    </mat-icon>
  </mat-chip>
</ng-template>


<ng-template #selectedRegionTmpl>

  <!-- regions chip -->
  <ng-template [ngIf]="selectedRegions$ | async" let-selectedRegions="ngIf">
    <!-- if regions.length > 1 -->
    <!-- use group chip -->
    <ng-template [ngIf]="selectedRegions.length > 1" [ngIfElse]="singleRegionChipTmpl">
      <mat-chip
        color="primary"
        selected
        (click)="handleChipClick()"
        class="pe-all position-relative z-index-1 ml-8-n">
        <span class="iv-custom-comp text text-truncate d-inline pl-4">
          {{ CONST.MULTI_REGION_SELECTION }}
        </span>
        <mat-icon
          (click)="clearSelectedRegions()"
          fontSet="fas"
          iav-stop="click"
          fontIcon="fa-times">
        </mat-icon>
      </mat-chip>
    </ng-template>

    <!-- if reginos.lengt === 1 -->
    <!-- use single region chip -->
    <ng-template #singleRegionChipTmpl>
      <ng-container *ngFor="let r of selectedRegions">

        <!-- region chip for discrete map -->
        <mat-chip
          iav-region
          (click)="handleChipClick()"
          [region]="r"
          class="pe-all position-relative z-index-1 ml-8-n"
          [ngClass]="{
            'darktheme':regionDirective.rgbDarkmode === true,
            'lighttheme': regionDirective.rgbDarkmode === false
          }"
          [style.backgroundColor]="regionDirective.rgbString"
          #regionDirective="iavRegion">
          <span class="iv-custom-comp text text-truncate d-inline pl-4">
            {{ r.name }}
          </span>
          <mat-icon
            class="iv-custom-comp text"
            (click)="clearSelectedRegions()"
            fontSet="fas"
            iav-stop="click"
            fontIcon="fa-times">
          </mat-icon>
        </mat-chip>

        <!-- chips for previewing origin datasets/continous map -->
        <ng-container *ngFor="let originDataset of (r.originDatasets || []); let index = index">
          <div class="hidden"
            iav-dataset-preview-dataset-file
            [iav-dataset-preview-dataset-file-kgid]="originDataset.kgId"
            [iav-dataset-preview-dataset-file-filename]="originDataset.filename"
            #previewDirective="iavDatasetPreviewDatasetFile">
          </div>
          <mat-chip *ngIf="previewDirective.active"
            (click)="handleChipClick()"
            class="pe-all position-relative ml-8-n">
            <span class="pl-4">
              {{ regionDirective.regionOriginDatasetLabels$ | async | renderViewOriginDatasetlabel : index }}
            </span>
            <mat-icon (click)="previewDirective.onClick()"
              fontSet="fas"
              iav-stop="click"
              fontIcon="fa-times">
            </mat-icon>
          </mat-chip>

          <mat-chip *ngFor="let key of clearViewKeys$ | async"
            (click)="handleChipClick()"
            class="pe-all position-relative ml-8-n">
            <span class="pl-4">
              {{ key }}
            </span>
            <mat-icon (click)="unsetClearViewByKey(key)"
              fontSet="fas"
              iav-stop="click"
              fontIcon="fa-times">

            </mat-icon>
          </mat-chip>
        </ng-container>

      </ng-container>
    </ng-template>
  </ng-template>

</ng-template>


<ng-template #selectedDatasetPreview let-layers="layers">

  <ng-container *ngFor="let layer of layers">
    <div class="hidden"
      iav-dataset-preview-dataset-file
      [iav-dataset-preview-dataset-file-kgid]="layer.datasetId"
      [iav-dataset-preview-dataset-file-filename]="layer.filename"
      #preview="iavDatasetPreviewDatasetFile">

    </div>
    <mat-chip class="pe-all"
      (click)="handleChipClick()">
      {{ layer.file?.name || layer.filename || 'Unknown data preview' }}
      <mat-icon fontSet="fas" fontIcon="fa-times"
        (click)="preview.onClick()"
        iav-stop="click">
      </mat-icon>
    </mat-chip>
  </ng-container>
</ng-template>

<!-- auto complete search box -->

<ng-template #autocompleteTmpl let-showTour="showTour">
  <div class="iv-custom-comp bg card w-100 mat-elevation-z8 pe-all">
    <region-text-search-autocomplete class="w-100 pt-2 flex-shrink-0 flex-grow-0">
    </region-text-search-autocomplete>

    <div class="w-100 h-100 position-absolute pe-none"
      *ngIf="showTour"
      #regionSelRef>
    </div>
  </div>
</ng-template>


<!-- template for rendering tab -->
<ng-template #tabTmpl
  let-isOpen="isOpen"
  let-regionSelected="regionSelected"
  let-iavAdditionallayers="iavAdditionallayers">

  <!-- if mat drawer is open -->
  <ng-template [ngIf]="isOpen" [ngIfElse]="tabTmpl_closedTmpl">
    <ng-container *ngTemplateOutlet="tabTmpl_defaultTmpl; context: {
      matColor: 'basic',
      fontIcon: 'fa-chevron-left'
    }">
    </ng-container>
  </ng-template>

  <!-- if matdrawer is closed -->
  <ng-template #tabTmpl_closedTmpl>

    <!-- if additional layers are being shown -->
    <ng-template [ngIf]="iavAdditionallayers?.length > 0" [ngIfElse]="tabTmpl_noAdditionalLayers">
      <ng-container *ngTemplateOutlet="tabTmpl_defaultTmpl; context: {
        matColor: 'accent',
        fontIcon: 'fa-database',
        tooltip: 'Explore dataset preview'
      }">
      </ng-container>
    </ng-template>

    <!-- if additional layers not not being shown -->
    <ng-template #tabTmpl_noAdditionalLayers>

      <!-- if region selected > 0 -->
      <ng-template [ngIf]="regionSelected?.length > 0" [ngIfElse]="tabTmpl_nothingSelected">
        <div class="hidden"
          iav-region
          [region]="regionSelected[0]"
          #tabTmpl_iavRegion="iavRegion">
        </div>

        <ng-container *ngTemplateOutlet="tabTmpl_defaultTmpl; context: {
          matColor: 'accent',
          customColor: tabTmpl_iavRegion.rgbString,
          customColorDarkmode: tabTmpl_iavRegion.rgbDarkmode,
          fontIcon: 'fa-brain',
          tooltip: 'Explore ' + tabTmpl_iavRegion.region.name
        }">

        </ng-container>
      </ng-template>

      <!-- nothing is selected -->
      <ng-template #tabTmpl_nothingSelected>
        <ng-container *ngTemplateOutlet="tabTmpl_defaultTmpl; context: {
          matColor: 'primary',
          fontIcon: 'fa-sitemap',
          tooltip: 'Explore regions'
        }">
        </ng-container>
      </ng-template>
    </ng-template>
  </ng-template>


</ng-template>
<ng-template #tabTmpl_defaultTmpl
  let-matColor="matColor"
  let-fontIcon="fontIcon"
  let-customColor="customColor"
  let-customColorDarkmode="customColorDarkmode"
  let-tooltip="tooltip"
  let-click="click">
  <!-- (click)="sideNavMasterSwitch.toggle()" -->
  <button mat-raised-button
    [attr.aria-label]="ARIA_LABELS.TOGGLE_SIDE_PANEL"
    [matTooltip]="tooltip"
    class="pe-all tab-toggle"
    [ngClass]="{
      'darktheme': customColorDarkmode === true,
      'lighttheme': customColorDarkmode === false
    }"
    (click)="click && click()"
    [style.backgroundColor]="customColor"
    [color]="(!customColor && matColor) ? matColor : null">

    <span [ngClass]="{'iv-custom-comp  text': !!customColor}">
      <i class="fas" [ngClass]="fontIcon || 'fa-question'"></i>
    </span>
  </button>
</ng-template>

<!-- region sidenav tmpl -->
<ng-template #sidenavRegionTmpl>

  <!-- region search autocomplete  -->
  <!-- [@openCloseAnchor]="sideNavFullLeftSwitch.switchState ? 'open' : 'closed'" -->
  <div class="h-0 w-100 region-text-search-autocomplete-position">
    <ng-container *ngTemplateOutlet="autocompleteTmpl">
    </ng-container>
  </div>

  <div class="flex-shrink-1 flex-grow-1 d-flex flex-column"
    [ngClass]="{'region-populated': (selectedRegions$ | async).length > 0 }">
    <!-- region detail -->
    <ng-container *ngIf="selectedRegions$ | async as selectedRegions; else selectRegionErrorTmpl">

      <!-- single-region-wrapper -->
      <ng-template [ngIf]="selectedRegions.length === 1" [ngIfElse]="multiRegionWrapperTmpl">
        <!-- a series of bugs result in requiring this hacky -->
        <!-- see https://github.com/HumanBrainProject/interactive-viewer/issues/698 -->
        <ng-container *ngFor="let region of selectedRegions">
          <ng-container *ngTemplateOutlet="singleRegionTmpl; context: { region: region }">
          </ng-container>
        </ng-container>
      </ng-template>

      <!-- multi region wrapper -->
      <ng-template #multiRegionWrapperTmpl>
        <ng-container *ngTemplateOutlet="multiRegionTmpl; context: {
          regions: selectedRegions
        }">
        </ng-container>
        <!-- This is a wrapper for multiregion consisting of {{ selectedRegions.length }} regions -->
      </ng-template>

      <!-- place holder if length === 0 -->
      <ng-container *ngIf="selectedRegions.length === 0">
        <ng-container *ngTemplateOutlet="singleRegionTmpl; context: { region: false }">
        </ng-container>
      </ng-container>
    </ng-container>

    <div class="spacer">
    </div>
  </div>

  <!-- collapse btn -->
  <ng-container *ngTemplateOutlet="collapseBtn">
  </ng-container>
</ng-template>


<!-- single region tmpl -->
<ng-template #singleRegionTmpl let-region="region">
  <!-- region detail -->
  <ng-container *ngIf="region; else regionPlaceholderTmpl">
    <region-menu
      [showRegionInOtherTmpl]="false"
      [region]="region"
      class="bs-border-box ml-15px-n mr-15px-n mat-elevation-z4">
    </region-menu>
  </ng-container>

  <!-- other region detail accordion -->
  <mat-accordion *ngIf="region"
    class="bs-border-box ml-15px-n mr-15px-n mt-2"
    iav-region
    [region]="region"
    #iavRegion="iavRegion">

    <!-- desc -->
    <ng-container *ngFor="let ods of (region.originDatasets || [])">
      <ng-template #regionDescTmpl>
        <single-dataset-view
          [hideTitle]="true"
          [hideExplore]="true"
          [hidePreview]="true"
          [hidePinBtn]="true"
          [hideDownloadBtn]="true"
          [kgSchema]="ods.kgSchema"
          [kgId]="ods.kgId">

        </single-dataset-view>
      </ng-template>
      <ng-container *ngTemplateOutlet="ngMatAccordionTmpl; context: {
        title: 'Description',
        iconClass: 'fas fa-info',
        iavNgIf: true,
        content: regionDescTmpl
      }">

      </ng-container>
    </ng-container>

    <!-- Explore in other template -->
    <ng-container *ngIf="iavRegion.regionInOtherTemplates$ | async as regionInOtherTemplates">

      <ng-template #exploreInOtherTmpl>
        <mat-card *ngFor="let sameRegion of regionInOtherTemplates"
          class="p-0 border-0 box-shadow-none mt-1 tb-1 cursor-pointer"
          (click)="iavRegion.changeView(sameRegion)"
          [matTooltip]="sameRegion.template.name + (sameRegion.hemisphere ? (' - ' + sameRegion.hemisphere) : '')"
          mat-ripple>
          <small>
            {{ sameRegion.template.name + (sameRegion.hemisphere ? (' - ' + sameRegion.hemisphere) : '') }}
          </small>
        </mat-card>
      </ng-template>

      <ng-container *ngTemplateOutlet="ngMatAccordionTmpl; context: {
        title: 'Explore in other templates',
        desc: regionInOtherTemplates.length,
        iconClass: 'fas fa-brain',
        iconTooltip: regionInOtherTemplates.length | regionAccordionTooltipTextPipe : 'regionInOtherTmpl',
        iavNgIf: regionInOtherTemplates.length,
        content: exploreInOtherTmpl
      }">


      </ng-container>
    </ng-container>

    <!-- tmp experimtal -->
    <ng-template #contenttmpl>
      <bs-features-receptor-entry
        [region]="region">
      </bs-features-receptor-entry>
    </ng-template>

    <div bs-features-receptor-directive
      [region]="region"
      #bsFeatureReceptorDirective="bsFeatureReceptorDirective">
    </div>
    <spinner-cmp *ngIf="bsFeatureReceptorDirective.fetching$ | async"></spinner-cmp>
    <ng-container *ngTemplateOutlet="ngMatAccordionTmpl; context: {
      title: 'ReceptorDistribution',
      iconClass: 'fas fa-info',
      iavNgIf: bsFeatureReceptorDirective.hasReceptor$ | async,
      content: contenttmpl
    }">

    </ng-container>

    <!--  regional features-->
    <ng-template #regionalFeaturesTmpl let-expansionPanel="expansionPanel">

      <data-browser
        *ngIf="expansionPanel.expanded"
        [disableVirtualScroll]="true"
        [regions]="[region]">
      </data-browser>
    </ng-template>

    <div class="hidden" iav-databrowser-directive
      [regions]="[region]"
      #iavDbDirective="iavDatabrowserDirective">
    </div>

    <!-- if dataset is loading -->
    <ng-template
      [ngIf]="iavDbDirective?.fetchingFlag"
      [ngIfElse]="featureLoadedTmpl">
      <div class="d-flex justify-content-center">
        <spinner-cmp></spinner-cmp>
      </div>
    </ng-template>

    <ng-template #featureLoadedTmpl>

      <!-- place holder content, if no regional features or connectivity or change ref space options are available -->
      <ng-template [ngIf]="iavDbDirective?.dataentries?.length === 0">
        <ng-container *ngIf="parcellationSelected$ | async as selectedParcellation">
          <ng-template [ngIf]="selectedParcellation?.hasAdditionalViewMode?.includes('connectivity')">
            <div class="p-4">
              {{ CONST.NO_ADDIONTAL_INFO_AVAIL }}
            </div>
          </ng-template>
        </ng-container>
      </ng-template>

    </ng-template>


    <ng-container *ngTemplateOutlet="ngMatAccordionTmpl; context: {
      title: CONST.REGIONAL_FEATURES,
      desc: iavDbDirective?.dataentries?.length,
      iconClass: 'fas fa-database',
      iconTooltip: iavDbDirective?.dataentries?.length | regionAccordionTooltipTextPipe : 'regionalFeatures',
      iavNgIf: iavDbDirective?.dataentries?.length,
      content: regionalFeaturesTmpl
    }">
    </ng-container>

    <!-- Connectivity -->
    <ng-container  *ngIf="parcellationSelected$ | async as selectedParcellation">

      <ng-template #connectivityContentTmpl let-expansionPanel="expansionPanel">
        <mat-card-content class="flex-grow-1 flex-shrink-1 w-100">
          <ng-container *ngFor="let region of selectedRegions$ | async">
            <connectivity-browser class="pe-all flex-shrink-1"
              [region]="region"
              [parcellationId]="selectedParcellation['@id']"
              (setOpenState)="expansionPanel.expanded = $event"
              [accordionExpanded]="expansionPanel.expanded"
              (connectivityNumberReceived)="connectedCounterDir.value = $event">
            </connectivity-browser>
          </ng-container>
        </mat-card-content>
      </ng-template>

      <ng-container *ngTemplateOutlet="ngMatAccordionTmpl; context: {
        title: 'Connectivity',
        desc: connectedCounterDir.value,
        iconClass: 'fas fa-braille',
        iconTooltip: connectedCounterDir.value | regionAccordionTooltipTextPipe : 'connectivity',
        iavNgIf: selectedParcellation?.hasAdditionalViewMode?.includes('connectivity'),
        content: connectivityContentTmpl
      }">
      </ng-container>

      <div class="w-0 h-0"
        iav-counter
        #connectedCounterDir="iavCounter">
      </div>
    </ng-container>

  </mat-accordion>
</ng-template>


<!-- expansion tmpl -->
<ng-template #ngMatAccordionTmpl
  let-title="title"
  let-desc="desc"
  let-iconClass="iconClass"
  let-iconTooltip="iconTooltip"
  let-iavNgIf="iavNgIf"
  let-content="content">
  <mat-expansion-panel
    [expanded]="activePanelTitles$ | async | arrayContains : title"
    [attr.data-opened]="expansionPanel.expanded"
    [attr.data-mat-expansion-title]="title"
    (closed)="handleExpansionPanelClosedEv(title)"
    (afterExpand)="handleExpansionPanelAfterExpandEv(title)"
    hideToggle
    *ngIf="iavNgIf"
    #expansionPanel="matExpansionPanel">

    <mat-expansion-panel-header>

      <!-- title -->
      <mat-panel-title>
        {{ title }}
      </mat-panel-title>

      <!-- desc + icon -->
      <mat-panel-description class="d-flex align-items-center justify-content-end"
        [matTooltip]="iconTooltip">
        <span class="mr-3">{{ desc }}</span>
        <span class="accordion-icon d-inline-flex justify-content-center">
          <i [class]="iconClass"></i>
        </span>
      </mat-panel-description>

    </mat-expansion-panel-header>

    <!-- content -->
    <ng-template matExpansionPanelContent>
      <ng-container *ngTemplateOutlet="content; context: { expansionPanel: expansionPanel }">
      </ng-container>
    </ng-template>
  </mat-expansion-panel>
</ng-template>

<!-- TODO deprecate in favour of dedicated dataset preview side nav -->
<ng-template #sidenavDsPreviewTmpl let-file="file" let-filename="filename" let-datasetId="datasetId">
  <div class="w-100 flex-grow-1 d-flex flex-column">

    <preview-card class="d-block bs-border-box ml-15px-n mr-15px-n flex-grow-1"
      [attr.aria-label]="ARIA_LABELS.ADDITIONAL_VOLUME_CONTROL"
      [datasetId]="datasetId"
      [filename]="filename">
    </preview-card>

    <!-- collapse btn -->
    <ng-container *ngTemplateOutlet="collapseBtn">
    </ng-container>
  </div>
</ng-template>

<!-- select region error... for whatever reason -->
<ng-template #selectRegionErrorTmpl>
  SELECT REGION ERROR
</ng-template>


<!-- multi region tmpl -->
<ng-template #multiRegionTmpl let-regions="regions">
  <ng-template [ngIf]="regions.length > 0" [ngIfElse]="regionPlaceholderTmpl">
    <region-menu
      [showRegionInOtherTmpl]="false"
      [region]="{
        name: CONST.MULTI_REGION_SELECTION
      }"
      class="bs-border-box ml-15px-n mr-15px-n mat-elevation-z4">
    </region-menu>

    <!-- other regions detail accordion -->
    <mat-accordion class="bs-border-box ml-15px-n mr-15px-n mt-2">

      <!--  regional features-->
      <ng-template #regionalFeaturesTmpl>
        <data-browser
          [disableVirtualScroll]="true"
          [regions]="regions">
        </data-browser>
      </ng-template>

      <div class="hidden"
        iav-databrowser-directive
        [regions]="regions"
        #iavDbDirective="iavDatabrowserDirective">
      </div>

      <ng-container *ngTemplateOutlet="ngMatAccordionTmpl; context: {
        title: CONST.REGIONAL_FEATURES,
        desc: iavDbDirective?.dataentries?.length,
        iconClass: 'fas fa-database',
        iconTooltip: iavDbDirective?.dataentries?.length | regionAccordionTooltipTextPipe : 'regionalFeatures',
        iavNgIf: iavDbDirective?.dataentries?.length,
        content: regionalFeaturesTmpl
      }">
      </ng-container>

      <!-- Multi regions include -->
      <ng-template #multiRegionInclTmpl>
        <mat-chip-list>
          <mat-chip *ngFor="let r of regions"
            iav-region
            [region]="r"
            [ngClass]="{
              'darktheme':regionDirective.rgbDarkmode === true,
              'lighttheme': regionDirective.rgbDarkmode === false
            }"
            [style.backgroundColor]="regionDirective.rgbString"
            #regionDirective="iavRegion">
            <span class="iv-custom-comp text text-truncate d-inline pl-4">
              {{ r.name }}
            </span>
          </mat-chip>
        </mat-chip-list>
      </ng-template>

      <ng-container *ngTemplateOutlet="ngMatAccordionTmpl; context: {
        title: 'Brain regions',
        desc: regions.length,
        iconClass: 'fas fa-brain',
        iavNgIf: true,
        content: multiRegionInclTmpl
      }">
      </ng-container>

    </mat-accordion>
  </ng-template>
</ng-template>

<!-- collapse btn -->
<ng-template #collapseBtn>

  <div class="h-0 w-100 collapse-position d-flex flex-column justify-content-end align-items-center">

    <button mat-raised-button class="mat-elevation-z8"
      [attr.aria-label]="ARIA_LABELS.COLLAPSE"
      (click)="sideNavFullLeftSwitch.close()"
      color="basic">
      <i class="fas fa-chevron-up"></i>
      <span>
        collapse
      </span>
    </button>
  </div>
</ng-template>

<!-- region tmpl placeholder -->
<ng-template #regionPlaceholderTmpl>
  <div class="placeholder-region-detail bs-border-box ml-15px-n mr-15px-n mat-elevation-z4">
    <span class="text-muted">
      Select a region by clicking on the viewer or search from above
    </span>
  </div>
</ng-template>

<!-- context menu template -->
<ng-template #viewerCtxMenuTmpl let-tmplRefs="tmplRefs">
  <mat-card class="p-0"
    [iav-key-listener]="[{type: 'keydown', target: 'document', capture: true}]"
    (iav-key-event)="disposeCtxMenu()"
    (iav-outsideClick)="disposeCtxMenu()">
    <mat-card-content *ngFor="let tmplRef of tmplRefs">

      <!-- template provided -->
      <ng-template [ngIf]="tmplRef.tmpl"
        [ngIfElse]="fallbackTmpl"
        [ngTemplateOutlet]="tmplRef.tmpl"
        [ngTemplateOutletContext]="{$implicit: tmplRef.data}">
      </ng-template>
      
      <!-- template not provided -->
      <ng-template #fallbackTmpl>
        {{ tmplRef.data.message || 'test' }}
      </ng-template>
    </mat-card-content>
  </mat-card>
</ng-template>

<!-- viewer status ctx menu -->
<ng-template #viewerStatusCtxMenu let-data>
  <mat-list>

    <!-- ref space & position -->
    <ng-container [ngSwitch]="data.context.viewerType">

      <!-- volumetric i.e. nehuba -->
      <ng-container *ngSwitchCase="'nehuba'">
        <mat-list-item>
          <span mat-line>
            {{ data.context.payload.mouse.real | nmToMm | addUnitAndJoin : '' }} (mm)
          </span>
          <span mat-line class="text-muted">
            <i class="fas fa-map"></i>
            <span>
              {{ data.metadata.template.displayName || data.metadata.template.name }}
            </span>
          </span>
        </mat-list-item>
      </ng-container>

      <ng-container *ngSwitchCase="'threeSurfer'">
        <mat-list-item>
          <span mat-line>
            face#{{ data.context.payload.faceIndex }}
          </span>
          <span mat-line>
            vertices#{{ data.context.payload.vertexIndices | addUnitAndJoin : '' }}
          </span>
          <span mat-line class="text-muted">
            <i class="fas fa-map"></i>
            <span>
              {{ data.context.payload.fsversion }}
            </span>
          </span>
        </mat-list-item>
      </ng-container>

      <ng-container *ngSwitchDefault>
        DEFAULT
      </ng-container>
    </ng-container>

    <!-- hovered ROIs -->
    <ng-template [ngIf]="data.metadata.hoveredRegions.length > 0">
      <mat-divider></mat-divider>

      <mat-list-item *ngFor="let hoveredR of data.metadata.hoveredRegions">
        <span mat-line>
          {{ hoveredR.displayName || hoveredR.name }}
        </span>
        <span mat-line class="text-muted">
          <i class="fas fa-brain"></i>
          <span>
            Brain region
          </span>
        </span>

        <!-- lookup region -->
        <button mat-icon-button
          (click)="selectRoi(hoveredR)"
          ctx-menu-dismiss>
          <i class="fas fa-search"></i>
        </button>
      </mat-list-item>
    </ng-template>
  </mat-list>
</ng-template>