<div class="support-button">
  {{#unless isChannelOwner}}
    {{#if canSupport}}
      {{#common/button-element onClick=(action "toggleSupport") testSelector='support-button' class=(if isSupporting 'button--icon button--icon-only button--status' 'button--icon')}}
        {{#if isSupporting}}
          <span class="button__status button__status--hover">{{svg-icon path='svg/star'}}</span>
          <span class="button__status button__status--primary">{{svg-icon path='svg/star'}}</span>
        {{else}}
          {{i18n 'Support'}}
        {{/if}}
      {{/common/button-element}}

      <div class="balloon-wrapper" style="float:right; display:inline;">
        <div class="support-balloon balloon balloon--down balloon--right balloon--sm {{if isMenuOpen 'show' 'hide'}}">
          <div class="flex">
            <div class="flex__item">
              {{#if isSupporting}}
                <h6>{{styled-i18n 'You are supporting %{channelName}!' (hash channelName=(format-display-name channel.name channel.display_name))}}</h6>
              {{else}}
                <h6>{{styled-i18n 'Want to support %{channelName} more?' (hash channelName=(format-display-name channel.name channel.display_name))}}</h6>
              {{/if}}
            </div>
            <div class="flex__item">
              <span class="inline-block sub-text">
                {{#if isSupporting}}
                  {{styled-i18n 'As a %{userType} who has chosen to view ads on this channel, you are helping %{channelName} earn more on Twitch. Thanks!' (hash channelName=(format-display-name channel.name channel.display_name) userType=userType)}}
                {{else}}
                  {{styled-i18n 'As a %{userType}, you are currently enjoying an ad-free experience. If you choose to view ads on this channel, you can help %{channelName} earn more on Twitch!' (hash channelName=(format-display-name channel.name channel.display_name) userType=userType)}}
                {{/if}}
              </span>
            </div>
          </div>
        </div>
        {{#common/button-element onClick=(action "toggleMenu") class="support-toggle cn-btn-toggle toggle-notification-menu"}}
        {{/common/button-element}}
      </div>
    {{/if}}
  {{/unless}}
</div>
