@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">
                    @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>
    }
}