<div class="card">
  <div class="card__layout">
    <figure class="card__img">
      {{#link-to 'channel.index' stream.channel.name data-tt_content_index=(plus-one tt_content_index) data-tt_content=tt_content data-tt_medium=tt_medium data-channel-link=''}}
        <img src="{{stream.preview.medium}}">
      {{/link-to}}

      {{#link-to-game stream.game data-href=stream.gameUrl title=stream.game data-tt_content_index=(plus-one tt_content_index) data-tt_content=tt_content data-tt_medium=tt_medium class="card__boxpin"}}
        <img src="{{stream.gameBoxart}}" data-placeholder="{{stream.gameBoxart}}">
      {{/link-to-game}}
    </figure>
    <div class="card__body">
      <h3 class="card__title ellipsis">
        {{#if stream.channel.status}}
          {{#link-to 'channel.index' stream.channel.name title=stream.channel.status data-tt_content_index=(plus-one tt_content_index) data-tt_content=tt_content data-tt_medium=tt_medium data-channel-link=''}}
            {{stream.channel.status}}
          {{/link-to}}
        {{else}}
          {{i18n 'Untitled Broadcast'}}
        {{/if}}
      </h3>
      <p class="card__info">
        {{commatized stream.viewers}}
        {{i18n 'viewers on'}}
        {{#if stream.channel.displayName}}
          {{#link-to 'channel.index' stream.channel.name data-tt_content_index=(plus-one tt_content_index) data-tt_content=tt_content data-tt_medium=tt_medium class='js-channel-link'}}
            {{stream.channel.displayName}}
          {{/link-to}}
        {{else}}
          {{t 'general.Twitch.unknown'}}
        {{/if}}
      </p>
    </div>
  </div>
</div>
