<h2>{{ 'search.results.head' | translate }}</h2>
<div *ngIf="searchResults?.hasSucceeded && !searchResults?.isLoading && searchResults?.payload?.page.length > 0" @fadeIn>
<ds-viewable-collection
  [config]="searchConfig.pagination"
  [sortConfig]="searchConfig.sort"
  [objects]="searchResults"
  [hideGear]="true">
</ds-viewable-collection></div>
<ds-loading *ngIf="!searchResults || searchResults?.isLoading" message="{{'loading.search-results' | translate}}"></ds-loading>
<ds-error *ngIf="searchResults?.hasFailed && (!searchResults?.error || searchResults?.error?.statusCode != 400)" message="{{'error.search-results' | translate}}"></ds-error>
<div *ngIf="searchResults?.payload?.page.length == 0 || searchResults?.error?.statusCode == 400">
    {{ 'search.results.no-results' | translate }}
    <a [routerLink]="['/search']"
      [queryParams]="{ query: surroundStringWithQuotes(searchConfig?.query) }"
      queryParamsHandling="merge">
      {{"search.results.no-results-link" | translate}}
    </a>
</div>