{{#unless isLoadingFollowsCount}}
  {{#if hasFollows}}
    <div class='section_header first'>
      <h3 class='title'>
        {{i18n "Live Hosts"}}
      </h3>
    </div>

    <div class='js-streams streams items'>
      {{#infinite-scroll action="loadMoreHosts" hideMore=model.hideMore isLoading=model.isLoading contentLength=model.length classNames="tower tower--bleed tower--240 tower--gutter-sm"}}
        {{#each model as |stream index|}}
          {{host-preview
              stream=stream
              tt_medium="twitch_following"
              tt_content="live_host"
              tt_content_index=index
          }}
        {{/each}}
        {{tower-placeholder}}
      {{/infinite-scroll}}
    </div>

    {{#if model.isLoading}}
      {{loading-more-spinner}}
    {{else if noHostsLive}}
      <p class='empty-grid'>
        {{i18n "No Hosts Live"}}
      </p>
      {{interactivity-beacon beaconId='following-directory-no-live-hosts'}}
    {{/if}}
  {{else}}
    {{directory-following-none}}
  {{/if}}
{{/unless}}
