{{#if isActive}}
  <div class="emoji-picker {{if @isActive "opened"}}">
    <div class="emoji-picker-category-buttons">
      {{#if recentEmojis.length}}
        <button type="button" data-section="recent" {{action "onCategorySelection" "recent"}} class="btn btn-default category-button emoji">
          {{replace-emoji ":star:"}}
        </button>
      {{/if}}

      {{emoji-group-buttons onCategorySelection=(action "onCategorySelection") tagName=""}}

      {{#each-in customEmojis as |group emojis|}}
        <button type="button" data-section={{concat "custom-" group}} {{action "onCategorySelection" (concat "custom-" group)}} class="btn btn-default category-button emoji">
          {{replace-emoji (concat ":" emojis.firstObject.code ":")}}
        </button>
      {{/each-in}}
    </div>

    <div class="emoji-picker-content">
      <div class="emoji-picker-search-container">
        {{input
          class="filter"
          name="filter"
          placeholder=(i18n "emoji_picker.filter_placeholder")
          autocomplete="discourse"
          autocorrect="off"
          autocapitalize="off"
          input=(action "onFilter")
        }}

        {{d-icon "search"}}
      </div>

      <div class="emoji-picker-emoji-area" role="button" {{on "click" this.onEmojiSelection}} {{on "mouseover" this.onEmojiHover}}>
        <div class="results"></div>

        {{#conditional-loading-spinner condition=isLoading}}
          <div class="emojis-container">
            {{#if recentEmojis.length}}
              <div class="section recent" data-section="recent">
                <div class="section-header">
                  <span class="title">{{i18n "emoji_picker.recent"}}</span>
                  {{d-button icon="trash-alt" action=(action "onClearRecents") class="trash-recent"}}
                </div>
                <div class="section-group">
                  {{#each recentEmojis as |emoji|}}
                    {{replace-emoji (concat ":" emoji ":") (hash lazy=true)}}
                  {{/each}}
                </div>
              </div>
            {{/if}}

            {{emoji-group-sections}}

            {{#each-in customEmojis as |group emojis|}}
              <div class="section" data-section="custom-{{group}}">
                <div class="section-header">
                  <span class="title">
                    {{i18n (concat "emoji_picker." group)}}
                  </span>
                </div>
                {{#if emojis.length}}
                  <div class="section-group">
                    {{#each emojis as |emoji|}}
                      <img title={{emoji.code}} width="20" height="20" loading="lazy" class="emoji" src={{emoji.src}}>
                    {{/each}}
                  </div>
                {{/if}}
              </div>
            {{/each-in}}
          </div>
        {{/conditional-loading-spinner}}
      </div>

      <div class="emoji-picker-footer">
        <div class="emoji-picker-emoji-info">
          {{#if hoveredEmoji}}
            {{replace-emoji (concat ":" hoveredEmoji ":")}}
          {{/if}}
        </div>

        <div class="emoji-picker-diversity-picker">
          {{#each diversityScales as |diversityScale index|}}
            {{d-button
              icon=diversityScale.icon
              class=(concat "diversity-scale " diversityScale.name)
              title=diversityScale.title
              action=(action "onDiversitySelection" index)
            }}
          {{/each}}
        </div>
      </div>
    </div>
  </div>

  {{#if site.mobileView}}
    <div role="button" class="emoji-picker-modal-overlay" {{on "click" this.onClose}}></div>
  {{/if}}
{{/if}}
