<?xml version="1.0" encoding="UTF-8"?>
<templates xml:space="preserve">
<t t-name="mail.EmojisDropdown" owl="1">
    <div t-ref="emojisDropdown" t-att-class="{
        'd-none': props.readonly || props.enable_emojis === false,
        'o_mail_emojis_dropdown_translation': props.readonly and props.isTranslatable,
        'o_mail_emojis_dropdown_textarea': props.type === 'text' and !props.readonly,
    }" class="o_mail_emojis_dropdown o_mail_add_emoji dropdown position-relative">
        <button class="btn btn-block dropdown-toggle px-3 py-1" t-ref="toggleRef"
            type="button"
            data-bs-toggle="dropdown"
            aria-haspopup="true"
            aria-expanded="false"
            title="Add an emoji">
            <i class="fa fa-smile-o"/>
        </button>
        <div class="dropdown-menu border-0 p-2" style="width: 406px">
            <div class="o_mail_emoji_container">
                <t t-foreach="emojis" t-as="emoji" t-key="emoji_index">
                    <span t-on-click="props.onEmojiClick"
                        t-att-data-emoji="emoji.sources[0]" class="o_mail_emoji"
                        t-att-title="emoji.name or emoji.description"
                        t-att-aria-label="emoji.name or emoji.description">
                        <t t-out="emoji.codepoints or emoji.unicode"/>
                    </span>
                </t>
            </div>
        </div>
    </div>
</t>
</templates>
