{% trans_default_domain 'admin' %}

<div {{ attributes }} class="relative inline-flex">
    <button type="button"
            data-action="live#action"
            data-live-action-param="toggle"
            aria-haspopup="dialog"
            aria-expanded="{{ open ? 'true' : 'false' }}"
            title="{{ 'editions.emoji.change'|trans }}"
            class="inline-flex items-center justify-center rounded-md text-2xl leading-none px-1.5 py-0.5 -ml-1 hover:bg-gray-100 dark:hover:bg-gray-800 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 transition-colors cursor-pointer">
        <span class="sr-only">{{ 'editions.emoji.change'|trans }}</span>
        {{ edition.emoji ? edition.emoji|emojify('github') : '🏷️' }}
    </button>

    {% if open %}
        {# click-outside backdrop #}
        <div class="fixed inset-0 z-10" data-action="live#action" data-live-action-param="close"></div>

        <div role="dialog"
             class="absolute left-0 top-full z-20 mt-2 w-72 rounded-lg bg-white dark:bg-gray-900 shadow-lg ring-1 ring-black/5 dark:ring-white/10 p-3">
            <input type="text"
                   data-model="debounce(200)|query"
                   value="{{ query }}"
                   autofocus
                   autocomplete="off"
                   placeholder="{{ 'editions.emoji.search'|trans }}"
                   class="block w-full rounded-md bg-white dark:bg-gray-800 px-3 py-1.5 text-sm text-gray-900 dark:text-gray-100 border-0 ring-1 ring-inset ring-gray-300 dark:ring-gray-700 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-primary-600"/>

            <div class="mt-3 grid grid-cols-8 gap-0.5 max-h-64 overflow-y-auto">
                {% for code in this.codes %}
                    <button type="button"
                            data-action="live#action"
                            data-live-action-param="select"
                            data-live-code-param="{{ code }}"
                            title="{{ code }}"
                            class="flex aspect-square items-center justify-center rounded-md text-xl leading-none hover:bg-gray-100 dark:hover:bg-gray-800 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 transition-colors cursor-pointer {{ code == edition.emoji ? 'bg-primary-50 ring-1 ring-primary-500 dark:bg-primary-500/10' : '' }}">
                        {{ code|emojify('github') }}
                    </button>
                {% else %}
                    <p class="col-span-8 py-6 text-center text-sm text-gray-500 dark:text-gray-400">{{ 'editions.emoji.noResults'|trans }}</p>
                {% endfor %}
            </div>
        </div>
    {% endif %}
</div>
