<div
    class="channel-list app-scrollbar"
    cdkDropList
    [cdkDropListDisabled]="hasSearchTerm()"
    (cdkDropListDropped)="onDrop($event)"
    id="favorites-list"
>
    @if (filteredFavorites().length > 0) {
        @for (
            channel of filteredFavorites();
            track trackByFn($index, channel);
            let i = $index
        ) {
            <app-channel-list-item
                [name]="
                    i +
                    1 +
                    '. ' +
                    (channel?.name || 'CHANNELS.UNNAMED_CHANNEL' | translate)
                "
                [isDraggable]="!hasSearchTerm()"
                [logo]="getLogoForChannel(channel)"
                [showEpg]="shouldShowEpg()"
                [isRadio]="channel?.radio === 'true'"
                [epgProgram]="
                    epgMetadataMap().get(getChannelEpgKey(channel))?.epgProgram
                "
                [progressPercentage]="
                    epgMetadataMap().get(getChannelEpgKey(channel))
                        ?.progressPercentage ?? 0
                "
                [showDetailsContextMenu]="true"
                (clicked)="onChannelClick(channel)"
                (activated)="onChannelActivate(channel)"
                (contextMenuRequested)="onChannelContextMenu(channel, $event)"
                [selected]="activeChannelUrl() === channel?.url"
                [showFavoriteButton]="true"
                [isFavorite]="true"
                (favoriteToggled)="onFavoriteToggle(channel, $event)"
            />
        }
    } @else {
        <div class="empty-favorites">
            <strong>
                @if (hasSearchTerm()) {
                    {{ 'CHANNELS.NO_SEARCH_RESULTS' | translate }}
                } @else {
                    {{ 'CHANNELS.NO_FAVORITES' | translate }}
                }
            </strong>
        </div>
        <div class="empty-favorites-hint">
            @if (hasSearchTerm()) {
                {{ 'CHANNELS.TRY_DIFFERENT_SEARCH' | translate }}
            } @else {
                {{ 'CHANNELS.USE_STAR_TO_FAVORITE' | translate }}
            }
        </div>
    }
</div>

<div
    aria-hidden="true"
    class="channel-context-menu-anchor"
    [style.left]="contextMenuPosition().x"
    [style.top]="contextMenuPosition().y"
    [matMenuTriggerFor]="channelContextMenu"
    #contextMenuTrigger="matMenuTrigger"
></div>

<mat-menu #channelContextMenu="matMenu">
    <button mat-menu-item (click)="openChannelDetails()">
        <mat-icon>info</mat-icon>
        <span>{{ 'CHANNELS.SHOW_DETAILS' | translate }}</span>
    </button>
</mat-menu>
