<?xml version="1.0" encoding="utf-8" ?>
<templates id="template" xml:space="preserve">
    <t t-name="web_editor_media_dialog_dms.DMSFile" owl="1">
        <div
            class="o_existing_attachment_cell o_we_attachment_highlight card col-2 position-relative mb-2 p-2 opacity-trigger-hover cursor-pointer"
            t-att-class="{ o_we_attachment_selected: props.selected }"
            t-on-click="props.selectFile"
        >
            <div
                role="img"
                t-att-aria-label="props.name"
                t-att-title="props.name"
                t-att-data-mimetype="props.mimetype"
                class="o_image d-flex align-items-center justify-content-center"
            />
            <small class="o_file_name d-block text-truncate" t-esc="props.name" />
        </div>
    </t>
    <t t-name="web_editor_media_dialog_dms.DMSSelector" owl="1">
        <div>
            <div class="d-flex gap-2 align-items-center py-4">
                <SearchMedia
                    searchPlaceholder="searchPlaceholder"
                    search.bind="this.search"
                    needle="state.needle"
                />
                <div class="d-flex gap-3 justify-content-start align-items-center">
                    <div
                        class="flex-shrink-0 form-check form-switch align-items-center"
                        t-on-change="handleChangeAllowOpenPublic"
                    >
                        <input
                            class="o_we_open_public form-check-input"
                            type="checkbox"
                            t-att-checked="allowOpenPublic"
                            id="o_we_open_public_switch"
                        />
                        <label class="form-check-label" for="o_we_open_public_switch">
                            Allow open to public users
                        </label>
                    </div>
                </div>
            </div>
            <div t-if="!hasContent" class="o_nocontent_help">
                <p class="o_empty_folder_image">No DMS files found.</p>
            </div>
            <div t-else="" class="d-flex flex-wrap gap-2">
                <t t-foreach="state.dmsFiles" t-as="file" t-key="file.id">
                    <DMSFile
                        name="file.name"
                        mimetype="file.mimetype"
                        id="file.id"
                        selected="this.selectedFileIds.includes(file.id)"
                        selectFile="() => this.onClickFile(file)"
                    />
                </t>
            </div>
            <div
                name="load_more_files"
                class="mt-4 text-center mx-auto o_we_load_more"
                t-ref="load-more-button"
            >
                <button
                    t-if="canLoadMore"
                    class="btn btn-odoo o_load_more"
                    type="button"
                    t-on-click="loadMore"
                >Load more...</button>
                <div t-if="hasContent and !canLoadMore" class="mt-4 o_load_done_msg">
                    <span><i>All DMS files have been loaded</i></span>
                </div>
            </div>
        </div>
    </t>
</templates>
