@if (items?.length > 0) {
    <div class="grid">
        @for (
            item of items
                | filterBy: searchPhrase() : 'name'
                | sortBy: sortType();
            track $index
        ) {
            <mat-card (click)="itemClicked.emit(item)">
                <mat-card-content>
                    @if (item.stream_icon || item.cover || item.logo) {
                        <img
                            class="stream-icon"
                            [ngSrc]="
                                item.stream_icon || item.cover || item.logo
                            "
                            fill
                            priority
                            placeholder
                            placeholder="data:image/png;base64,iVBORw0K..."
                            (error)="
                                $event.target.src =
                                    './assets/images/default-poster.png'
                            "
                            alt="channel logo"
                        />
                    }
                    @if (!item.stream_icon && !item.cover && !item.logo) {
                        <div class="stream-icon-placeholder"></div>
                    }
                    @if (item.rating || item.rating_imdb) {
                        <div
                            class="rating"
                            [matTooltip]="'XTREAM.IMDB_RATING' | translate"
                        >
                            <mat-icon>star</mat-icon
                            >{{ item.rating || item.rating_imdb }}
                        </div>
                    }
                </mat-card-content>
                <mat-card-actions>
                    <div class="title">{{ item.name || 'No name' }}</div>
                </mat-card-actions>
            </mat-card>
        }
        @if (!(items | filterBy: searchPhrase() : 'name')?.length) {
            <app-playlist-error-view
                title="No results"
                [description]="
                    'PORTALS.EMPTY_LIST_VIEW.NO_SEARCH_RESULTS' | translate
                "
                [showActionButtons]="false"
                [viewType]="'NO_SEARCH_RESULTS'"
            />
        }
    </div>
} @else {
    <app-playlist-error-view
        [title]="'PORTALS.ERROR_VIEW.EMPTY_CATEGORY.TITLE' | translate"
        [description]="
            'PORTALS.ERROR_VIEW.EMPTY_CATEGORY.DESCRIPTION' | translate
        "
        [showActionButtons]="false"
        [viewType]="'EMPTY_CATEGORY'"
    />
}