<div class="search-panel">
    <label class="search-field">
        <mat-icon>search</mat-icon>
        <input
            type="search"
            spellcheck="false"
            [placeholder]="'CHANNELS.SEARCH_CHANNEL' | translate"
            [(ngModel)]="searchString"
        />
    </label>
</div>

<div class="channels-list">
    @if (filteredItems().length > 0) {
        @for (item of filteredItems(); track item.id) {
            <app-channel-list-item
                [name]="item.o_name || item.name || ''"
                [logo]="item.logo"
                [selected]="isSelected(item)"
                [epgProgram]="
                    epgPrograms.get(normalizeStalkerEntityId(item.id)) ?? null
                "
                [progressPercentage]="
                    currentProgramsProgress.get(normalizeStalkerEntityId(item.id)) ?? 0
                "
                [showFavoriteButton]="true"
                [showProgramInfoButton]="false"
                [isFavorite]="isFavorite(item)"
                (clicked)="onPlay(item)"
                (favoriteToggled)="onFavoriteToggle(item)"
            />
        }
    } @else {
        <div class="empty-search-state">
            <mat-icon class="empty-state-icon">search_off</mat-icon>
            <h3 class="empty-state-title">
                {{ 'CHANNELS.NO_CHANNELS_FOUND' | translate }}
            </h3>
            <p class="empty-state-hint">
                {{ 'CHANNELS.TRY_DIFFERENT_SEARCH' | translate }}
            </p>
        </div>
    }
</div>
