<div class="flex__item playlist-editor-card__number {{if itemIsRemoved 'hide' ''}}">{{plus-one item.position}}</div>

<div class="flex__item {{if itemIsRemoved 'hide' ''}}">
  {{#link-to 'videos' item.video.id}}
    <img class="playlist-editor-card__img" src={{item.video.cardPreview}}>
  {{/link-to}}
</div>

<div class="playlist-editor-card__body flex__item flex__item--grow mg-l-2 mg-r-1 {{if itemIsRemoved 'hide' ''}}">
  {{#link-to 'videos' item.video.id}}
    <h5 class="pd-0 mg-0 ellipsis">{{item.title}}</h5>
  {{/link-to}}
  <p class="sub-text pd-0 ellipsis">
    {{length-as-clock item.duration}}
    <span class="middot-divider"></span>
    {{#link-to 'channel' item.video.channel.name}}
      {{item.video.channel.displayName}}
    {{/link-to}}
  </p>
</div>

<div class="playlist-editor-card__options flex flex__item flex--verticalCenter {{if itemIsRemoved 'hide' ''}}">
  <div class="flex__item mg-r-2 pd-y-1">
    <div class="button button--hollow balloon-wrapper" {{action 'toggleShowMore'}}>
      {{i18n 'More'}}
      <div class="balloon balloon--down balloon--right balloon--dropmenu balloon--no-tail {{if isShowingMore 'show' 'hide'}}">
        <ul class="balloon__list">
          <li><a class="balloon__link" href="#">{{i18n 'Set as collection thumbnail'}}</a></li>
          <li class="balloon__stroke"></li>
          <li><a class="balloon__link balloon__link--alert" href="#" {{action 'removeItem'}}>{{i18n 'Remove from collection'}}</a></li>
        </ul>
      </div>
    </div>
  </div>
  <div class="flex__item playlist-editor-card__gripper cursor--pointer">
    {{svg-icon path='svg/gripper'}}
  </div>
</div>
