<div class="sticky-message sticky-message--small sticky-message--animated ontop open {{if isShowingBalloon 'sticky-message--hidden'}}">
  <div class="resub-message flex flex--verticalCenter">
    <div class="header header--small flex__item resub-amt">
      {{resubNotice}}
    </div>

    <button type="button" class="button flex__item" {{action 'setIsShowingBalloon' true}}>
      {{t 'general.forms.share'}}
    </button>

    <button type="button" class="button button--icon-only button--dark flex__item" {{action closeResubNotification}}>
      {{svg-icon path="svg/close"}}
    </button>
  </div>
</div>

<div class="resub-wrap {{unless isShowingBalloon 'resub-wrap--hidden'}}">
  <div class="resub-notif resub-notif--animating {{if isShowingBalloon 'resub-notif--shown' 'resub-notif--hidden'}}">
    <div class="balloon-wrapper">
      <div class="balloon balloon--no-tail balloon--static">
        <div class="resub-notif__close">
          <button type="button" class="button button--icon-only flex__item" {{action 'setIsShowingBalloon' false}}>
            {{svg-icon path="svg/close"}}
          </button>
        </div>

        <div class="resub-notif__notice align-center">
          <figure class="resub-notif__emoticon">
            <div class="emoticon-neck-wrap">
              <img src={{randomEmoticonUrl}}
                alt={{i18n 'rare emoticon'}}
                class="emoticon emoticon--rare {{if isShowingBalloon 'emoticon--rare-animating'}}">

              <div class="emoticon-neck {{if isShowingBalloon 'emoticon-neck--animating'}} {{if isUltraRareEmoticonNeckAnimation 'emoticon-neck--animating__ultrarare'}}">
                {{svg-icon path='svg/chat/neck'}}
              </div>
            </div>
          </figure>

          <p>{{detailedResubNotice}}</p>
        </div>

        <div class="resub-notif__message">
          {{input type='text'
            class='text resub-input'
            value=message
            placeholder=(i18n 'Add a message to the streamer')
            enter='shareMessage'}}

          <div class="resub-input-right">
            <button type="button"
              class="button {{if isOverCharacterLimit 'button--alert'}} {{if isSharingMessage 'button--disabled'}}"
              disabled={{or isOverCharacterLimit isSharing}}
              {{action 'shareMessage'}}>

              {{#if isOverCharacterLimit}}
                {{overCharacterLimitButtonText}}
              {{else if isSharingMessage}}
                {{i18n 'Sharing...'}}
              {{else}}
                {{t 'general.forms.share'}}
              {{/if}}
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
