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

    <t t-name="mail.LinkPreview">
        <t t-if="props.linkPreview.isCard">
            <t t-call="mail.LinkPreviewCard"/>
        </t>
        <t t-if="props.linkPreview.isVideo">
            <t t-call="mail.LinkPreviewVideo"/>
        </t>
        <t t-if="props.linkPreview.isImage">
            <t t-call="mail.LinkPreviewImage"/>
        </t>
    </t>

    <t t-name="mail.LinkPreviewCard">
        <div class="o-mail-LinkPreviewCard card position-relative w-100 mb-2 rounded bg-view shadow-sm overflow-hidden" t-att-class="{ 'me-2': env.inChatter }" t-attf-class="{{ className }}">
            <div class="row g-0 flex-row-reverse h-100">
                <div class="col min-w-0" t-att-class="{ 'd-flex align-items-center': !props.linkPreview.og_description }">
                    <div class="px-3 py-2">
                        <h6 class="card-title mb-0 me-2" t-attf-class="{{ props.linkPreview.og_description ? 'text-truncate' : 'overflow-hidden' }}">
                            <a t-att-href="props.linkPreview.source_url" target="_blank" t-out="props.linkPreview.og_title"/>
                        </h6>
                        <span t-if="props.linkPreview.og_site_name" t-out="props.linkPreview.og_site_name"/>
                        <p t-if="props.linkPreview.og_description" class="o-mail-LinkPreviewCard-description card-text mb-0 mt-2 text-muted small overflow-hidden" t-out="props.linkPreview.og_description"/>
                    </div>
                </div>
                <div class="o-mail-LinkPreviewCard-imageLinkWrap col-4 d-block">
                    <a t-att-href="props.linkPreview.source_url" target="_blank">
                        <img t-if="props.linkPreview.og_image" class="w-100 h-100 object-fit-cover" t-att-src="props.linkPreview.og_image" t-att-alt="props.linkPreview.og_title" t-on-load="onImageLoaded"/>
                        <span t-else="" class="d-flex align-items-center justify-content-center w-100 h-100 bg-100 text-300">
                            <i class="fa fa-camera fa-2x"/>
                        </span>
                    </a>
                </div>
            </div>
            <t t-if="props.delete" t-call="mail.LinkPreview.aside">
                <t t-set="className" t-value="'fa fa-stack p-0 opacity-75 opacity-100-hover'"/>
            </t>
        </div>
    </t>

    <t t-name="mail.LinkPreviewImage">
        <div class="o-mail-LinkPreviewImage position-relative mb-2 rounded" t-att-class="{ 'me-2': env.inChatter }" t-attf-class="{{ className }}">
            <a t-if="props.linkPreview.imageUrl" t-att-href="props.linkPreview.imageUrl" target="_blank">
                <Gif t-if="props.linkPreview.isGif" paused="props.gifPaused" class="'h-auto w-auto rounded'" src="props.linkPreview.imageUrl" onLoad.bind="onImageLoaded"/>
                <img t-else="" class="h-auto w-auto rounded" t-att-src="props.linkPreview.imageUrl" t-on-load="onImageLoaded"/>
            </a>
            <t t-if="props.delete" t-call="mail.LinkPreview.aside">
                <t t-set="className" t-value="'btn btn-sm btn-dark mt-2 me-2 rounded opacity-75 opacity-100-hover'"/>
            </t>
        </div>
    </t>

    <t t-name="mail.LinkPreviewVideo">
        <div class="o-mail-LinkPreviewVideo card position-relative w-100 mb-2 rounded bg-view shadow-sm overflow-hidden" t-att-data-provider="props.linkPreview.videoProvider" t-att-class="{ 'me-2': env.inChatter, 'o-mail-LinkPreviewVideo-embed': props.linkPreview.videoURL, 'o-mail-LinkPreviewVideo-started': state.startVideo }" t-attf-class="{{ className }}">
            <div class="row g-0 flex-row-reverse">
                <div class="col min-w-0" t-att-class="{ 'd-flex align-items-center': !props.linkPreview.og_description }">
                    <div class="d-flex flex-column gap-1 px-3 py-1 bg-view">
                        <p t-if="props.linkPreview.og_site_name" class="mb-0 card-text text-muted smaller overflow-hidden" t-out="props.linkPreview.og_site_name"></p>
                        <h6 class="o-mail-LinkPreviewVideo-title card-title mb-0 me-2" t-attf-class="{{ props.linkPreview.og_description ? 'text-truncate' : 'o-mail-LinkPreviewVideo-hasDescription overflow-hidden' }}">
                            <a t-att-href="props.linkPreview.source_url" target="_blank" t-esc="props.linkPreview.og_title"/>
                        </h6>
                        <p t-if="props.linkPreview.og_description" class="o-mail-LinkPreviewVideo-description o-mail-LinkPreviewVideo-hasDescription card-text mb-0 text-muted small overflow-hidden" t-out="props.linkPreview.og_description"></p>
                    </div>
                </div>
                <div t-if="!props.linkPreview.videoURL" class="col-4 d-block">
                    <a t-att-href="props.linkPreview.source_url" target="_blank"><t t-call="mail.LinkPreviewVideo.preview"/></a>
                </div>
            </div>
            <div t-if="props.linkPreview.videoURL" class="o-mail-LinkPreviewVideo-container mx-3 mb-2">
                <div t-if="!state.videoLoaded" class="o-mail-LinkPreviewVideo-videoWrap h-100 w-100" t-on-click="() => state.startVideo = true"><t t-call="mail.LinkPreviewVideo.preview"/></div>
                <iframe t-if="state.startVideo" t-att-src="props.linkPreview.videoURL" class="h-100 w-100 rounded" t-att-class="{'d-none': !state.videoLoaded}" allow="autoplay" frameborder="0" allowFullScreen="true" t-ref="video"/>
            </div>
            <t t-if="props.delete" t-call="mail.LinkPreview.aside">
                <t t-set="className" t-value="'fa fa-stack p-0 opacity-75 opacity-100-hover'"/>
            </t>
        </div>
    </t>

    <t t-name="mail.LinkPreview.aside">
        <div t-if="props.message?.allowsEdition" class="position-absolute top-0 end-0 small">
            <button t-attf-class="{{ className }}" class="o-mail-LinkPreview-aside btn" aria-label="Remove" t-on-click="onClick">
                <i class="fa fa-times"/>
            </button>
        </div>
    </t>

    <t t-name="mail.LinkPreviewVideo.preview">
        <div class="o-mail-LinkPreviewVideo-overlay position-relative h-100 rounded-bottom" t-att-class="{'bg-dark': !props.linkPreview.og_image}">
            <img t-if="props.linkPreview.og_image" class="img-fluid h-100 w-100 object-fit-cover rounded" t-att-src="props.linkPreview.og_image" t-att-alt="props.linkPreview.og_title" t-on-load="onImageLoaded"/>
            <i t-elif="props.linkPreview.videoURL" class="fa fa-television fa-8x position-absolute top-50 start-50 translate-middle"/>
            <span t-else="" class="d-flex align-items-center justify-content-center w-100 h-100 bg-100 text-300">
                <i class="fa fa-camera fa-2x"/>
            </span>
            <div class="position-absolute top-50 start-50 translate-middle">
                <div t-if="!state.startVideo" class="o-mail-LinkPreviewVideo-play btn btn-lg rounded transition-base">
                    <i class="fa fa-play"/>
                </div>
                <div t-elif="!props.linkPreview.og_image" class="spinner-border text-muted"/>
            </div>
        </div>
    </t>
</templates>
