<div class="grid-content" (scroll)="onScroll($event)">
    <div class="items" [ngStyle]="itemsHolderStyle" #itemsHolder>
        <span
            *ngFor="let item of items; let i = index; trackBy: trackByFn"
            class="card-item"
            [ngStyle]="cardStyles[i]"
            #cardItem
            (mouseenter)="onCardEnter(i)"
            (mouseleave)="onCardLeave(i)">
            <ng-template
                [ngTemplateOutlet]="gridItemTmpl"
                [ngTemplateOutletContext]="{ item: item }">
            </ng-template>
        </span>
        <span *ngIf="items.length === 0 && !loading" class="content-empty">
            {{ 'REPOSITORY.NO_ITEMS' | translate }}
        </span>
    </div>
    <div
        *ngIf="loading"
        [ngClass]="{
            'central-block-loading': isFirstPage,
            'central-block-loading-more': !isFirstPage
        }">
        <span class="vertical-helper"></span>
        <div class="spinner"></div>
    </div>
</div>
