<div class='emoticon-selector-box not-subscribed dropmenu'>
  <div class="pd-t-1 pd-r-1 pd-l-1">
    {{input value=filter placeholder=(i18n 'Search for Emotes') key-press=(action 'onFilterChange') class="emoticon-selector__filter-input js-filter-input text text--full-width"}}
  </div>
  <div class="emotes channel-emotes {{if showChannelEmotes '' 'hidden'}}">
    <div class='emoticon-grid'>
      {{#each channelDisplayedEmotes as |emoticon|}}
        {{#tipsy-wrapper gravity="n" selector="span"}}
          <span class="emoticon tooltip {{if isSubscribed '' 'locked'}}" title="{{emoticon.displayName}}" style={{emoticon.style}} {{action "selectChannelEmoticon" emoticon.displayName}}></span>
        {{/tipsy-wrapper}}
      {{/each}}
    </div>
    {{#unless isSubscribed}}
      <div class='subscribe-message'>
        <div id='non-subscriber-message'>
          <span class='unlock-text'>{{subscribeToUnlockText}}</span>
          <a href="{{subscribeProductUrl}}" class="action subscribe-button button primary">
            <span class='subscribe-text'>{{subscribeText}}</span>
            <span class='subscribe-price'>{{subscribePrice}}</span>
          </a>
        </div>
      </div>
    {{/unless}}
  </div>
  <div class="emotes all-emotes {{if showChannelEmotes 'hidden'}}">
    <div class='emoticon-grid'>
      {{#each allDisplayedEmotes as |emoteSet|}}
        {{#if emoteSet.length}}
          <div class='emote-set'>
            {{#each emoteSet as |emoticon|}}
              {{#tipsy-wrapper gravity="n" selector="a"}}
                <a href="#"
                  {{action "selectOtherEmoticon" emoticon.displayName}}
                  title={{emoticon.displayName}}
                  class="emoticon tooltip"
                  style={{emoticon.style}}>
                </a>
              {{/tipsy-wrapper}}
            {{/each}}
          </div>
        {{/if}}
      {{/each}}
    </div>
  </div>
  <div class="emoticon-selector__tabs js-es__tabs {{if enableTabs '' 'hidden'}}">
    <span class="emoticon-selector__tab js-es__tab channel {{if showChannelEmotes 'active'}} {{if hasChannelEmotes '' 'hidden'}}" {{action 'viewChannel'}}>{{i18n 'Channel'}}</span>
    <span class="emoticon-selector__tab js-es__tab all {{if showChannelEmotes '' 'active'}} {{if hasAllEmotes '' 'hidden'}}" {{action 'viewAll'}}>{{i18n 'All'}}</span>
  </div>
</div>
