<div class="miniature" [ngClass]="{ 'no-videos': playlist().videosLength === 0, 'to-manage': toManage(), 'display-as-row': displayAsRow() }">
  <my-link
    [internalLink]="playlistRouterLink" [href]="playlistHref" [target]="playlistTarget" inheritParentStyle="true" inheritParentDimension="true"
    [title]="playlist().displayName" class="miniature-thumbnail" tabindex="-1"
    >
    <img alt="" [attr.aria-label]="playlist().displayName" [attr.src]="playlist().thumbnailUrl" />

    <div class="miniature-playlist-info-overlay">
      <ng-container i18n>{playlist().videosLength, plural, =0 {No videos} =1 {1 video} other {{{ playlist().videosLength }} videos}}</ng-container>
    </div>

    <div class="play-overlay">
      <div class="icon"></div>
    </div>
  </my-link>

  @if (!thumbnailOnly()) {
    <div class="miniature-info">
      <my-link
        [internalLink]="playlistRouterLink" [href]="playlistHref" [target]="playlistTarget" inheritParentStyle="true" inheritParentDimension="true"
        [title]="playlist().displayName" class="miniature-name" className="ellipsis-multiline-2"
        >
        {{ playlist().displayName }}
      </my-link>

      @if (displayChannel() && playlist().videoChannelBy) {
        <my-link
          class="by"
          [internalLink]="ownerRouterLink" [href]="ownerHref" [target]="ownerTarget" inheritParentStyle="true"
          >
          {{ playlist().videoChannelBy }}
        </my-link>
      }

      <div class="privacy-date">
        @if (displayPrivacy()) {
          <span class="privacy">{{ playlist().privacy.label }}</span>
        }

        <span i18n class="updated-at">Updated {{ playlist().updatedAt | myFromNow }}</span>
      </div>

      @if (displayDescription()) {
        <div class="description" [innerHTML]="playlistDescription"></div>
      }
    </div>
  }
</div>
