<div class="js-quick-reply-toast flex flex--column">
  <div class="flex flex__item flex--nowrap">
    <div class="flex__item flex__item--noGrow toast__thumbnail" {{action 'onBodyClick'}}>
      <img src="{{avatarUrl}}" width="40" height="40">
    </div>
    <div class="flex__item flex__item--grow" {{action 'onBodyClick'}}>
      <div class="flex toast__content flex--column pd-l-1">
        <div class="flex__item toast__content-msg">
          <div class="float-left">
            <span class="strong pd-x-0">{{otherDisplayName}}</span>
            {{unreadString}}
          </div>
        </div>
        <div class="flex__item toast__content-msg toast__content-wrap">
          {{#each tokenizedMessage as |token|}}
            {{#if (not token.hidden)}}
              {{#if (eq token.type "emoticon")}}
                {{#tipsy-wrapper gravity="n" selector="img"}}<img class="emoticon tooltip" src={{token.imgSrc}} alt={{token.altText}} title={{token.altText}} srcset={{token.srcSet}}>{{/tipsy-wrapper}}
              {{else}}
                {{token.text}}
              {{/if}}
            {{/if}}
          {{/each}}
        </div>
      </div>
    </div>
    <div class="flex__item flex__item--end flex__item--noGrow toast__action-wrapper">
      <div class="flex flex--fullHeight flex--column">
        {{#if shouldShowInput}}
          <div class="flex flex--verticalCenter flex--horizontalCenter flex__item toast__action--secondary toast__action-bottom-border" {{action 'muteConversation'}}>
            <button class="flex__item">{{i18n 'Mute'}}</button>
          </div>
        {{else}}
          <div class="flex flex--verticalCenter flex--horizontalCenter flex__item toast__action--primary" {{action 'showInput'}}>
            <button class="flex__item">{{i18n 'Reply'}}</button>
          </div>
        {{/if}}
        <div class="flex flex--verticalCenter flex--horizontalCenter toast__action-height flex--nowrap flex__item">
          {{#if shouldShowInput}}
            <div class="flex__item flex flex--fullHeight">
              <button class="toast__action--secondary toast__action--secondary-qr" {{action close}}>{{i18n 'Close'}}</button>
            </div>
          {{else}}
            <div class="flex__item flex flex--fullHeight flex--verticalCenter toast__drop-down-anchor">
              <button class="toast__action--secondary toast__action--secondary-qr" {{action close}}>{{i18n 'Close'}}</button>
              <div class="toast__drop-down-container">
                <div class="toast__drop-down-container-overflow-hide">
                  <button class="toast__drop-down anim-slideDown toast__action--secondary" {{action 'muteConversation'}}>{{i18n 'Mute'}}</button>
                </div>
              </div>
            </div>
          {{/if}}
        </div>
      </div>
    </div>
  </div>

  {{#if shouldShowInput}}
    <div class="flex__item qr-input__container">
      {{twitch-conversations/conversation-input class="flex__item" chatPlaceholder=replyPlaceholder allEmotes=allUserEmotes thread=thread}}
    </div>
  {{/if}}
</div>
