<div class="channel-list-loading-state" aria-live="polite" role="status">
    <span class="visually-hidden">
        {{ 'CHANNELS.LOADING' | translate }}
    </span>

    @if (isGroupsView()) {
        <div class="groups-loading-layout" aria-hidden="true">
            <aside class="groups-loading-nav">
                <header class="groups-loading-nav__header">
                    <h2 class="groups-loading-nav__title">
                        {{ 'CHANNELS.GROUPS' | translate }}
                    </h2>
                </header>

                <div class="groups-loading-nav__list">
                    @for (row of groupRows; track row) {
                        <div class="groups-loading-nav__item">
                            <span
                                class="grid-skeleton-line groups-loading-nav__label"
                                [style.width.%]="groupLabelWidths[row]"
                            ></span>
                            <span
                                class="grid-skeleton-line groups-loading-nav__count"
                            ></span>
                        </div>
                    }
                </div>
            </aside>

            <section class="groups-loading-content">
                <header class="groups-loading-content__header">
                    <div class="groups-loading-content__meta">
                        <span
                            class="grid-skeleton-line groups-loading-content__title"
                        ></span>
                        <span
                            class="grid-skeleton-line groups-loading-content__subtitle"
                        ></span>
                    </div>
                </header>

                <div class="groups-loading-content__list">
                    <app-channel-list-skeleton
                        [count]="9"
                        [showEpg]="true"
                        [actionCount]="2"
                    />
                </div>
            </section>
        </div>
    } @else {
        <div class="channels-loading-state">
            <div class="channels-loading-state__copy">
                <div class="channels-loading-state__title">
                    {{ 'CHANNELS.LOADING' | translate }}
                </div>
            </div>

            <div class="channels-loading-state__list">
                <app-channel-list-skeleton
                    [count]="9"
                    [showEpg]="true"
                    [actionCount]="2"
                />
            </div>
        </div>
    }
</div>
