@let isEmbeddedPlayer =
    player() === 'videojs' || player() === 'html5' || player() === 'artplayer';

<div class="sidebar">
    <div class="sidebar-header">
        @if (selectedCategoryId()) {
            <button mat-icon-button (click)="backToCategories()">
                <mat-icon>chevron_left</mat-icon>
            </button>
            <h2>{{ 'HOME.PLAYLISTS.CHANNELS' | translate }}</h2>
        } @else {
            <button mat-icon-button disabled>
                <mat-icon>list</mat-icon>
            </button>
            <h2>{{ 'PORTALS.ALL_CATEGORIES' | translate }}</h2>
        }
    </div>
    @if (selectedCategoryId()) {
        <app-portal-channels-list (playClicked)="playLive($event)" />
    } @else {
        <app-category-view
            [items]="categories()"
            (categoryClicked)="selectCategory($event)"
        />
    }
</div>
<div class="content-container">
    @if (streamUrl) {
        @if (isEmbeddedPlayer) {
            <div class="video-player">
                <app-web-player-view [streamUrl]="streamUrl" />
            </div>
        }
        <div class="epg">
            <div class="epg-content">
                @if (epgItems().length > 0) {
                    <app-epg-view [epgItems]="epgItems()" />
                }
            </div>
        </div>
    } @else {
        <div class="no-channel-selected">
            <button mat-icon-button disabled>
                <mat-icon>category</mat-icon>
            </button>
            {{ 'PORTALS.SELECT_CATEGORY' | translate }}
        </div>
    }
    <!-- <app-mpv-player-bar /> -->
</div>