{{#if hasGameFollows}}

  <div class='section_header first'>
    <h3 class='title'>
      {{i18n "Live Games"}}
    </h3>
  </div>

  <div class='js-games games'>
    {{#infinite-scroll action="loadMoreGames" hideMore=model.hideMore isLoading=model.isLoading contentLength=model.length classNames="tower tower--bleed tower--180 tower--gutter-sm"}}
      {{#each model.sortedContent as |game index|}}
        {{directory-game model=game position=index tt_content_index=index tt_medium="twitch_following" tt_content="followed_game"}}
      {{/each}}
      {{tower-placeholder}}
    {{/infinite-scroll}}
  </div>
{{/if}}

{{#unless model.isLoading}}
  {{#if hasGameFollows}}
    {{#unless hasLiveGames}}
      <p class='empty-grid'>
        {{i18n "No Games Live"}}
      </p>
      {{interactivity-beacon beaconId='following-directory-no-live-games'}}
    {{/unless}}
  {{else}}
    {{directory-games-following-none openInModal="openInModal"}}
  {{/if}}
{{/unless}}

{{#if model.isLoading}}
  {{loading-more-spinner}}
{{/if}}
