<?xml version="1.0" encoding="UTF-8"?>
<templates xml:space="preserve">

    <t t-name="mail.MessageReactionMenu">
        <Dialog size="'md'" header="false" footer="false" contentClass="contentClass">
            <div class="d-flex h-100" t-on-keydown="onKeydown" t-att-class="{'flex-column': store.useMobileView}" t-ref="root">
                <div class="d-flex overflow-auto o-scrollbar-thin bg-100 p-1 border-end" t-att-class="{'flex-column h-100 p-2': !store.useMobileView}">
                    <t t-foreach="props.message.reactions" t-as="reaction" t-key="reaction.content">
                        <button class="btn p-1 rounded-2 mx-2 py-0 d-flex align-items-center" t-att-class="{ 'bg-200 border-primary': reaction.eq(state.reaction) }" t-att-title="getEmojiShortcode(reaction)" t-on-click="() => state.reaction = reaction">
                            <span class="mx-1 fs-2" t-esc="reaction.content"/>
                            <span class="mx-1 pe-2" t-att-class="{ 'text-primary': reaction.eq(state.reaction) }" t-esc="reaction.count"/>
                        </button>
                    </t>
                </div>
                <div class="d-flex overflow-auto o-scrollbar-thin flex-column flex-grow-1 bg-view p-2 h-100">
                    <div t-foreach="state.reaction.personas" t-as="persona" t-key="persona.id" class="o-mail-MessageReactionMenu-persona d-flex p-1 align-items-center" t-att-class="{ 'o-isDeviceSmall': ui.isSmall }">
                        <img class="rounded object-fit-cover o-mail-MessageReactionMenu-avatar" t-att-src="persona.avatarUrl"/>
                        <span class="d-flex flex-grow-1 align-items-center">
                            <span class="mx-2 text-truncate fs-6" t-esc="props.message.getPersonaName(persona)"/>
                            <div class="flex-grow-1"/>
                            <button t-if="props.message.effectiveSelf.eq(persona)" class="btn btn-light fa fa-trash rounded-pill bg-inherit border-0" title="Remove" t-on-click.stop="() => state.reaction.remove()"/>
                        </span>
                    </div>
                </div>
            </div>
        </Dialog>
    </t>

</templates>
