@if (allPlaylistsLoaded()) {
    <mat-form-field class="search-field" subscriptSizing="dynamic">
        <mat-icon matPrefix>search</mat-icon>
        <input
            matInput
            #searchQuery
            type="search"
            [placeholder]="'HOME.PLAYLISTS.SEARCH_PLAYLISTS' | translate"
            (input)="onSearchQueryUpdate(searchQuery.value)"
    /></mat-form-field>
    @defer {
        <mat-nav-list
            cdkDropList
            (cdkDropListDropped)="drop($event, playlists)"
            *ngIf="playlists$ | async as playlists"
            class="playlists-list"
        >
            <mat-list-item
                *ngIf="playlists.length === 0; else playlistsTemplate"
            >
                <mat-icon class="favorites-icon" matListItemIcon
                    >search</mat-icon
                >
                <div matListItemTitle>
                    {{ 'HOME.PLAYLISTS.NO_PLAYLISTS' | translate }}
                </div>
                <div matListItemLine class="meta">
                    {{ 'HOME.PLAYLISTS.ADD_FIRST' | translate }}
                </div>
            </mat-list-item>

            <ng-template #playlistsTemplate>
                <mat-list-item (click)="getGlobalFavorites()">
                    <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>

                <app-playlist-item
                    *ngFor="
                        let item of playlists;
                        last as last;
                        trackBy: trackByFn
                    "
                    [item]="item"
                    [showActions]="!sidebarMode"
                    (editPlaylistClicked)="openInfoDialog($event)"
                    (playlistClicked)="getPlaylist(item)"
                    (refreshClicked)="refreshPlaylist($event)"
                    (removeClicked)="removeClicked($event)"
                />

                <div *ngIf="isMigrationPossible" id="migration-container">
                    <p>{{ migrationMessage }}</p>
                    <button
                        mat-button
                        (click)="migratePlaylists()"
                        class="migration-btn"
                        color="accent"
                    >
                        <mat-icon>playlist_add</mat-icon>
                        Migrate playlists</button
                    >&nbsp;
                    <button
                        mat-button
                        (click)="deleteMigratedPlaylists()"
                        class="migration-btn"
                        color="accent"
                    >
                        <mat-icon>delete</mat-icon>
                        {{ 'SETTINGS.REMOVE_DIALOG.TITLE' | translate }}
                    </button>
                </div>
            </ng-template>
        </mat-nav-list>
    } @placeholder {
        <div id="skeleton-container">
            <div class="skeleton-item" *ngFor="let a of [].constructor(10)">
                <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>
    }
}