<?xml version="1.0" encoding="UTF-8"?>
<templates xml:space="preserve">
    <t t-name="mail.MessageSeenIndicator">
        <span t-if="props.message.channel_id?.exists()" class="o-mail-MessageSeenIndicator position-relative opacity-25 cursor-pointer" t-att-class="{ 'o-hasEveryoneSeen opacity-75': props.message.hasEveryoneSeen }" t-att-title="summary" t-attf-class="{{ props.className }}" t-on-click="openDialog">
            <i class="fa fa-check ps-1"/><i t-if="props.message.hasEveryoneSeen" class="o-second start-0 fa fa-check position-absolute"/>
        </span>
    </t>

    <t t-name="mail.MessageSeenIndicatorPopover.card">
        <div class="o-mail-MessageSeenIndicatorPopover-card d-flex align-items-center gap-2">
            <span class="o_avatar position-relative o_card_avatar" style="width: 30px;height:30px;">
                <img t-att-src="member.avatarUrl" class="w-100 h-100 rounded object-fit-cover" />
            </span>
            <span class="fw-bold" t-esc="member.name"/>
        </div>
    </t>

    <t t-name="mail.MessageSeenIndicatorDialog">
        <Dialog size="'sm'" title.translate="Seen by:" footer="false" withBodyPadding="false" contentClass="'o-mail-MessageSeenIndicatorDialog'">
            <ul class="list-group list-group-flush list-unstyled py-1" t-ref="content" tabindex="0">
                <li class="list-group-item py-2" t-foreach="props.message.channelMemberHaveSeen" t-as="member" t-key="member.id">
                    <t t-call="mail.MessageSeenIndicatorPopover.card"/>
                </li>
            </ul>
        </Dialog>
    </t>

</templates>
