{{#if visible}}
  <div class="emoji-menu" {{action "toggleMenu"}}>
    <div class="flaredown-white-box" {{action "noAction" bubbles=false}}>
      <div class="emoji-menu-tabs">
        <a {{action "selectGroup" "smile"}} class="emoji-menu-tab {{smileClass}}"></a>
        <a {{action "selectGroup" "flower"}} class="emoji-menu-tab {{flowerClass}}"></a>
        <a {{action "selectGroup" "bell"}} class="emoji-menu-tab {{bellClass}}"></a>
        <a {{action "selectGroup" "car"}} class="emoji-menu-tab {{carClass}}"></a>
        <a {{action "selectGroup" "grid"}} class="emoji-menu-tab {{gridClass}}"></a>
      </div>

      <hr class="devider">

      <div class="emoji-items-wrap">
        {{#each-in selectedGroup as |title style| }}
          <a class="emoji-item" title={{title}}>
            <div style={{style}} {{action "selectIcon" title}}></div>
          </a>
        {{/each-in}}
      </div>
    </div>
  </div>
{{/if}}

<a {{action "toggleMenu"}}>{{yield}}</a>