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

    <t t-name="mail.AttachmentList">
        <div class="o-mail-AttachmentList overflow-y-auto d-flex flex-column mt-1"
            t-att-class="{
                'o-inComposer': env.inComposer,
                'o-inChatWindow': env.inChatWindow,
                'me-2 pe-4': isInChatWindowAndIsAlignedLeft and !env.inComposer,
                'ms-2 ps-4': isInChatWindowAndIsAlignedRight and !env.inComposer,
            }"
        >
            <div class="d-flex flex-grow-1 flex-wrap mx-1" t-att-class="{
                'justify-content-end': isInChatWindowAndIsAlignedRight and !env.inComposer,
            }" role="menu">
                <div t-foreach="imagesAttachments" t-as="attachment" t-key="attachment.id" t-att-aria-label="attachment.filename"
                    class="o-mail-AttachmentImage d-flex position-relative flex-shrink-0 mw-100 mb-1 me-1"
                    t-att-title="attachment.name"
                    t-att-class="{ 'o-isUploading': attachment.uploading }"
                    tabindex="0"
                    aria-label="View image"
                    role="menuitem"
                    t-att-data-mimetype="attachment.mimetype"
                    t-on-click="() => this.fileViewer.open(attachment, props.attachments)"
                >
                    <img
                        class="img img-fluid my-0 mx-auto o-viewable"
                        t-att-class="{ 'opacity-25': attachment.uploading }"
                        t-att-src="getImageUrl(attachment)"
                        t-att-alt="attachment.name"
                        t-attf-style="max-width: min(100%, {{ imagesWidth }}px); max-height: {{ props.imagesHeight }}px;"
                        t-on-load="onImageLoaded"
                    />
                    <div t-if="attachment.uploading" class="position-absolute top-0 bottom-0 start-0 end-0 d-flex align-items-center justify-content-center" title="Uploading">
                        <i class="fa fa-spin fa-spinner"/>
                    </div>
                    <div class="position-absolute top-0 bottom-0 start-0 end-0 p-2 text-white opacity-0 opacity-100-hover d-flex align-items-end flax-wrap flex-column">
                        <div t-if="showDelete and !ui.isSmall"
                            class="btn btn-sm btn-dark rounded opacity-75 opacity-100-hover"
                            tabindex="0" aria-label="Remove" role="menuitem" t-on-click.stop="() => this.onClickUnlink(attachment)" title="Remove">
                            <i class="fa fa-trash"/>
                        </div>
                        <div t-if="canDownload(attachment) and !ui.isSmall" class="btn btn-sm btn-dark rounded opacity-75 opacity-100-hover mt-auto" t-on-click.stop="() => this.onClickDownload(attachment)" title="Download">
                            <i class="fa fa-download"/>
                        </div>
                    </div>
                </div>
            </div>
            <div class="d-flex flex-grow-1 flex-wrap mt-1 mx-1" t-att-class="{
                'justify-content-end': isInChatWindowAndIsAlignedRight and !env.inComposer,
            }">
                <!-- t-attf-class overridden in extensions -->
                <div t-foreach="nonImagesAttachments" t-as="attachment" t-key="attachment.id"
                    class="o-mail-AttachmentCard d-flex rounded mb-1 me-1 mw-100 overflow-auto"
                    t-att-class="{
                        'ms-1': isInChatWindowAndIsAlignedRight,
                        'me-1': !isInChatWindowAndIsAlignedRight,
                        'o-viewable': attachment.isViewable,
                        'o-isUploading': attachment.uploading,
                    }"
                    t-attf-class="bg-300"
                    t-att-title="attachment.name ? attachment.name : undefined" role="menu" t-att-aria-label="attachment.name"
                    t-on-click="() => this.fileViewer.open(attachment, props.attachments)"
                >
                    <!-- o_image from mimetype.scss -->
                    <t t-ref="nonImageMain">
                        <div class="o-mail-AttachmentCard-image o_image flex-shrink-0 m-1" role="menuitem" aria-label="Preview" t-att-tabindex="-1" t-att-aria-disabled="false" t-att-data-mimetype="attachment.mimetype"/>
                        <div class="overflow-auto d-flex justify-content-center flex-column px-1">
                            <div t-if="attachment.name" class="text-truncate" t-out="props.messageSearch?.highlight(attachment.name) ?? attachment.name"/>
                            <small t-if="attachment.extension" class="text-uppercase" t-esc="attachment.extension"/>
                        </div>
                    </t>
                    <div class="o-mail-AttachmentCard-aside position-relative rounded-end overflow-hidden" t-att-class="{ 'o-hasMultipleActions d-flex flex-column': showDelete and !env.inComposer }">
                        <div t-if="attachment.uploading" class="d-flex justify-content-center align-items-center w-100 h-100" title="Uploading">
                            <i class="fa fa-spin fa-spinner"/>
                        </div>
                        <div t-if="!attachment.uploading and env.inComposer" class="d-flex justify-content-center align-items-center w-100 h-100 text-primary" title="Uploaded">
                            <i class="fa fa-check"/>
                        </div>
                        <button t-if="showDelete"
                            class="o-mail-AttachmentCard-unlink btn top-0 justify-content-center align-items-center d-flex w-100 h-100 rounded-0 border-0"
                            t-attf-class="{{ env.inComposer ? 'o-inComposer position-absolute btn-primary transition-base' : 'bg-300' }}"
                            t-on-click.stop="() => this.onClickUnlink(attachment)" title="Remove"
                        >
                            <i class="fa fa-trash" role="img" aria-label="Remove"/>
                        </button>
                        <!-- t-attf-class overridden in extensions -->
                        <button t-if="canDownload(attachment)" class="btn d-flex justify-content-center align-items-center w-100 h-100 rounded-0"
                            t-attf-class="bg-300"
                            t-on-click.stop="() => this.onClickDownload(attachment)" title="Download"
                        >
                            <i class="fa fa-download" role="img" aria-label="Download"/>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </t>

</templates>
