@if (allPlaylistsLoaded()) {
    @defer {
        @if (playlistsData$ | async; as data) {
            @if (data.playlists.length === 0) {
                @if (data.totalCount === 0) {
                    <!-- Welcome state: no playlists at all -->
                    <app-empty-state
                        [type]="'welcome'"
                        (addPlaylistClicked)="onAddPlaylist($event)"
                    />
                } @else {
                    <!-- No results state: search/filter returned nothing -->
                    <app-empty-state [type]="'no-results'" />
                }
            } @else {
                <mat-nav-list class="playlists-list">
                    <mat-list-item (click)="navigateToGlobalFavorites()">
                        <mat-icon class="favorites-icon" matListItemIcon
                            >star</mat-icon
                        >
                        <div matListItemTitle>
                            {{
                                'HOME.PLAYLISTS.GLOBAL_FAVORITES'
                                    | translate
                            }}
                        </div>
                        <div matListItemLine class="meta">
                            {{
                                'HOME.PLAYLISTS.GLOBAL_FAVORITES_DESCRIPTION'
                                    | translate
                            }}
                        </div>
                    </mat-list-item>
                    @for (
                        item of data.playlists;
                        track item._id;
                        let last = $last
                    ) {
                        <app-playlist-item
                            [item]="item"
                            [showActions]="!sidebarMode()"
                            (editPlaylistClicked)="openInfoDialog($event)"
                            (playlistClicked)="getPlaylist(item)"
                            (refreshClicked)="refreshPlaylist($event)"
                            (removeClicked)="removeClicked($event)"
                        />
                    }
                </mat-nav-list>
            }
        }
    } @placeholder {
        <div id="skeleton-container">
            @for (a of ghostElements; track $index) {
                <div class="skeleton-item">
                    <ngx-skeleton-loader count="1" appearance="circle" />
                    <div class="text">
                        <ngx-skeleton-loader
                            count="1"
                            [theme]="{ width: '30%', height: '20px' }"
                        />
                        <ngx-skeleton-loader
                            count="1"
                            [theme]="{ width: '50%', height: '10px' }"
                        />
                    </div>
                    <div class="actions">
                        <ngx-skeleton-loader count="2" appearance="circle" />
                    </div>
                </div>
            }
        </div>
    }
}