@if (channel) {
    <div
        class="channel-overlay"
        [class.visible]="isVisible"
        [class.hidden]="!isVisible"
    >
        @if (epgProgram) {
            <!-- Layout with EPG data -->
            <div class="epg-layout">
                <div class="channel-logo">
                    <img
                        [src]="epgProgram?.iconUrl || channel?.tvg?.logo"
                        onerror="this.style.display='none'"
                        alt="channel icon"
                    />
                </div>
                <div class="content">
                    <div class="content-header">
                        <div class="program-title">
                            {{ epgProgram?.title }}
                        </div>
                        <div class="channel-name">
                            {{ channel.name }}
                        </div>
                    </div>
                    @if (epgProgram?.desc) {
                        <div class="program-description">
                            {{ epgProgram?.desc }}
                        </div>
                    }
                    <div class="program-timeline">
                        <div class="timeline-info">
                            <span class="time-start">{{ start | momentDate: 'YYYYMMDDHHmm ZZ' : 'HH:mm' }}</span>
                            <span class="time-separator">—</span>
                            <span class="time-end">{{ stop | momentDate: 'YYYYMMDDHHmm ZZ' : 'HH:mm' }}</span>
                        </div>
                        <div class="progress-track">
                            <div
                                class="progress-fill"
                                [ngStyle]="{
                                    width: (finishedDuration * 100) / generalDuration + '%',
                                }"
                            ></div>
                        </div>
                    </div>
                </div>
            </div>
        } @else {
            <!-- Layout without EPG data - same structure, minimal content -->
            <div class="epg-layout">
                <div class="channel-logo">
                    <img
                        [src]="channel?.tvg?.logo"
                        onerror="this.style.display='none'"
                        alt="channel icon"
                    />
                </div>
                <div class="content">
                    <div class="content-header">
                        <div class="program-title no-epg-title">
                            {{ channel.name }}
                        </div>
                        <div class="channel-name no-epg-subtitle">
                            {{ 'EPG.NO_PROGRAM_INFO' | translate }}
                        </div>
                    </div>
                </div>
            </div>
        }
    </div>
}