<?xml version="1.0" encoding="UTF-8" ?>
<template xml:space="preserve">
    <t t-name="mail.MessageReactionList">
        <Dropdown state="preview" position="'top-middle'" menuClass="'mt-1 overflow-visible ' + store.discussDropdownMenuClass(this)" manual="true" bottomSheet="false" focusToggleOnClosed="false">
            <t t-call="mail.MessageReactionList.button" />
            <t t-set-slot="content">
                <t t-call="mail.MessageReactionList.preview"/>
            </t>
        </Dropdown>
    </t>
    
    <t t-name="mail.MessageReactionList.button">
        <button class="position-relative o-mail-MessageReaction btn d-flex p-0 bg-view border o-rounded-bubble mb-1 fs-5 px-1 gap-1 align-items-center" t-on-click="() => this.onClickReaction(props.reaction)" t-on-contextmenu="onContextMenu" t-on-mouseenter="loadEmoji" t-ref="reactionButton" t-att-class="{
            'o-selfReacted border-primary text-primary fw-bold': hasSelfReacted(props.reaction),
            'border-secondary': !hasSelfReacted(props.reaction),
            'ms-1': env.inChatWindow and env.alignedRight,
            'me-1': !(env.inChatWindow and env.alignedRight),
            'cursor-default': !props.message.canAddReaction(),
        }">
            <span t-esc="props.reaction.content"/>
            <span class="small" t-esc="props.reaction.count"/>
        </button>
    </t>
    
    <t t-name="mail.MessageReactionList.preview">
        <div class="o-mail-MessageReactionList-preview px-0 py-1 cursor-pointer d-flex" t-on-click="(ev) => this.onClickReactionList(props.reaction)" t-ref="reactionList">
            <div class="d-flex align-items-center mx-2 gap-2">
                <span class="fs-1" t-esc="props.reaction.content"/>
                <span class="o-mail-MessageReactionList-previewText small me-1" t-esc="previewText(props.reaction)"/>
            </div>
        </div>
    </t>
    
</template>
