<div class="small-middle-container" >
    <div *ngIf="loadingFlag" class="row justify-content-md-center top-spacing loading-spinner">
        <mat-spinner [color]="'accent'"></mat-spinner>
    </div>

    <div *ngIf="discoverResults.length > 0"
      class="row full-height discoverResults col"
      infiniteScroll
      [infiniteScrollDistance]="3"
      [infiniteScrollThrottle]="200"
      (scrolled)="onScroll()">
        <div id="searchResults" class="col-xl-2 col-lg-3 col-md-3 col-6 col-sm-4 small-padding" *ngFor="let result of discoverResults" data-test="searchResultsCount" attr.search-count="{{discoverResults.length}}">
            <discover-card [isAdmin]="isAdmin" [result]="result" [is4kEnabled]="is4kEnabled"></discover-card>
        </div>
    </div>
    <div *ngIf="!loadingFlag && discoverResults.length === 0">
        <div class="row justify-content-md-center top-spacing loading-spinner">
            <h1 id="noSearchResult"> {{'Discovery.NoSearch' | translate}} <i class="far fa-frown" aria-hidden="true"></i></h1>
        </div>
    </div>
</div>