@if (!hasAnyGroups()) {
    <div class="groups-view-empty-state">
        <mat-icon class="empty-state-icon">{{
            searchTerm() ? 'search_off' : 'folder_off'
        }}</mat-icon>
        <div class="empty-state-title">
            {{
                (searchTerm()
                    ? 'CHANNELS.NO_SEARCH_RESULTS'
                    : 'PORTALS.ERROR_VIEW.EMPTY_CATEGORY.TITLE'
                ) | translate
            }}
        </div>
        <div class="empty-state-hint">
            {{
                (searchTerm()
                    ? 'CHANNELS.TRY_DIFFERENT_SEARCH'
                    : 'PORTALS.ERROR_VIEW.EMPTY_CATEGORY.DESCRIPTION'
                ) | translate
            }}
        </div>
    </div>
} @else {
    <div class="groups-view-layout">
        <aside
            class="groups-nav-panel"
            appResizable
            [minWidth]="164"
            [maxWidth]="320"
            [defaultWidth]="208"
            storageKey="m3u-groups-nav-width"
            (resizeStart)="onGroupsNavResizeStart()"
            (widthChange)="onGroupsNavWidthChange($event)"
            (resizeEnd)="onGroupsNavResizeEnd($event)"
        >
            <div class="groups-nav-shell">
                <header class="groups-nav-header">
                    <div class="groups-nav-header__content">
                        <h2 class="groups-nav-title">
                            {{ 'CHANNELS.GROUPS' | translate }}
                        </h2>
                        <div class="groups-nav-actions">
                            <button
                                type="button"
                                mat-icon-button
                                class="groups-nav-action groups-nav-action--search"
                                [matTooltip]="
                                    'CHANNELS.SEARCH_GROUPS' | translate
                                "
                                [attr.aria-pressed]="
                                    isGroupSearchOpen() ? 'true' : 'false'
                                "
                                [attr.aria-label]="
                                    'CHANNELS.SEARCH_GROUPS' | translate
                                "
                                (click)="toggleGroupSearch()"
                            >
                                <mat-icon>search</mat-icon>
                            </button>
                            <button
                                type="button"
                                mat-icon-button
                                class="groups-nav-action groups-nav-action--manage"
                                [matTooltip]="
                                    'CHANNELS.MANAGE_GROUPS' | translate
                                "
                                [attr.aria-label]="
                                    'CHANNELS.MANAGE_GROUPS' | translate
                                "
                                (click)="openGroupManagement()"
                            >
                                <mat-icon>tune</mat-icon>
                            </button>
                        </div>
                    </div>

                    @if (isGroupSearchOpen()) {
                        <label class="groups-nav-search">
                            <mat-icon class="groups-nav-search__icon">
                                search
                            </mat-icon>
                            <input
                                #groupSearchInput
                                type="search"
                                spellcheck="false"
                                [value]="localGroupSearchTerm()"
                                [placeholder]="
                                    'CHANNELS.SEARCH_GROUPS' | translate
                                "
                                (input)="
                                    updateGroupSearchTerm(
                                        $any($event.target).value
                                    )
                                "
                                (keydown.escape)="closeGroupSearch()"
                            />
                            <button
                                type="button"
                                mat-icon-button
                                class="groups-nav-search__close"
                                [attr.aria-label]="'CLOSE' | translate"
                                (click)="closeGroupSearch()"
                            >
                                <mat-icon>close</mat-icon>
                            </button>
                        </label>
                    }
                </header>

                <div class="groups-nav-list nav-list">
                    @if (filteredGroups().length > 0) {
                        @for (
                            group of filteredGroups();
                            track trackByGroupKey($index, group)
                        ) {
                            <button
                                type="button"
                                class="nav-item group-nav-item"
                                [attr.data-group-key]="group.key"
                                [class.selected]="
                                    selectedGroupKey() === group.key
                                "
                                [attr.aria-current]="
                                    selectedGroupKey() === group.key
                                        ? 'true'
                                        : null
                                "
                                (click)="selectGroup(group.key)"
                            >
                                <span class="nav-item-label">
                                    @if (group.key) {
                                        {{ group.key | titlecase }}
                                    } @else {
                                        {{ 'CHANNELS.UNGROUPED' | translate }}
                                    }
                                </span>
                                <span class="nav-item-meta">
                                    {{ group.count }}
                                </span>
                            </button>
                        }
                    } @else {
                        <div class="groups-nav-empty">
                            <mat-icon class="groups-nav-empty__icon">
                                {{
                                    hasSearchQuery()
                                        ? 'search_off'
                                        : 'folder_off'
                                }}
                            </mat-icon>
                            <div class="groups-nav-empty__title">
                                {{
                                    (hasSearchQuery()
                                        ? 'CHANNELS.NO_GROUPS_FOUND'
                                        : 'CHANNELS.NO_VISIBLE_GROUPS'
                                    ) | translate
                                }}
                            </div>
                            @if (hasSearchQuery()) {
                                <div class="groups-nav-empty__hint">
                                    {{
                                        'CHANNELS.TRY_DIFFERENT_SEARCH'
                                            | translate
                                    }}
                                </div>
                            }
                        </div>
                    }
                </div>
            </div>
        </aside>

        <section class="sidebar groups-content-panel">
            @if (selectedGroup(); as group) {
                <header class="sidebar-header groups-content-header">
                    <div class="category-meta category-meta--stacked">
                        <h2 class="category-title">
                            @if (group.key) {
                                {{ group.key | titlecase }}
                            } @else {
                                {{ 'CHANNELS.UNGROUPED' | translate }}
                            }
                        </h2>
                        <span class="category-subtitle">
                            {{ group.count }}
                            {{ group.count === 1 ? 'item' : 'items' }}
                        </span>
                    </div>
                    <button
                        mat-icon-button
                        [matMenuTriggerFor]="channelSortMenu"
                        [matTooltip]="'Sort: ' + groupChannelSortLabel()"
                        aria-label="Sort channels"
                    >
                        <mat-icon>sort_by_alpha</mat-icon>
                    </button>
                    <button
                        mat-icon-button
                        type="button"
                        class="groups-sidebar-toggle"
                        [attr.aria-label]="
                            'LAYOUT.HIDE_CHANNELS_LIST' | translate
                        "
                        [matTooltip]="
                            'LAYOUT.TOGGLE_SIDEBAR_TOOLTIP' | translate
                        "
                        (click)="sidebarToggleRequested.emit()"
                    >
                        <mat-icon>chevron_left</mat-icon>
                    </button>
                    <mat-menu #channelSortMenu="matMenu">
                        <button
                            mat-menu-item
                            (click)="setGroupChannelSortMode('server')"
                        >
                            <mat-icon>drag_indicator</mat-icon>
                            <span>Playlist Order</span>
                            @if (groupChannelSortMode() === 'server') {
                                <mat-icon>check</mat-icon>
                            }
                        </button>
                        <button
                            mat-menu-item
                            (click)="setGroupChannelSortMode('name-asc')"
                        >
                            <mat-icon>sort_by_alpha</mat-icon>
                            <span>Name A-Z</span>
                            @if (groupChannelSortMode() === 'name-asc') {
                                <mat-icon>check</mat-icon>
                            }
                        </button>
                        <button
                            mat-menu-item
                            (click)="setGroupChannelSortMode('name-desc')"
                        >
                            <mat-icon>sort_by_alpha</mat-icon>
                            <span>Name Z-A</span>
                            @if (groupChannelSortMode() === 'name-desc') {
                                <mat-icon>check</mat-icon>
                            }
                        </button>
                    </mat-menu>
                </header>

                <cdk-virtual-scroll-viewport
                    [itemSize]="itemSize()"
                    class="groups-channels-viewport app-scrollbar"
                >
                    <app-channel-list-item
                        *cdkVirtualFor="
                            let channel of selectedGroupChannels();
                            index as i;
                            trackBy: trackByChannel
                        "
                        [name]="
                            i +
                            1 +
                            '. ' +
                            (channel?.name ||
                                ('CHANNELS.UNNAMED_CHANNEL' | translate))
                        "
                        [logo]="getLogoForChannel(channel)"
                        [showEpg]="shouldShowEpg()"
                        [showDetailsContextMenu]="true"
                        [isRadio]="channel?.radio === 'true'"
                        [epgProgram]="
                            epgMetadataMap().get(getChannelEpgKey(channel))
                                ?.epgProgram
                        "
                        [progressPercentage]="
                            epgMetadataMap().get(getChannelEpgKey(channel))
                                ?.progressPercentage ?? 0
                        "
                        [selected]="activeChannelUrl() === channel?.url"
                        [showFavoriteButton]="true"
                        [isFavorite]="
                            channel?.url
                                ? favoriteIds().has(channel.url)
                                : false
                        "
                        (clicked)="onChannelClick(channel)"
                        (activated)="onChannelActivate(channel)"
                        (contextMenuRequested)="
                            onChannelContextMenu(channel, $event)
                        "
                        (favoriteToggled)="onFavoriteToggle(channel, $event)"
                    />
                </cdk-virtual-scroll-viewport>
            } @else {
                <header class="sidebar-header groups-content-header">
                    <div class="category-meta">
                        <h2 class="category-title">
                            {{ 'CHANNELS.GROUPS' | translate }}
                        </h2>
                    </div>
                </header>

                <div class="groups-content-empty-state">
                    <mat-icon class="empty-state-icon">
                        {{ hasSearchQuery() ? 'search_off' : 'visibility_off' }}
                    </mat-icon>
                    <div class="empty-state-title">
                        {{
                            (hasSearchQuery()
                                ? 'CHANNELS.NO_SEARCH_RESULTS'
                                : 'CHANNELS.NO_VISIBLE_GROUPS'
                            ) | translate
                        }}
                    </div>
                    <div class="empty-state-hint">
                        {{
                            (hasSearchQuery()
                                ? 'CHANNELS.TRY_DIFFERENT_SEARCH'
                                : 'CHANNELS.MANAGE_GROUPS_HINT'
                            ) | translate
                        }}
                    </div>
                </div>
            }
        </section>
    </div>
}

<div
    aria-hidden="true"
    class="channel-context-menu-anchor"
    [style.left]="contextMenuPosition().x"
    [style.top]="contextMenuPosition().y"
    [matMenuTriggerFor]="channelContextMenu"
    #contextMenuTrigger="matMenuTrigger"
></div>

<mat-menu #channelContextMenu="matMenu">
    <button mat-menu-item (click)="openChannelDetails()">
        <mat-icon>info</mat-icon>
        <span>{{ 'CHANNELS.SHOW_DETAILS' | translate }}</span>
    </button>
</mat-menu>