@if (playlist() && (currentPlaylistPosition || noPlaylistVideos)) {
  <div
    class="widget-root playlist"
    myInfiniteScroller [onItself]="true" (nearOfBottom)="onPlaylistVideosNearOfBottom()"
    >
    <div class="widget-header playlist-info">
      <div class="widget-title playlist-display-name">
        {{ playlist().displayName }}
        @if (isUnlistedPlaylist()) {
          <span class="pt-badge badge-warning" i18n>Unlisted</span>
        }
        @if (isPrivatePlaylist()) {
          <span class="pt-badge badge-danger" i18n>Private</span>
        }
        @if (isPublicPlaylist()) {
          <span class="pt-badge badge-info" i18n>Public</span>
        }
      </div>
      <div class="playlist-by-index">
        <div class="playlist-by">{{ playlist().ownerBy }}</div>
        <div class="playlist-index">
          <span>{{ currentPlaylistPosition }}</span><span>{{ playlistPagination.totalItems }}</span>
        </div>
      </div>
      <div class="playlist-controls">
        <button
          class="border-0 p-0 me-2" [ngClass]="{ active: autoPlayNextVideoPlaylist }" (click)="switchAutoPlayNextVideoPlaylist()"
          [ngbTooltip]="autoPlayNextVideoPlaylistSwitchText" [ariaLabel]="autoPlayNextVideoPlaylistSwitchText"
          placement="bottom auto" container="body"
          >
          <my-global-icon iconName="videos"></my-global-icon>
        </button>
        <button
          class="border-0 p-0" [ngClass]="{ active: loopPlaylist }" (click)="switchLoopPlaylist()"
          [ngbTooltip]="loopPlaylistSwitchText" [ariaLabel]="loopPlaylistSwitchText"
          placement="bottom auto" container="body"
          >
          <my-global-icon iconName="repeat"></my-global-icon>
        </button>
      </div>
    </div>
    @for (playlistElement of playlistElements; track playlistElement) {
      <div [ngClass]="'element-' + playlistElement.position">
        <my-video-playlist-element-miniature
          [playlistElement]="playlistElement" [playlist]="playlist()" [owned]="isPlaylistOwned()" (elementRemoved)="onElementRemoved($event)"
          [playing]="currentPlaylistPosition === playlistElement.position" [accountLink]="false" [position]="playlistElement.position"
        ></my-video-playlist-element-miniature>
      </div>
    }
  </div>
}
