<div class="row"
     infiniteScroll
     [infiniteScrollDistance]="2"
     [infiniteScrollThrottle]="50"
     (scrolled)="onScroll()">

    <jhi-search-input
        class="col-12 col-md-6 col-lg-4 col-xl-3"
        (searchInputEvent)="updateSearchInput($event)">
    </jhi-search-input>
    <div class="col-12 col-md-6 col-lg-8 col-xl-9">
        <div class="row">
            <jhi-exercise-card *ngFor="let result of results"
                               class="card-container col-12 col-lg-6 col-xl-4"
                               [exercise]="result"
                               (exerciseSelectionEvent)="selectExercise($event)">
            </jhi-exercise-card>
        </div>
        <div *ngIf="results.length === 0" >
            No results found
        </div>
    </div>
</div>

<jhi-exercise-details [exercise]="selectedResult"></jhi-exercise-details>