<templates id="template">
    <div t-name="mass_mailing.ThemeSelector" class="o_mail_theme_selector">
        <div t-ref="themeSelectorWrapper" class="o_mailing_template_preview_wrapper d-inline-block w-100">
            <div class="o_mail_templates_grid w-100">
                <div t-foreach="simpleThemes.values()" t-as="theme" t-key="theme_index" role="menuitem" class="cursor-pointer dropdown-item px-4"
                    t-on-click="() => this.onSelectTheme(theme)" t-att-data-name="theme.name">
                    <div class="o_thumb small mb-2" t-attf-style="background-image: url(#{theme.imgPath}_small.png)"/>
                    <div class="o_thumb large mb-2" t-attf-style="background-image: url(#{theme.imgPath}_large.png)"/>
                    <h5 class="text-capitalize text-truncate" t-out="theme.title"/>
                </div>
                <div t-foreach="state.favoriteTemplates" t-as="template" t-key="template_index"
                    class="cursor-pointer dropdown-item px-4 o_mail_template_preview d-flex flex-column justify-content-between" role="menuitem"
                    t-on-click="() => this.onSelectFavorite(template.bodyArch)">
                    <!-- Template HTML preview -->
                        <div t-if="template.imagePreviewSrc" class="s_dialog_preview s_dialog_preview_image">
                            <img t-att-src="template.imagePreviewSrc"/>
                        </div>
                        <t t-else="">
                            <div class="d-flex flex-grow-1">
                                <FavoritePreview template="template" styleSheetsPromise="this.props.styleSheetsPromise"/>
                            </div>
                        </t>
                    <div class="d-flex flex-row align-items-center mb-2 w-100">
                        <i class="fa fa-star me-2"/>
                        <h5 class="text-truncate mb-0" t-out="template.subject"/>
                        <div class="lh-1 ms-auto o_mail_template_remove_favorite" 
                            aria-label="Remove from Templates" aria-role="button"
                            t-on-click="(ev) => this.onRemoveFavorite(ev, template_index)" title="Remove from Templates">
                            <i class="fa fa-trash ps-2 me-1" t-att-data-id="template.id"/>
                        </div> 
                    </div>
                </div>
                <div t-foreach="commonThemes.values()" t-as="theme" t-key="theme_index" role="menuitem" class="cursor-pointer dropdown-item px-4"
                    t-on-click="() => this.onSelectTheme(theme)" t-att-data-name="theme.name">
                    <div class="o_thumb small mb-2" t-attf-style="background-image: url(#{theme.imgPath}_small.png)"/>
                    <div class="o_thumb large mb-2" t-attf-style="background-image: url(#{theme.imgPath}_large.png)"/>
                    <h5 class="text-capitalize text-truncate" t-out="theme.title"/>
                </div>
            </div>
        </div>
    </div>
</templates>
