{{chat/chat-textarea
    room=room

    showEmoticonSelector=showEmoticonSelector
    showEmoticonSelectorToggle=showEmoticonSelectorToggle

    focusChatInputWindow=(action focusChatInputWindow)
    sendMessage=(action sendMessage)
    toggleEmoticonSelector=(action toggleEmoticonSelector)

    isDarkMode=isDarkMode
}}

{{#if showEmoticonSelector}}
  {{#if isLoadingSubscription}}
    {{loading-spinner}}
  {{/if}}

  {{#unless isRoomModelLoading}}
    {{emoticon-selector
        channelProduct=room.product
        isSubscribed=isSubscribed
        subscribeToUnlockText=subscribeToUnlockText
        subscribeText=(i18n 'Subscribe')
        allEmotes=allEmoticonImages
        action='selectEmoticon'
        hideAction=toggleEmoticonSelector
    }}
  {{/unless}}
{{/if}}

{{!-- Wait until room model is done loading. This allows for userstate to load, which avoids a race condition where downstream actions rely on this information.. --}}
{{#unless isRoomModelLoading}}
  {{chat/chat-settings-menu
      isHidden=hideSettingsMenu
      chatUser=room
      hideChat=(action hideChat)
      popoutChat=(action popoutChat)
      setColor=(action 'setColor')
  }}
{{/unless}}

<div class="js-chat-buttons chat-buttons-container clearfix">
  <a {{action 'toggleSettingsPopup'}} class="button button--icon-only float-left js-toggle-chat-settings" title="{{i18n 'Chat Settings'}}">
    {{#if (and room.isModeratorOrHigher showFollowersNotification)}}
      <div class="balloon-wrapper" {{action 'dismissFollowersNotification'}}>
        <div class="balloon balloon--up balloon--center show">{{i18n 'New! Followers-only mode'}}</div>
      </div>
    {{/if}}
    {{svg-icon path='svg/gear'}}
  </a>

  <a {{action toggleViewerList}} class="button button--icon-only float-left" title="{{i18n 'Viewer List'}}">
    {{svg-icon path='svg/viewerlist'}}
  </a>

  <button class="button float-right qa-chat-buttons__submit js-chat-buttons__submit" disabled={{isFlashDisabled}} {{action sendMessage}}>
    {{submitButtonText}}
  </button>
</div>
