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

<t t-name="mail.ChatWindow">
    <t t-set="partitionedActions" t-value="threadActions.partition"/>
    <div class="o-mail-ChatWindow fixed-bottom overflow-hidden d-flex flex-column shadow-sm bg-100"
        t-att-style="style"
        t-att-class="{
            'w-100 h-100 o-mobile': ui.isSmall,
            'rounded-top-3 border border-bottom-0 border-dark': !ui.isSmall,
            'o-large': store.chatHub.isBig,
        }"
        t-on-keydown="onKeydown"
        tabindex="1"
    >
        <div class="o-mail-ChatWindow-header d-flex align-items-center flex-shrink-0 bg-100 z-1" t-on-click="onClickHeader" t-att-class="{ 'cursor-pointer': !ui.isSmall and thread and !state.actionsDisabled, 'pt-2': !thread }">
            <t t-if="partitionedActions.group.length > 0 or partitionedActions.other.length > 0 or (ui.isSmall and partitionedActions.quick.length > 2) or (!ui.isSmall and partitionedActions.quick.length > 3)">
                <div class="d-flex text-truncate">
                    <Dropdown position="'left-start'" onStateChanged="isOpen => this.onActionsMenuStateChanged(isOpen)" menuClass="'d-flex flex-column py-0'">
                        <button
                            class="o-mail-ChatWindow-command o-actionsMenu btn rounded-0 d-flex align-items-center px-1 py-1 m-0 w-100 rounded-end-0"
                            t-att-class="{ 'ps-2 pe-1 rounded-top-3': !ui.isSmall, 'o-active': state.actionsMenuOpened, 'o-hover': actionsMenuButtonHover.isHover and !parentChannelHover.isHover }"
                            t-att-disabled="state.editingName or state.actionsDisabled"
                            t-att-title="actionsMenuTitleText"
                            t-ref="actionsMenuButton"
                        >
                            <t t-call="mail.ChatWindow.headerContent"/>
                            <i t-if="!state.editingName" class="fa fa-fw fa-caret-down"/>
                        </button>
                        <t t-set-slot="content">
                            <t t-set="quickActionsInDropdown" t-value="partitionedActions.quick.slice(ui.isSmall ? 2 : 3)"/>
                            <t t-if="quickActionsInDropdown.length > 0">
                                <t t-set="groupBefore" t-value="true"/>
                                <t t-foreach="quickActionsInDropdown" t-as="action" t-key="action.id">
                                    <t t-call="mail.ChatWindow.dropdownAction">
                                        <t t-set="action" t-value="action"/>
                                    </t>
                                </t>
                            </t>
                            <t t-else="" t-set="groupBefore" t-value="false"/>
                            <t t-if="partitionedActions.group.length > 0">
                                <hr t-if="groupBefore" class="mx-2 my-1"/>
                                <t t-set="groupBefore" t-value="true"/>
                                <t t-foreach="partitionedActions.group" t-as="group" t-key="group_index">
                                    <t t-foreach="group" t-as="action" t-key="action.id">
                                        <t t-call="mail.ChatWindow.dropdownAction">
                                            <t t-set="action" t-value="action"/>
                                        </t>
                                    </t>
                                    <hr t-if="!group_last" class="mx-2 my-1"/>
                                </t>
                            </t>
                            <t t-else="" t-set="groupBefore" t-value="false"/>
                            <t t-if="partitionedActions.other.length">
                                <hr t-if="groupBefore" class="mx-2 my-1"/>
                                <t t-foreach="partitionedActions.other" t-as="action" t-key="action.id">
                                    <t t-call="mail.ChatWindow.dropdownAction">
                                        <t t-set="action" t-value="action"/>
                                    </t>
                                </t>
                            </t>
                        </t>
                    </Dropdown>
                </div>
                <AutoresizeInput
                    t-if="state.editingName"
                    className="'text-truncate fw-bold flex-shrink-1 me-1 py-0 ' + (ui.isSmall ? 'fs-4' : '')"
                    enabled="true"
                    autofocus="true"
                    onValidate.bind="renameThread"
                    value="props.chatWindow.displayName"
                />
                <i t-if="state.editingName" class="fa fa-fw fa-caret-down opacity-50"/>
            </t>
            <t t-else="">
                <t t-call="mail.ChatWindow.headerContent"/>
            </t>
            <div class="flex-grow-1"/>
            <div t-if="thread and thread.importantCounter > 0" class="o-mail-ChatWindow-counter mx-1 my-0 badge rounded-pill fw-bold o-discuss-badge" t-ref="needactionCounter">
                <t t-out="thread.importantCounter"/>
            </div>
            <t t-foreach="partitionedActions.quick.slice(0, ui.isSmall ? 2 : 3).reverse()" t-as="action" t-key="action.id" t-call="mail.ChatWindow.quickAction">
                <t t-if="action_last" t-set="itemClass" t-value="ui.isSmall ? 'mx-2' : 'me-1'"/>
            </t>
            <t t-if="this.store.inPublicPage and this.store.self.type === 'guest'">
                <button class="btn ps-1" t-if="!state.editingGuestName">
                    <img class="o-mail-Discuss-selfAvatar rounded-circle o_object_fit_cover flex-shrink-0" alt="Avatar" t-att-src="store.self.avatarUrl" t-on-click="() => state.editingGuestName = true"/>
                </button>
                <AutoresizeInput
                    t-if="state.editingGuestName"
                    className="'py-1 me-2'"
                    autofocus="true"
                    onValidate.bind="renameGuest"
                    value="store.self.name"
                />
            </t>
        </div>
        <div t-if="!props.chatWindow.folded or ui.isSmall" class="d-flex flex-column h-100 overflow-auto position-relative bg-inherit" t-att-class="{ 'opacity-50': state.editingName }" t-ref="content">
            <t t-if="thread" name="thread content">
                <div t-if="threadActions.activeAction?.componentCondition" class="h-100" t-attf-class="{{ threadActions.activeAction.panelOuterClass }}">
                    <t t-component="threadActions.activeAction.component" t-props="{ ...threadActions.activeAction.componentProps, thread }"/>
                </div>
                <t t-else="">
                    <Thread isInChatWindow="true" thread="thread" t-key="thread.localId" jumpPresent="state.jumpThreadPresent" messageEdition="messageEdition" messageToReplyTo="messageToReplyTo"/>
                    <div t-if="thread and thread.hasOtherMembersTyping" class="d-flex bg-view position-relative">
                        <div class="o-mail-ChatWindow-typing d-flex px-2 position-absolute bottom-0 start-0 w-100 bg-view align-items-center">
                            <Typing channel="thread" size="'medium'"/>
                        </div>
                    </div>
                    <Composer composer="thread.composer" autofocus="props.chatWindow.autofocus" mode="'compact'" messageEdition="messageEdition" messageToReplyTo="messageToReplyTo" onPostCallback.bind="() => this.state.jumpThreadPresent++" dropzoneRef="contentRef" type="composerType"/>
                </t>
            </t>
        </div>
    </div>
</t>

<t t-name="mail.ChatWindow.quickAction">
    <button class="o-mail-ChatWindow-command btn d-flex p-2 opacity-75 opacity-100-hover" t-att-class="ui.isSmall ? 'border' : ''" t-attf-class="{{ itemClass }}" t-att-title="action.name" t-att-disabled="state.actionsDisabled" t-on-click.stop="() => action.onSelect()"><i t-att-class="ui.isSmall ? 'fa-lg' : ''" t-attf-class="{{ action.icon }}"/></button>
</t>

<t t-name="mail.ChatWindow.dropdownAction">
    <DropdownItem class="'o-mail-ChatWindow-command btn rounded-0 d-flex align-items-center px-2 py-2 m-0'" onSelected="() => action.onSelect()">
        <i t-att-class="action.icon"/>
        <span class="mx-2" t-out="action.name"/>
    </DropdownItem>
</t>

<t t-name="mail.ChatWindow.headerContent">
    <div class="o-mail-ChatWindow-threadAvatar my-0 me-1 py-1" t-att-class="{
        'py-2': thread and threadActions.actions.length lte 3,
        'ms-1': thread,
        'ms-3': !thread,
    }">
        <img t-if="thread" class="rounded o_object_fit_cover" t-att-src="thread.parent_channel_id?.avatarUrl ?? thread.avatarUrl" alt="Thread Image"/>
        <i t-else="" class="fa fa-pencil fa-lg fa-fw py-1"/>
        <t t-if="thread?.parent_channel_id">
            <span class="fw-bolder small ms-1 p-1 opacity-75 opacity-100-hover cursor-pointer o-hover-text-underline rounded" t-esc="thread.parent_channel_id.displayName" title="Open Channel" t-ref="parentChannel" t-on-click.stop="() => this.thread.parent_channel_id.open()"/>
            <i class="fa fa-chevron-right o-xsmaller ms-1 text-muted"/>
        </t>
    </div>
    <ThreadIcon t-if="thread and thread.channel_type === 'chat' and thread.correspondent" thread="thread"/>
    <CountryFlag t-if="thread?.showCorrespondentCountry" country="thread.correspondentCountry" class="'o-mail-ChatWindow-country border'"/>
    <div t-if="!state.editingName" class="text-truncate fw-bolder border border-transparent mx-1 my-0 py-1" t-att-title="props.chatWindow.displayName" t-esc="props.chatWindow.displayName" t-att-class="{ 'fs-4': ui.isSmall }"/>
</t>
</templates>
