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


<t t-name="html_builder.SnippetViewer">
    <div t-ref="content"
         class="row g-0 o_snippets_preview_row"
         t-att-class="{ 'flex-row-reverse': props.frontendDirection !== backendDirection }"
         t-att-dir="props.frontendDirection">
        <div class="col-lg-6" t-foreach="this.getSnippetColumns()" t-as="snippetsColumn" t-key="snippetsColumn_index">
            <t t-foreach="snippetsColumn" t-as="snippet" t-key="snippet.id">
                <div t-on-click="() => this.onClick(snippet)"
                     t-on-keydown="(ev) => this.onPreviewKeydown(ev, snippet)"
                     t-att-data-snippet-id="snippet.key"
                     t-att-data-label="snippet.label ? snippet.label : ''"
                     t-attf-class="o_snippet_preview_wrap position-relative #{ snippet.isCustom ? 'mb-0' : '' } #{snippet.moduleId ? 'o_snippet_preview_install' : '' }"
                     t-att-tabindex="snippet.moduleId ? '-1' : '0'"
                     t-att-aria-label="snippet.label || snippet.title">
                    <div inert="inert">
                        <div t-if="snippet.imagePreviewSrc" class="s_dialog_preview s_dialog_preview_image">
                            <img t-att-src="snippet.imagePreviewSrc" loading="eager"/>
                        </div>
                        <t t-else="" t-out="this.getContent(snippet.content)"/>
                    </div>
                    <button t-if="snippet.moduleId" class="o_snippet_preview_install_btn btn text-white rounded-1 mx-auto p-2 bottom-50"
                            t-esc="this.getButtonInstallName(snippet)"/>
                </div>
                <div t-if="snippet.isCustom" class="d-grid mt-2 mx-5 gap-2 d-md-flex justify-content-md-end align-items-md-center o_custom_snippet_edit">
                    <span t-foreach="this.getPrefixIcons(snippet.content)" t-as="icon" t-key="icon.keyClass" t-attf-class="me-2 #{icon.keyClass}" t-att-title="icon.title">
                        <span class="visually-hidden" t-out="icon.title"/>
                        <t t-if="icon.Component" t-component="icon.Component" t-props="icon.props"/>
                        <t t-else="" t-out="icon.content"/>
                    </span>
                    <span class="w-100" t-esc="snippet.title"></span>
                    <button class="o_btn_reset me-md-2" t-on-click="() => this.onClickRename(snippet)">
                        <span class="visually-hidden" t-esc="getRenameBtnLabel(snippet.title)"/>
                        <span class="fa fa-pencil"/>
                    </button>
                    <button class="o_btn_reset" t-on-click="() => this.onClickDelete(snippet)">
                        <span class="visually-hidden" t-esc="getDeleteBtnLabel(snippet.title)"/>
                        <span class="fa fa-trash"/>
                    </button>
                </div>
            </t>
        </div>
    </div>
</t>

</templates>
