{{#if session.isAuthenticated}}

  <dt class="warp__item warp__item--header warp__tabs">
    <span>
      <div class="js-open-friend-filter warp__tab {{if isFriendsOpen 'toggled'}}" {{action 'openFriends'}}>{{i18n "Friends"}}</div>
      <div class="js-open-friend-requests warp__tab {{unless isFriendsOpen 'toggled'}}" {{action 'openRequests'}}>
        {{i18n "Requests"}}
        {{#if shouldDisplayCount}}
          <span class="js-unseen-request-count warp__badge warp__badge--new">
            {{unseenRequestsCount}}
          </span>
        {{/if}}
      </div>
    </span>
  </dt>

  {{twitch-friends-list/twitch-friend-requests isClosed=isFriendsOpen}}
  <div class="js-friends-list {{unless isFriendsOpen 'hidden'}}">
    {{twitch-friends-list/twitch-friend-search search=(action 'search') query=(readonly query)}}

    {{#if isLoading}}
      <span class="js-friends-loading-message">
        <div class="warp__loader"></div>
      </span>
    {{/if}}

    {{#if showOnboarding}}
      <dd class="js-friends-onboarding friends-onboarding warp__item warp__board">
        <div class="align-center">
          {{partial 'svg/friends-onboarding'}}
          <p>{{i18n "Add friends to see their online status and start whispering!"}}</p>
          <a class="button dark mg-t-3" {{action 'dismissOnboarding'}}>{{i18n "Got it!"}}</a>
        </div>
      </dd>
    {{/if}}

    {{twitch-friends-list/twitch-friend-filter onClick=onClick
                           friendsToDisplay =(if hasQuery friendResults friends.displayableFriends)
                           hasQuery=hasQuery
                           hasFriends=hasFriends}}

    {{#if isCollapsed}}
      <dd class="warp__item">
        {{#link-to friendsRoute title=(i18n "View All Friends") data-href="all" data-tt_medium="twitch_leftnav"}}
          <span class="js-unseen-request-count warp__badge warp__badge--new warp__badge--no-text {{unless shouldDisplayCount 'hidden'}}"></span>
          <figure class="warp__avatar">{{partial 'svg/friends'}}</figure>
        {{/link-to}}
      </dd>
    {{/if}}

    {{twitch-friends-list/twitch-friend-search-results users=searchResults}}

    {{#if isEmptySearch}}
      <dd class="friends-header warp__item">
        <span class="js-empty-results empty-results">
          {{#if hasError}}
            {{i18n "Oops, there was a problem searching for users"}}
          {{else}}
            {{errorText}}
          {{/if}}
        </span>
      </dd>
    {{/if}}
  </div>
{{else}}
  <dd class="warp__item ellipsis">
    <span>{{i18n "You're not logged in."}}</span>
  </dd>
{{/if}}
