<div class='balloon-wrapper'>
  <div class="balloon balloon--down {{if balloonCenter "balloon--center" (if balloonLeft "balloon--left" "balloon--right")}} balloon--sm {{if isMenuOpen 'show' 'hide'}}">
    <div class="flex">
      <div class="flex__item">
        <h6>{{styled-i18n 'You are following %{channelName}' (hash channelName=(format-display-name channel.name channel.display_name))}}</h6>
      </div>

      <div class="flex__item flex flex--nowrap flex--verticalCenter pd-b-1">
        <div class="flex__item pd-r-2">
          <span class="{{unless globalNotificationsEnabled "disabled"}}"><h6>{{t 'general.Twitch.notifications'}}</h6></span>
        </div>
        <div class="flex__item flex__item--noShrink">
          <a class="{{if enableNotificationToggle "active" "disabled"}} switch" {{action "notificationToggle" }}><span></span></a>
        </div>
      </div>
      <div class="flex__item">
        {{#if globalNotificationsEnabled}}
          {{#if enableNotificationToggle}}
            <span class="inline-block pd-b-1 sub-text">{{i18n 'You will be notified on this channel\'s activity, including when they go live'}}</span>
          {{else}}
            <span class="inline-block pd-b-1 sub-text">{{i18n 'Opt in to notifications to receive updates on this channel\'s activity, including when they go live.'}}</span>
          {{/if}}

        {{else}}
          <span class="inline-block sub-text brick">
            {{#with (i18n-split-string "Your notifications are currently turned off globally. To enable, update your settings |here|.") as |translation|}}
              {{at-index translation 0}}<a href="/settings/notifications" target="_blank" rel="noopener noreferrer">{{at-index translation 1}}</a>{{at-index translation 2}}
            {{/with}}
          </span>
        {{/if}}
      </div>
    </div>
  </div>
  <button {{action "toggleMenu"}} class="cn-btn-toggle toggle-notification-menu"></button>
</div>
