<templates id="template" xml:space="preserve">
<t t-name="html_editor.AutoResizeImage">
    <div t-ref="auto-resize-image-container"
         class="o_existing_attachment_cell o_we_image align-items-center justify-content-center me-1 mb-1 opacity-trigger-hover opacity-0"
         t-att-class="{
            o_we_attachment_optimized: props.isOptimized,
            'o_loaded position-relative opacity-100': state.loaded,
            o_we_attachment_selected: props.selected,
            'position-fixed': !state.loaded,
         }">
        <RemoveButton t-if="props.isRemovable" model="props.model" remove="() => this.remove()"/>
        <div class="o_we_media_dialog_img_wrapper" t-att-class="{ 'bg-light': props.unselectable }">
             <t t-set="unselectable_attachment_title">You can not use this image in a field</t>
             <img t-ref="auto-resize-image" class="o_we_attachment_highlight img img-fluid w-100" t-att-class="{ 'opacity-25': props.unselectable}" t-att-src="props.src" t-att-alt="props.altDescription" loading="lazy" t-att-title="props.unselectable ? unselectable_attachment_title : props.title" t-on-load="onImageLoaded"/>
             <a t-if="props.author" class="o_we_media_author position-absolute start-0 bottom-0 end-0 text-truncate text-center text-primary fs-6 bg-white-50" t-att-href="props.authorLink" target="_blank" t-esc="props.author"/>
        </div>
        <button class="o_btn_reset o_button_area"
                t-att-class="{ 'cursor-pointer': !props.unselectable }"
                t-on-click="props.onImageClick"
                t-att-aria-label="props.unselectable ? unselectable_attachment_title : props.title"/>
        <span t-if="props.isOptimized" class="badge position-absolute bottom-0 end-0 m-1 text-bg-success">Optimized</span>
    </div>
</t>

<t t-name="html_editor.ExternalImage">
    <t t-if="record.mediaType == 'libraryMedia'">
        <AutoResizeImage author="record.author"
            src="record.thumbnail_url"
            authorLink="record.author_link"
            title="record.tooltip"
            altDescription="record.tooltip"
            minRowHeight="MIN_ROW_HEIGHT"
            selected="this.selectedMediaIds.includes(record.id)"
            onImageClick="() => this.onClickMedia(record)"
            onLoaded="(imgEl) => this.onImageLoaded(imgEl, record)"/>
    </t>
</t>

<t t-name="html_editor.ImagesListTemplate">
    <div class="o_we_existing_attachments o_we_images d-flex flex-wrap my-0" t-ref="existing-attachments">
        <t t-if="!hasContent and !isFetching">
            <div t-if="state.needle" class="o_nocontent_help">
                <p class="o_empty_folder_image">No images found.</p>
                <p class="o_empty_folder_subtitle">Wow, it feels a bit empty in here. Upload from the button in the top right corner!</p>
            </div>
            <div t-else="" class="o_we_search_prompt">
                <h2>Search the web for royalty-free images</h2>
            </div>
        </t>
        <t t-else="">
            <t t-if="['all', 'database'].includes(state.searchService)">
                <t t-foreach="state.attachments" t-as="attachment" t-key="attachment.id">
                    <AutoResizeImage t-if="!attachment.original_id or state.showOptimized"
                        id="attachment.id"
                        isOptimized="!!attachment.original_id"
                        isRemovable="true"
                        onRemoved="(attachmentId) => this.onRemoved(attachmentId)"
                        selected="this.selectedAttachmentIds.includes(attachment.id)"
                        src="attachment.thumbnail_src or attachment.image_src"
                        name="attachment.name"
                        title="attachment.name"
                        unselectable = "!!attachment.unselectable"
                        altDescription="attachment.altDescription"
                        model="attachment.res_model"
                        minRowHeight="MIN_ROW_HEIGHT"
                        onImageClick="() => this.onClickAttachment(attachment)"
                        onLoaded="(imgEl) => this.onImageLoaded(imgEl, attachment)"/>
                </t>
            </t>
            <t id="o_we_media_library_images" t-if="['all', 'media-library'].includes(state.searchService)">
                <t t-foreach="state.libraryMedia" t-as="record" t-key="record.id">
                    <t t-call="html_editor.ExternalImage"/>
                </t>
            </t>
            <!-- 20 placeholders is just enough for a 5K screen, change this if ImageWidget.MIN_ROW_HEIGHT changes -->
            <t t-foreach="[...Array(20).keys()]" t-as="i" t-key="i">
                <div class="o_we_attachment_placeholder"/>
            </t>
        </t>
    </div>
</t>
</templates>
