<div class='js-conversations-list-bottom-bar conversations-list-bottom-bar'>
  <div class='conversations-list-search-bar'>
    {{input placeholder="Search for People" value=searchString class="text"}}
    {{#if searchString}}
      <span class='clear-search' {{action 'clearSearch' bubbles=false}}>
        {{partial 'svg/close'}}
      </span>
    {{/if}}
  </div>
  <a class='conversations-list-icon button button--icon-only' title='Conversations List' {{action 'toggleConversationsList'}} tabindex='0'>
    {{svg-icon path='svg/conversations/conversations'}}
  </a>
  {{#if convService.totalUnreadCount}}
    <div class='total-unread'>
      <span>
        {{#if (gt convService.totalUnreadCount 99)}}
          99+
        {{else}}
          {{convService.totalUnreadCount}}
        {{/if}}
      </span>
    </div>
  {{/if}}
</div>
<div class='js-conversations-list conversations-list'>
  <div class='conversations-list-header flex flex--verticalCenter' {{action 'toggleConversationsList'}}>
    <div class="flex__item--grow">
      {{i18n 'Whispers'}}
    </div>
    <div class='header-button-container'>
      <a class='button button--icon-only js-conversations-list-settings-toggle conversations-list-settings-toggle' {{action 'toggleListSettings' bubbles=false}}>
        {{svg-icon path='svg/gear'}}
      </a>
      <a class='button button--icon-only conversation-collapse-toggle' {{action 'hideList' bubbles=false}}>
        {{svg-icon path='svg/conversations/minimize'}}
      </a>
      <div class='js-conversation-settings-menu-container conversation-settings-menu-container hidden'>
        {{twitch-conversations/list-settings
          hideSettings='hideSettings'
        }}
      </div>
    </div>
  </div>
  {{twitch-conversations/search
    searchString=searchString
    hideList='hideList'
    focusedItemIndex=focusedItemIndex
  }}
  {{#if (not searchString)}}
    <div class='js-conversations-list-inner conversations-list-inner scroll-container'>
      {{#each listedConversations as |conversation index|}}
        {{twitch-conversations/list-item
          conversation=conversation
          hideList='hideList'
          hasFocus=(eq index focusedItemIndex)
        }}
      {{/each}}
      <div class="conversations-blank-slate">
        {{partial 'svg/conversations/conversations'}}
        <p>Use the search box to find someone you want to chat with.</p>
      </div>
    </div>
  {{/if}}
</div>
