{{#video/resumable-wrapper video=video class='video item' as |resumable|}}
  <div class="card" data-test-selector="snap">
    <div class="card__layout">
      <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}}>
        <figure class="card__img {{if animatePreview 'card__img--animated'}}">
          <img src="{{if animatePreview video.animated_preview_url preview}}" alt="Preview of {{video.channel.name}} streaming {{video.game}}" onerror="this.style.display = 'none'">
          <figure class="card__meta card__meta--left">
            {{partial 'svg/glyph-views'}}
            {{commatized video.views}}
          </figure>
          <figure class="card__meta card__meta--right">
            {{partial 'svg/glyph-length'}}
            {{length-as-clock video.length}}
          </figure>
          {{#if resumable.hasResumeTime}}
            <div class="progress-bar-wrapper">
              <div class="progress-bar progress-bar--sm progress-bar--theme-purple mg-t-1">
                {{progress-bar current=resumable.resumeTime total=video.length classNames='progress-bar--theme-purple progress-bar--sm'}}
              </div>
            </div>
          {{/if}}
        </figure>
      </a>
      <div class="card__body">
        {{#if (and showBoxart video.game)}}
          <a href={{video.gameUrl}} title={{video.game}} class="card__img card__img--boxart card__img--sidekick"
            {{action (route-action 'handleGameThumbnailClick' video)}}
            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}}
        {{#if isDismissable}}
          <div class='balloon-wrapper coviews__balloon-wrapper float-right mg-l-1 inline-block'>
            <button data-test-selector="gear-button" class="button button--icon-only button--secondary {{if isButtonVisible 'show' 'hide'}}" {{action 'toggleMenuVisibility'}}>
              {{svg-icon path='svg/gear'}}
            </button>

            <div data-test-selector="gear-menu" class="balloon balloon--up balloon--right balloon--dropmenu balloon--sm {{if isMenuVisible 'show' 'hide'}} {{if isDismissable 'coviews__balloon'}}">
              <ul class="balloon__list">
                <li><a data-test-selector="remove-video" class="balloon__link" {{action handleDismissClick}}>{{i18n 'Remove Recommendation'}}</a></li>
              </ul>
            </div>
          </div>
        {{/if}}
        {{#if video.title}}
          <h3 class="card__title card__title--clamp">
            <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>
          </h3>
        {{else}}
          <h3 class="card__title ellipsis">{{i18n 'Untitled Broadcast'}}</h3>
        {{/if}}

        <p class="card__info ellipsis">
          {{! template-lint-disable bare-strings }}
          {{#if isCoview}}
            <span> {{relative-time date=video.recordedDate relativeDayCutoff=14}} &middot; </span>
          {{else}}
            <span> {{relative-time date=video.recordedDate}} &middot; </span>
          {{/if}}
          {{! template-lint-enable bare-strings }}
          {{#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>
  </div>
{{/video/resumable-wrapper}}
