<div class="search-container">
  <div class="d-flex-center tabs">
    <div class="ps-3 py-3">
      @for (searchTab of activeLinksList; track searchTab.name) {
        <span
          class="pointer category-link"
          [class.active]="activeLink === searchTab.name"
          [tabindex]="$count"
          (click)="activeLinkChanged.emit(searchTab.name)"
          (keyup)="activeLinkChanged.emit(searchTab.name)"
        >{{searchTab.label}} ({{resultsCount?.[searchTab.name]}})</span>
      }
    </div>
  </div>
  <div class="page-container">
    <sm-virtual-grid
      [cardTemplate]="
        activeLink === searchPages.projects ? ProjectTemplate :
        activeLink === searchPages.experiments ? ExperimentTemplate :
        activeLink === searchPages.models ? ModelsTemplate :
        activeLink === searchPages.openDatasets ? openDatasetTemplate :
        activeLink === searchPages.pipelines ? PipelineTemplate :
        activeLink === searchPages.reports ? ReportsTemplate :
       ProjectTemplate"
      [items]="getResults()"
      [cardHeight]="getCardHeight()"
      [showLoadMoreButton]="getResults().length < resultsCount?.[activeLink]"
      (itemClicked)="projectClicked($event)"
      (loadMoreClicked)="loadMoreClicked.emit()"
    >
    </sm-virtual-grid>
  </div>

  <ng-template #ProjectTemplate let-project>
    <sm-project-card
      [project]="project"
      (projectCardClicked)="projectClicked($event)"
      [hideMenu]="true"
    ></sm-project-card>
  </ng-template>

  <ng-template #ExperimentTemplate let-experiment>
    <sm-experiment-card
      [experiment]="experiment"
      (experimentCardClicked)="experimentClicked($event)"
    ></sm-experiment-card>
  </ng-template>

  <ng-template #ModelsTemplate let-model>
    <sm-model-card
      [model]="model"
      (modelCardClicked)="modelClicked($event)"
    ></sm-model-card>
  </ng-template>

  <ng-template #PipelineTemplate let-pipeline>
    <sm-pipeline-card
      [project]="pipeline"
      [hideMenu]="true"
      (projectCardClicked)="pipelineClicked($event)"
    ></sm-pipeline-card>
  </ng-template>

  <ng-template #openDatasetTemplate let-dataset>
    <sm-simple-dataset-card
      [hideMenu]="true"
      [project]="dataset"
      (projectCardClicked)="openDatasetClicked($event)"
    ></sm-simple-dataset-card>
  </ng-template>
  <ng-template #ReportsTemplate let-report>
    <sm-report-card
      [hideMenu]="true"
      [report]="report"
      (cardClicked)="reportClicked($event)"
    ></sm-report-card>
  </ng-template>

</div>
