<div class='watchnow'>
  {{#if isLoadingStreams}}
    {{loading-spinner}}
  {{else if failedToLoadStreams}}
    <div class='no-follows'>
      {{i18n 'An unexpected error occurred while retrieving your recommended streams.'}}
    </div>
  {{else}}
    <div class='col-header inactive'>
      {{#if isLoggedIn}}
        <div class='float-right'>
          <div class='segmented-button'>
            <a class='button button--radio' {{action 'showFollowingLiveStreams'}}>
              <span class="button__label {{if isFollowingLiveStreamsVisible 'button__label--active'}}">{{i18n 'Live'}}</span>
            </a>
            <a class='button button--radio' {{action 'showFollowingOfflineChannels'}}>
              <span class="button__label {{if isFollowingOfflineChannelsVisible 'button__label--active'}}">{{t 'general.Twitch.offline'}}</span>
            </a>
          </div>
        </div>
      {{/if}}
      <div class='title'>{{i18n 'Following'}}</div>
      <div class='clearfix'></div>
    </div>
    {{#if isLoggedIn}}
      {{#if isFollowingLiveStreamsVisible}}
        {{#if followingStreams.length}}
          <div id='js-watchnow-follow' class='following-lists js-lists'>
            <ul class='following-list online'>
              {{#each followingStreams as |rec index|}}
                {{directory/right-column/vertical-stream-list-item
                  stream=rec.stream
                  tt_content='watchnow_following'
                  tt_medium='twitch_rightnav'
                  tt_content_index=(plus-one index)}}
              {{/each}}
            </ul>
          </div>
        {{else}}
          <div class='no-follows'>
            {{i18n 'None of the channels you follow are streaming.'}}
          </div>
        {{/if}}
      {{else}}
        <ul class='following-list offline js-following-offline'>
          {{#each followedOfflineChannels as |channel|}}
            {{directory-following-offline channel=channel}}
          {{/each}}
          {{#if isLoadingFollowedChannels}}
            {{loading-more-spinner}}
          {{/if}}
          <a {{action 'loadMoreFollowedChannels'}} class='load-more js-load-more'>
            <span>{{t 'general.common.loadMore'}}</span>
          </a>
        </ul>
      {{/if}}
    {{else}}
      <div class='no-follows'>
        {{i18n 'You must be logged in to view channels you follow.'}}
      </div>
      <div class='align-center mg-t-1'>
        <a {{action 'showLogin'}} class='qa-login-button no-login-contain__button button button--large' href='/login'>
          {{t 'general.account.logIn'}}
        </a>

        <a {{action 'showSignup'}} class='no-login-contain__button button button--large' href='/login'>
          {{t 'general.account.signUp'}}
        </a>
      </div>
    {{/if}}

    <div class='col-header inactive'>
      <div class='title'>{{i18n 'Recommendations'}}</div>
    </div>
    {{#if recommendedStreams.length}}
      <div id='js-watchnow-recs' class='following-lists js-lists'>
        <ul class='following-list online'>
          {{#each recommendedStreams as |rec index|}}
            {{directory/right-column/vertical-stream-list-item
              stream=rec.stream
              tt_content='watchnow_recommendation'
              tt_medium='twitch_rightnav'
              tt_content_index=(plus-one index)}}
          {{/each}}
        </ul>
      </div>
    {{else}}
      <div class='no-follows'>
        {{i18n 'Sorry, we have no recommendations for you right now.'}}
      </div>
    {{/if}}
  {{/if}}
</div>
