@if (discoverType() !== DiscoverType.Seasonal) {
    <div class="right">
        <mat-button-toggle-group name="discoverMode" (change)="toggleChanged($event)" [value]="discoverOptions()" class="discover-filter-buttons-group">
            <mat-button-toggle [id]="id() + 'Combined'" [class.button-active]="discoverOptions() === DiscoverOption.Combined" [value]="DiscoverOption.Combined" class="discover-filter-button">{{'Discovery.Combined' | translate}}</mat-button-toggle>
            <mat-button-toggle [id]="id() + 'Movie'" [class.button-active]="discoverOptions() === DiscoverOption.Movie" [value]="DiscoverOption.Movie" class="discover-filter-button">{{'Discovery.Movies' | translate}}</mat-button-toggle>
            <mat-button-toggle [id]="id() + 'Tv'" [class.button-active]="discoverOptions() === DiscoverOption.Tv" [value]="DiscoverOption.Tv" class="discover-filter-button">{{'Discovery.Tv' | translate}}</mat-button-toggle>
        </mat-button-toggle-group>
    </div>
}

@defer (when hasResults(); prefetch on idle) {
    <p-carousel #carousel [numVisible]="10" [numScroll]="10" [page]="0" [value]="discoverResults()" [responsiveOptions]="responsiveOptions" (onPage)="newPage()">
        <ng-template let-result pTemplate="item">
            <discover-card [discoverType]="discoverType()" [isAdmin]="isAdmin()" [result]="result" [is4kEnabled]="is4kEnabled()"></discover-card>
        </ng-template>
    </p-carousel>
} @placeholder(minimum 300) {
    <div class="row loading-container">
        @for (item of [1,2,3,4,5,6,7,8,9,10]; track item) {
            <div class="col-2">
                <p-skeleton width="100%" height="270px"></p-skeleton>
            </div>
        }
    </div>
}