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

    <t t-name="discuss.ChannelMemberList">
        <ActionPanel title="title">
            <button t-on-click="() => props.openChannelInvitePanel({ keepPrevious: env.inChatWindow })" class="btn btn-secondary m-3 mt-0">Invite a User</button>
            <t t-if="onlineMembers.length > 0">
                <h6 class="mx-3 text-700">
                    Online -
                    <t t-esc="onlineMembers.length"/>
                </h6>
                <t t-foreach="onlineMembers" t-as="member" t-key="member.id" t-call="discuss.channel_member"/>
            </t>
            <t t-if="offlineMembers.length > 0">
                <h6 class="mx-3 text-700">
                    Offline -
                    <t t-esc="offlineMembers.length"/>
                </h6>
                <t t-foreach="offlineMembers" t-as="member" t-key="member.id" t-call="discuss.channel_member"/>
            </t>
            <span t-if="props.thread.unknownMembersCount === 1" class="mx-2 mt-2">And 1 other member.</span>
            <span t-if="props.thread.unknownMembersCount > 1" class="mx-2 mt-2">And <t t-esc="props.thread.unknownMembersCount"/> other members.</span>
            <div t-if="!props.thread.areAllMembersLoaded" class="mx-2 my-1">
                <button class="btn btn-secondary" title="Load more" t-on-click.stop="() => threadService.fetchChannelMembers(props.thread)">Load more</button>
            </div>
        </ActionPanel>
    </t>

    <t t-name="discuss.channel_member">
        <div class="o-discuss-ChannelMember d-flex align-items-center p-2 bg-view" t-att-class="{ 'cursor-pointer': canOpenChatWith(member) }" t-on-click.stop="() => this.openChatAvatar(member)">
            <div class="bg-inherit o-discuss-ChannelMember-avatar position-relative d-flex ms-4 flex-shrink-0">
                <img class="w-100 h-100 rounded o_object_fit_cover"
                     t-att-src="threadService.avatarUrl(member.persona, props.thread)"/>
                <ImStatus persona="member.persona" className="'position-absolute top-100 start-100 translate-middle mt-n1 ms-n1'"/>
            </div>
            <span t-ref="displayName" class="ms-2 text-truncate" t-esc="channelMemberService.getName(member)"/>
            <span class="ms-auto">
                <span t-if="member.in(props.thread.invitedMembers)" class="p-1 fa fa-user-plus"/>
                <span t-if="member.rtcSession?.isSelfMuted and !member.rtcSession?.isDeaf" class="p-1 fa fa-microphone-slash"/>
                <span t-elif="member.rtcSession?.isDeaf" class="p-1 fa fa-deaf"/>
                <span t-if="member.rtcSession?.raisingHand" class="p-1 fa fa-hand-paper-o"/>
            </span>

        </div>
    </t>

</templates>
