{{#if conversations.activeConversation}}
  {{social-column/active-window
    allUserEmotes=allUserEmotes
    openInModal='openInModal'
    closeModal='closeModal'
    closeConversation=(action 'closeConversation')
    isFocused=conversations.activeConversation.isFocused
    channel=channel
    isExpanded=isWhisperExpanded
  }}
{{/if}}

<div class="sc js-conversations-list-inner flex flex--column">
  <div class="flex__item">
    <div class='sc__tab-collapsed'>
      {{#if (eq activeTab 'friends')}}
        {{svg-icon path='svg/friends-sc'}}
      {{else if (eq activeTab 'whispers')}}
        {{svg-icon path='svg/messages-sc'}}
      {{else if (eq activeTab 'requests')}}
        {{svg-icon path='svg/requests-sc'}}
      {{/if}}
    </div>
    {{#common/tab-container class="sc__tabs tw-tabs--fullwidth mg-x-1"}}
      {{#common/tab-item class="tw-tabs__item sc__tab pos-relative"}}
        <a role="tab" href="#" class="{{if (eq activeTab 'friends') 'active'}}" {{action 'setActiveTab' 'friends'}} title="{{i18n 'Friends'}}">{{svg-icon path='svg/friends-sc'}}</a>
      {{/common/tab-item}}
      {{#common/tab-item class="tw-tabs__item sc__tab sc__tab--whispers"}}
        <a role="tab" href="#" class="{{if (eq activeTab 'whispers') 'active'}}" {{action 'setActiveTab' 'whispers'}} title="{{i18n 'Whispers'}}">
          {{svg-icon path='svg/messages-sc'}}
          {{#if conversations.totalUnreadCount}}
            <span class="js-total-unread-count sc__badge"></span>
          {{/if}}
        </a>
      {{/common/tab-item}}
      {{#common/tab-item class="tw-tabs__item sc__tab sc__tab--requests"}}
        <a role="tab" href="#" class="{{if (eq activeTab 'requests') 'active'}}" {{action 'setActiveTab' 'requests'}} title={{i18n 'Friend Requests'}}>
          {{svg-icon path='svg/requests-sc'}}
          {{#if shouldDisplayCount}}
            <span class="js-unseen-request-count sc__badge"></span>
          {{/if}}
        </a>
      {{/common/tab-item}}
    {{/common/tab-container}}
  </div>

  <div class="flex__item scroll sc__list-container js-social-column-list-container">
    <div class="tse-scroll-content js-social-column-list">
      <div class="tse-content sc__list">
        {{#if hasQuery}}
          {{social-column/search-results
            friendResults=(if hasQuery friendResults)
            searchResults=searchResults
            openConversation=(action openConversation)
            isLoading=isSearchLoading
            hasError=hasSearchError
            query=query
          }}
        {{else if (eq activeTab 'friends')}}
          {{#if showFriendsOnboarding}}
            {{!-- friends onboarding --}}
          {{/if}}
          {{#if friends.isLoading}}
            {{!-- isLoading state --}}
          {{else}}
            {{#each displayableFriends as |friend|}}
              {{social-column/list-item
                friend=friend
                login=friend.login
                displayName=friend.displayName
                avatarUrl=friend.avatar
                openConversation=(action openConversation)
                channel=channel
              }}
            {{else}}
              {{social-column/empty-friends-state}}
            {{/each}}
            {{#if showViewAllFriends}}
              {{#link-to friendsRoute}}
                <div class="card card--xs card--row sc__row">
                  {{svg-icon path="svg/nav-more" class="sc__nav-more-icon"}}
                  <span class="sc__nav-more-text">
                    {{i18n "View All Friends"}}
                  </span>
                </div>
              {{/link-to}}
            {{/if}}
          {{/if}}
          {{social-column/recommended-list}}
        {{else if (eq activeTab 'whispers')}}
          {{#if showWhispersOnboarding}}
            {{!-- whispers onboarding --}}
          {{/if}}
          {{#each sortedConversations as |conversation|}}
            {{social-column/list-item
              conversation=conversation
              openConversation=(action openConversation)
              closeConversation=(action 'closeConversation')
            }}
          {{else}}
            {{social-column/empty-whispers-state}}
          {{/each}}
        {{else if (eq activeTab 'requests')}}
          {{social-column/friend-requests isClosed=(not-eq activeTab 'requests')}}
        {{/if}}
      </div>
    </div>
  </div>

  <div class="flex__item">
    <div class="sc__search">
      {{social-column/search
        search=(action 'search')
        query=(readonly query)
      }}
    </div>
  </div>
</div>
