<?xml version="1.0" encoding="UTF-8"?>
<templates xml:space="preserve">
    <t t-name="mail.MessageCardList">
        <div class="o-mail-MessageCardList d-flex flex-column" t-att-class="{ 'justify-content-center flex-grow-1': props.messages.length === 0 }" t-ref="message-list">
            <div class="card mb-2 rounded-3 border-dark shadow-sm" t-foreach="props.messages" t-as="message" t-key="message.id">
                <div class="card-body ps-0 py-2 rounded-3">
                    <div class="position-absolute top-0 end-0 z-1 mx-2 my-1 d-flex align-items-center">
                        <a role="button" class="o-mail-MessageCard-jump rounded bg-400 badge opacity-0" t-att-class="{ 'opacity-100 py-1 px-2': ui.isSmall }" t-on-click="() => this.onClickJump(message)">Jump</a>
                        <button t-if="props.mode === 'pin' and store.self_user" class="btn btn-link text-reset ms-2 p-0 opacity-25 opacity-100-hover" t-att-class="{ 'fs-5': ui.isSmall }" title="Unpin" t-on-click="() => this.onClickUnpin(message)">
                            <i class="oi oi-close"/>
                        </button>
                    </div>
                    <Message hasActions="false" message="message" thread="props.thread" messageSearch="props.messageSearch"/>
                </div>
            </div>
            <span t-if="props.loadMore" class="mb-1" t-ref="load-more"/>
            <p t-if="props.showEmpty !== undefined ? props.showEmpty : props.messages.length === 0" t-esc="emptyText" class="text-center fst-italic text-500 fs-6"/>
        </div>
    </t>

</templates>
