viewerCmp.template.html

  </ng-template>

</ng-template>

<!-- spatial search tmpls -->
<ng-template #spatialFeatureListTmpl>
  <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>
          {{ templateSelected$ | async | getProperty : '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]="templateSelected$ | async"
    [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>