<div class="whisper {{if isExpanded 'whisper--expanded'}} js-conversation-window" id="active-window">
  <div class='whisper__header flex flex--verticalCenter'>

    <div class="whisper__sender flex__item mg-l-1 ellipsis">
      <span class="username">
        {{#if headerBadges}}
          <span class="badges">
            {{#each headerBadges as |badge|}}
              <img src={{badge.src}} srcset={{badge.srcSet}} class="badge" title={{badge.title}}>
            {{/each}}
          </span>
        {{/if}}
        {{format-display-name otherUser.username otherUser.displayName}}

        {{#if isFriend}}
          {{twitch-friends-list/twitch-friend-online-status userId=otherUser.id}}
          <span class="rich-presence">{{truncatedPresence}}</span>
        {{/if}}
      </span>
    </div>

    <div class='pin-tr mg-t-1 mg-r-1 flex__item flex flex--nowrap flex--verticalCenter'>
      {{#if friendLocation}}
        {{social-column/join-button friendLocation=friendLocation isUnconditionalShow=true channel=channel}}
      {{/if}}
      <a class='button button--icon-only {{if hasUnread "button--dark"}} conversation-settings-menu-toggle' {{action 'toggleSettings'}} title={{i18n 'Whisper Settings'}}>
        {{svg-icon path='svg/gear' iconModifier='icon--gear'}}
      </a>
      <a class='button button--icon-only {{if hasUnread "button--dark"}}' {{action 'closeConversation' bubbles=false}} title={{i18n 'Close'}}>
        {{svg-icon path='svg/close'}}
      </a>
    </div>

    <div class='conversation-settings-menu-container hidden'>
      {{twitch-conversations/conversation-settings-menu
        thread=thread
        openInModal='openInModal'
        closeModal='closeModal'
      }}
    </div>

  </div>

  {{#if shouldShowSpamCTA}}
    {{twitch-conversations/spam-cta
      conversation=conversation
    }}
  {{/if}}

  <div class='scroll whisper__body js-whisper-container'>
    <div class='tse-scroll-content whisper__content js-whisper-content' id='whisper__content'>
      <div class='tse-content'>
        {{twitch-conversations/conversation-chat-display
          conversation=conversation
          messageIdBeforeDivider=messageIdBeforeDivider
          isLoadingMessages=isLoadingMessages
        }}
      </div>
    </div>
  </div>
  {{twitch-conversations/conversation-input chatPlaceholder=whisperPlaceholder allEmotes=allUserEmotes thread=conversation.thread}}
</div>
