<div class="card mg-b-2">
  <div class="card__layout">
    <figure class="card__img">
      {{#if collection.firstVideoId}}
        {{#link-to 'videos' collection.firstVideoId (query-params collection=collection.id)}}
          <img src={{collection.playlistCardImage}} data-test-selector='playlist-row-thumbnail'>
          <figure class="card__meta--right playlist-thumbnail-meta flex flex--column flex--veritcalCenter flex--horizontalCenter flex--fullHeight align-center">
            <div class="flex__item">
              {{partial 'svg/collections'}}
            </div>
            {{#with (i18n-split-string '|count| videos') as |translation|}}
              {{at-index translation 0}}
              {{collection.itemsCount}}
              {{at-index translation 2}}
            {{/with}}
          </figure>
        {{/link-to}}
      {{else}}
        <img src={{collection.playlistCardImage}} data-test-selector='playlist-row-thumbnail'>
        <figure class="card__meta--right playlist-thumbnail-meta flex flex--column flex--veritcalCenter flex--horizontalCenter flex--fullHeight align-center">
          <div class="flex__item">
            {{partial 'svg/collections'}}
          </div>
          {{#with (i18n-split-string '|count| videos') as |translation|}}
            {{at-index translation 0}}
            {{collection.itemsCount}}
            {{at-index translation 2}}
          {{/with}}
        </figure>
      {{/if}}
    </figure>
    <div class="card__body">
      <h3 class="card__title ellipsis">
        {{#if collection.firstVideoId}}
          {{#link-to 'videos' collection.firstVideoId (query-params collection=collection.id)}}
            {{collection.title}}
          {{/link-to}}
        {{else}}
          {{collection.title}}
        {{/if}}
      </h3>
      <p class="card__info" data-test-selector='playlist-row-items'>
        {{#with (i18n-split-string 'By |owner_name|') as |translation|}}
          {{at-index translation 0}}
          {{collection.owner.displayName}}
          {{at-index translation 2}}
        {{/with}}
        <span class="middot-divider"></span>
        {{#with (i18n-split-string '|views| plays') as |translation|}}
          {{at-index translation 0}}
          {{collection.views}}
          {{at-index translation 2}}
        {{/with}}
      </p>
    </div>
  </div>
</div>
