<div class="epg-title">{{ 'EPG.TITLE' | translate }}</div>

<div class="epg-list">
    @for (item of epgItems; track $index) {
        <article
            class="epg-item"
            [class.current-program]="isCurrentProgram(item)"
        >
            <div class="epg-item__meta">
                <div class="epg-item__time">
                    {{ item.start | date: 'HH:mm' }} -
                    {{ getProgramEnd(item) | date: 'HH:mm' }}
                </div>
                @if (isCurrentProgram(item)) {
                    <span class="epg-item__badge">Live</span>
                }
                <button
                    mat-icon-button
                    class="epg-item__info"
                    (click)="showDetails(item)"
                >
                    <mat-icon>info</mat-icon>
                </button>
            </div>

            <div class="epg-item__title">{{ item.title }}</div>

            @if (item.description) {
                <div class="epg-item__description">
                    {{ item.description }}
                </div>
            }

            @if (isCurrentProgram(item)) {
                <div class="epg-item__progress">
                    <div class="epg-progress-track">
                        <div
                            class="epg-progress-fill"
                            [style.width.%]="getProgress(item)"
                        ></div>
                    </div>
                </div>
            }
        </article>
    }

    @if (epgItems.length === 0) {
        <div class="epg-empty">
            {{ 'EPG.EPG_NOT_AVAILABLE_CHANNEL_TITLE' | translate }}
        </div>
    }
</div>
