{{#video/resumable-wrapper video=video class='video item' as |resumable|}}
  <div class='content'>
    <div class='thumb'>
      <a href={{video.url}}
        {{action (route-action "handleVideoClick" video position totalVideos)}}
        class="{{unless animatePreview 'cap'}} {{if animatePreview 'card__img--animated'}} aspect"
        data-tt_content={{tt_content}}
        data-tt_medium={{tt_medium}}
        tt_content_index>

        <img class="{{unless animatePreview 'aspect__fill'}}" src={{if animatePreview video.animated_preview_url preview}}>

        <div class='overlay_info views'>
          {{partial 'svg/glyph-views'}}
          {{commatized video.views}}
        </div>

        <div class='overlay_info length'>
          {{partial 'svg/glyph-length'}}
          {{length-as-clock video.length}}
        </div>
      </a>

      {{#if resumable.hasResumeTime}}
        <div class="progress-bar-wrapper">
          {{progress-bar current=resumable.resumeTime total=video.length classNames="progress-bar--theme-purple progress-bar--sm"}}
        </div>
      {{else if resumable.isGameBoxartVisible}}
        <a href={{video.gameUrl}}
          title={{video.game}}
          {{action (route-action "handleGameThumbnailClick" video)}}
          class='boxart'
          data-tt_content={{tt_content}}
          data-tt_medium={{tt_medium}}
          data-tt_content_index={{plus-one tt_content_index}}>

          <img src={{video.gameBoxart}} alt={{video.game}}>
        </a>
      {{/if}}
    </div>

    {{#if video.isRecommended}}
      <div class='balloon-wrapper coviews__balloon-wrapper float-right mg-l-1 inline-block'>
        <button class="button button--icon-only button--secondary {{if isButtonVisible "show" "hide"}}" {{action "toggleMenuVisibility"}}>
          {{svg-icon path='svg/gear'}}
        </button>

        <div class="balloon balloon--up balloon--right balloon--dropmenu balloon--sm coviews__balloon {{if isMenuVisible "show" "hide"}}">
          <ul class="balloon__list">
            <li><a class="balloon__link" {{action handleDismissClick video position}}>{{i18n 'Remove Recommendation'}}</a></li>
          </ul>
        </div>
      </div>
    {{/if}}

    <div class='meta'>
      <p class='title'>
        {{#if video.title}}
          <a href={{video.url}}
            title={{video.title}}
            {{action (route-action "handleVideoClick" video position totalVideos)}}
            data-tt_content={{tt_content}}
            data-tt_medium={{tt_medium}}
            data-tt_content_index={{plus-one tt_content_index}}>

            {{video.title}}
          </a>
        {{else}}
          {{i18n 'Untitled Broadcast'}}
        {{/if}}
      </p>

      <p class='info desc'>
        {{#if vodGameInfo.isTextViewable}}
          {{#if video.game}}
            <a href={{video.gameUrl}} {{action (route-action "handleGameThumbnailClick" video)}} class='js-search-game'>
              {{video.game}}
            </a>
          {{else}}
            {{i18n 'No game selected'}}
          {{/if}}
        {{else}}
          {{or video.description 'No description'}}
        {{/if}}
      </p>

      <p class='info'>
        {{#if isCoview}}
          <span> {{relative-time date=video.recordedDate relativeDayCutoff=14}} &middot; </span>
        {{else}}
          <span> {{relative-time date=video.recordedDate}} &middot; </span>
        {{/if}}
        {{#link-to 'channel.videos' video.channel.name
          class='js-channel-link'
          data-tt_content=tt_content
          data-tt_medium=tt_medium
          data-tt_content_index=(plus-one tt_content_index)
        }}
          {{~format-display-name video.channel.name video.channel.display_name~}}
        {{/link-to}}
      </p>

    </div>
  </div>
{{/video/resumable-wrapper}}
