{{#if this.isActive}}
  {{! template-lint-disable no-invalid-interactive no-down-event-binding }}
  <div
    {{on "keydown" (action "keydown")}}
    class="emoji-picker {{if this.isActive 'opened'}}"
  >
    {{! template-lint-enable no-invalid-interactive no-down-event-binding }}
    <div class="emoji-picker-category-buttons">
      {{#if this.recentEmojis.length}}
        <button
          type="button"
          data-section="recent"
          {{on "click" (fn this.onCategorySelection "recent")}}
          class="btn btn-default category-button emoji"
        >
          {{replace-emoji ":star:"}}
        </button>
      {{/if}}

      <EmojiGroupButtons
        @onCategorySelection={{this.onCategorySelection}}
        @tagName=""
      />

      {{#each-in this.customEmojis as |group emojis|}}
        <button
          type="button"
          data-section={{concat "custom-" group}}
          {{on "click" (fn this.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"
          @value={{@initialFilter}}
          placeholder={{i18n "emoji_picker.filter_placeholder"}}
          autocomplete="off"
          @type="search"
          autocorrect="off"
          autocapitalize="off"
          {{on "input" (action "onFilterChange")}}
        />

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

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

        <div class="emojis-container">
          {{#if this.recentEmojis.length}}
            <div class="section recent" data-section="recent">
              <div class="section-header">
                <span class="title">{{i18n "emoji_picker.recent"}}</span>
                <DButton
                  @icon="trash-alt"
                  @action={{action "onClearRecent"}}
                  @class="trash-recent"
                />
              </div>
              <div class="section-group">
                {{#each this.recentEmojis as |emoji|}}
                  {{replace-emoji
                    (concat ":" emoji ":")
                    (hash lazy=true tabIndex="0" class="recent-emoji")
                  }}
                {{/each}}
              </div>
            </div>
          {{/if}}

          <EmojiGroupSections />

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

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

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

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