<ng-template [ngTemplateOutlet]="resultTmpl">
</ng-template>

<ng-template #busyTmpl>
  <spinner-cmp></spinner-cmp>
</ng-template>

<ng-template #resultTmpl>
  
  <!-- virtual scroll. do not activate until autosize is supported -->
  <cdk-virtual-scroll-viewport
    *ngIf="useVirtualScroll; else regularScrollTmpl"
    [attr.aria-label]="ARIA_LABELS.LIST_OF_DATASETS_ARIA_LABEL"
    class="h-100"
    minBufferPx="200"
    maxBufferPx="400"
    itemSize="50">
    <div *cdkVirtualFor="let feature of registeredFeatures; templateCacheSize: 20; let index = index"
      class="h-50px overflow-hidden">

      <!-- divider, show if not first -->
      <mat-divider *ngIf="index !== 0"></mat-divider>
      <ng-container *ngTemplateOutlet="itemContainer; context: { $implicit: feature }">
      </ng-container>

    </div>
  </cdk-virtual-scroll-viewport>

  <!-- fallback, regular scroll -->
  <!-- less efficient on large list, but for now should do -->
  <ng-template #regularScrollTmpl>
    <div class="feature-container"
      [attr.aria-label]="ARIA_LABELS.LIST_OF_DATASETS_ARIA_LABEL">

      <!-- if busy, show spinner -->
      <ng-template [ngIf]="busy$ | async" [ngIfElse]="notBusyTmpl">
        <ng-template [ngTemplateOutlet]="busyTmpl"></ng-template>
      </ng-template>

      <ng-template #notBusyTmpl>
        <ng-template [ngIf]="registeredFeatures.length === 0">
          <span class="text-muted">
            No regional features found.
          </span>
        </ng-template>
      </ng-template>
      <div *ngFor="let feature of registeredFeatures; let index = index"
        class="overflow-hidden">

        <!-- divider, show if not first -->
        <mat-divider *ngIf="index !== 0"></mat-divider>
        <ng-container *ngTemplateOutlet="itemContainer; context: { $implicit: feature }">
        </ng-container>

      </div>
    </div>
  </ng-template>
  
</ng-template>

<!-- feature template -->
<ng-template #itemContainer let-feature>
  <div class="d-block pt-4 cursor-default"
    (click)="handleFeatureClick(feature)"
    mat-ripple>

    <!-- mat-chip container -->
    <!-- do not use mat-chip-list to avoid adding incorrect a11y info -->
    <div class="transform-origin-left-center scale-80">
      <mat-chip *ngFor="let badge of feature | getBadgeFromFeaturePipe"
        [color]="badge.color"
        selected>
        {{ badge.text }}
      </mat-chip>
    </div>

    <small>
      {{ feature | renderRegionalFeatureSummaryPipe }}
    </small>
  </div>
</ng-template>

<!-- dummy container -->
<ng-template #regionalFeatureContainerTmpl>
</ng-template>