<div class='chatters-container js-chatters-container clearfix'>
  {{#if model.isLoading}}{{loading-spinner}}{{/if}}
  <div class='chatters'>
    <div class='drag_handle chat-header'>
      <a {{action toggleViewerList}} class='button button--icon-only close-button chat-header__button chat-header__button--left'>
        {{svg-icon path='svg/close'}}
      </a>
      <p class='room-title'>{{i18n "Viewer List"}}</p>
      {{#unless isPopped}}
        <a {{action "popoutViewerList"}} class='button button--icon-only popout-button chat-header__button chat-header__button--right' id='popout'>
          {{svg-icon path='svg/popout'}}
        </a>
      {{/unless}}
    </div>
    {{#if isEmpty}}
      {{#if model.errorOccurred}}
        <div class='chat-menu-content'>
          {{i18n "Currently unavailable, please try again later."}}
        </div>
      {{/if}}
    {{/if}}
    <div class='js-chat-scroll scroll scroll-dark' id='viewers'>
      {{#chat/twitch-chat-viewer-list items=lines cell-layout=(fixed-grid-layout width 18) as |viewer|}}
        {{chat/twitch-chat-viewer-list-row viewer showModOverlay=showModOverlay}}
      {{/chat/twitch-chat-viewer-list}}
    </div>
  </div>
</div>
