<mat-toolbar color="primary">
    <button
        mat-icon-button
        (click)="toggleLeftDrawerClicked.emit()"
        [matTooltip]="'TOP_MENU.OPEN_CHANNELS_LIST' | translate"
        class="sidenav-toggle-button"
    >
        <mat-icon>{{ isLeftDrawerOpened ? 'menu' : 'menu_open' }}</mat-icon>
    </button>
    <!-- @if (playlistId$ | async) {
        <button
            mat-icon-button
            (click)="updateFavoriteStatus(activeChannel)"
            [matTooltip]="'TOP_MENU.TOGGLE_FAVORITE_FLAG' | translate"
        >
            <mat-icon>
                {{
                    (favorites$ | async).includes(activeChannel?.url)
                        ? 'star'
                        : 'star_outline'
                }}</mat-icon
            >
        </button>
    } -->
    <button
        mat-icon-button
        (click)="infoOverlayClicked.emit()"
        [matTooltip]="'TOP_MENU.SHOW_INFO' | translate"
    >
        <mat-icon>info</mat-icon>
    </button>
    {{ activeChannel.name }}
    <div class="spacer"></div>
    <!-- <button
        mat-icon-button
        (click)="settingsClicked.emit()"
        [matTooltip]="'MENU.SETTINGS' | translate"
    >
        <mat-icon>settings</mat-icon>
    </button> -->
    <button
        mat-icon-button
        (click)="multiEpgClicked.emit()"
        [matTooltip]="'TOP_MENU.OPEN_MULTI_EPG' | translate"
    >
        <mat-icon>view_list</mat-icon>
    </button>
    @let isEpgAvailable = isEpgAvailable$ | async;
    @if (isEpgAvailable) {
        <button
            mat-button
            (click)="toggleRightDrawerClicked.emit()"
            [matTooltip]="'TOP_MENU.OPEN_EPG_LIST' | translate"
        >
            EPG
        </button>
    }
</mat-toolbar>
