{{#each collections as |collection|}}
  <div class="playlist-card mg-b-1 flex flex--verticalCenter" data-test-selector="playlist-index-row">
    {{!-- TODO: Make image link to VoD watch page, title to playlist editor --}}
    {{#if collection.firstVideoId}}
      {{#link-to 'videos' collection.firstVideoId (query-params collection=collection.id)}}
        <img class="playlist-card__img" src={{collection.playlistCardImage}} data-test-selector='playlist-index-row-thumbnail'>
      {{/link-to}}
    {{else}}
      <img class="playlist-card__img" src={{collection.playlistCardImage}} data-test-selector='playlist-index-row-thumbnail'>
    {{/if}}
    <div class="playlist-card__body flex__item flex__item--grow">
      <h4 class="flex__item playlist-card__title ellipsis">{{collection.title}}</h4>

      <ul class="flex">
        <li class="flex__item">
          {{#common/button-element
            isHollow=true
            onClick=(route-action 'editCollection' collection)
            testSelector='edit-playlist-btn'
          }}
            {{t 'general.forms.edit'}}
          {{/common/button-element}}
        </li>

        <li class="flex__item mg-l-1">
          {{#common/button-element isText=true}}
            {{t 'general.forms.share'}}
          {{/common/button-element}}
          {{!-- TODO: Use share-box component but as a plain text link rather than hollow button --}}
          {{!-- {{share-box label=(t 'general.forms.share') isText=true}} --}}
        </li>

        <li class="flex__item mg-l-1">
          {{#common/button-element isText=true onClick=(action 'deleteCollection' collection)}}
            {{t 'general.forms.delete'}}
          {{/common/button-element}}
        </li>
      </ul>
    </div>

    <div class="playlist-card-meta flex__item pd-1">
      <div class="playlist-card-meta__item flex__item flex__item--grow">
        <span class="playlist-card-meta__label">{{i18n 'Last updated'}}</span>
        <span class="playlist-card-meta__stat">{{relative-time date=collection.updatedAt}}</span>
      </div>

      <div class="playlist-card-meta__item flex__item flex__item--grow">
        <span class="playlist-card-meta__label">{{i18n 'Collection length'}}</span>
        <span class="playlist-card-meta__stat">{{length-as-clock collection.totalDuration}}</span>
      </div>

      <div class="playlist-card-meta__item flex__item flex__item--grow">
        <span class="playlist-card-meta__label">{{i18n 'Total videos'}}</span>
        <span class="playlist-card-meta__stat">{{collection.itemsCount}}</span>
      </div>

      <div class="playlist-card-meta__item flex__item flex__item--grow">
        <span class="playlist-card-meta__label">{{i18n 'Views'}}</span>
        <span class="playlist-card-meta__stat">{{collection.views}}</span>
      </div>
    </div>
  </div>
{{/each}}
