viewerCmp.template.html

    </ng-template>
  </mat-list>
</ng-template>

<!-- feature tmpls -->
<ng-template #sapiBaseFeatureTmpl
  let-backCb="backCb"
  let-feature="feature">

  <sxplr-feature-view class="sxplr-z-2 mat-elevation-z2"
    [feature]="feature">

    <div header>
      <!-- back btn -->
      <button mat-button
        *ngIf="backCb"
        (click)="backCb()"
        [attr.aria-label]="ARIA_LABELS.CLOSE"
        class="sxplr-mb-2"
        >
        <i class="fas fa-chevron-left"></i>
        <span class="ml-1">
          Back
        </span>
      </button>
    </div>

  </sxplr-feature-view>
  
</ng-template>

<!-- general feature tmpl -->
<ng-template let-feature="feature" #selectedFeatureTmpl>
  <!-- TODO differentiate between features (spatial, regional etc) -->
  
  <!-- spatial feature tmpl -->
  <ng-container *ngTemplateOutlet="sapiBaseFeatureTmpl; context: {
    backCb: clearSelectedFeature.bind(this),
    feature: feature
  }">
  </ng-container>

  <ng-layer-ctl *ngFor="let vol of feature.volumes"
    class="d-block"
    [ng-layer-ctl-name]="vol.metadata.fullName"
    [ng-layer-ctl-src]="vol.data.url"
    [ng-layer-ctl-transform]="vol.data | getProperty : 'detail' | getProperty: 'neuroglancer/precomputed' | getProperty : 'transform'">
  </ng-layer-ctl>
  <ng-template #sapiVOITmpl>
  </ng-template>
</ng-template>

<!-- general point tmpl -->
<ng-template let-view="view" #selectedPointTmpl>
  <sxplr-side-panel>
    <div class="sxplr-custom-cmp lighttheme" header>
      
      <!-- back btn -->
      <button mat-button
        (click)="clearPoint()"
        [attr.aria-label]="ARIA_LABELS.CLOSE"
        class="sxplr-mb-2"
        >
        <i class="fas fa-chevron-left"></i>
        <span class="ml-1">
          Back
        </span>
      </button>
    </div>
    <div title>
      {{ view.spatialObjectTitle }}
    </div>
    <div subtitle>
      {{ view.spatialObjectSubtitle }}
    </div>
  </sxplr-side-panel>
  <sxplr-point-assignment
    [point]="view.selectedPoint"
    [template]="view.selectedTemplate"
    [parcellation]="view.selectedParcellation">
  </sxplr-point-assignment>
</ng-template>

<!-- spatial search tmpls -->
<ng-template #spatialFeatureListTmpl let-view="view">
  <mat-card class="sxplr-pe-all"
    [ngClass]="{
      'sxplr-d-none': !(voiSwitch.switchState$ | async) || (voiFeatureEntryCmp.totals$ | async) === 0
    }">
    <mat-card-header>
      <mat-card-title>
        Anchored to current view
      </mat-card-title>
      <mat-card-subtitle>
        <div *ngIf="view.selectedTemplate">
          {{ view.selectedTemplate.name }}
        </div>
        <ng-template [ngIf]="bbox.bbox$ | async | getProperty : 'bbox'" let-bbox>
          <div>
            from {{ bbox[0] | numbers | addUnitAndJoin : '' }}
          </div>
          <div>
            to {{ bbox[1] | numbers | addUnitAndJoin : '' }}
          </div>
        </ng-template>
      </mat-card-subtitle>
    </mat-card-header>

    <mat-slide-toggle [formControl]="showVOIWireframeSlideToggle">
      <span>
        Show VOI Wireframe
      </span>
      <spinner-cmp class="sxplr-d-inline-block" *ngIf="loadingVoiWireFrame$ | async"></spinner-cmp>
    </mat-slide-toggle>
  </mat-card>

  <sxplr-feature-entry
    [ngClass]="(voiSwitch.switchState$ | async) ? 'sxplr-d-block' : 'sxplr-d-none'"
    class="sxplr-pe-all mat-elevation-z8"
    [template]="view.selectedTemplate"
    [bbox]="bbox.bbox$ | async | getProperty : 'bbox'"
    #voiFeatureEntryCmp="featureEntryCmp">
  </sxplr-feature-entry>

  <mat-card [ngClass]="{
    'sxplr-d-none': (voiFeatureEntryCmp.totals$ | async) > 0
  }">
    No spatial features found.
  </mat-card>

  <button mat-raised-button
    [ngClass]="{
      'sxplr-d-none': (voiFeatureEntryCmp.totals$ | async) === 0
    }"
    class="sxplr-pe-all sxplr-w-100"
    iav-switch
    [iav-switch-state]="false"
    #voiSwitch="iavSwitch"
    (click)="voiSwitch.toggle()">

    <ng-template [ngIf]="voiSwitch.switchState$ | async" [ngIfElse]="chevronCollapseTmpl">
      <i class="fas fa-chevron-up"></i>
      <span>
        Collapse
      </span>
    </ng-template>

    <ng-template #chevronCollapseTmpl>
      <i class="fas fa-chevron-down"></i>
      <span>
        Explore {{ voiFeatureEntryCmp.totals$ | async }} spatial features
      </span>
    </ng-template>
  </button>

  <!-- TODO voiBbox directive is used to draw outlines for VOI
  this has been temporarily disabled, since datasource is paginated 
  and how bounding boxes are drawn needs to be reconsidered -->
  
  <div
    *ngIf="showVOIWireframeSlideToggle.valueChanges | async"
    voiBbox
    [features]="voiFeatureEntryCmp.features$ | async">

  </div>
</ng-template>

<div
  sxplr-sapiviews-core-space-boundingbox
  [sxplr-sapiviews-core-space-boundingbox-atlas]="selectedAtlas$ | async"
  [sxplr-sapiviews-core-space-boundingbox-space]="templateSelected$ | async"
  [sxplr-sapiviews-core-space-boundingbox-spec]="viewerCtx$ | async | nehubaVCtxToBbox"
  #bbox="sxplrSapiViewsCoreSpaceBoundingBox">
</div>