{{#unless isLoadingFollowsCount}}
  {{#if hasFollows}}

    <div class="section_header first">
      <h3 class="title">
        {{t 'general.Twitch.liveChannels'}}
      </h3>
    </div>

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

    {{#if model.isLoading}}
      {{loading-more-spinner}}
    {{else if noLiveChannels}}
      <p class="empty-grid">
        {{t 'general.Twitch.noChannelsLive'}}
      </p>
      {{interactivity-beacon beaconId='following-directory-no-live-channels'}}
    {{/if}}
  {{else}}
    {{directory-following-none}}
  {{/if}}
{{/unless}}
