<?xml version="1.0" encoding="utf-8"?>
<templates id="template" xml:space="preserve">
    <t t-name="web_editor.snippet_overlay">
        <div class="oe_overlay">
            <div class="o_handles">
                <div class="o_handle n readonly"/>
                <div class="o_handle e readonly"/>
                <div class="o_handle w readonly"/>
                <div class="o_handle s readonly"/>
            </div>
            <div class="oe_overlay_options" contentEditable="false">
                <div class="btn-group">
                    <a role="button" href="#" class="btn btn-secondary oe_snippet_parent" title="Select Parent Container" aria-label="Select Parent Container"><i class="fa fa-lg fa-level-up"/></a>
                    <div class="dropdown oe_options d-none btn-group">
                        <a role="button" href="#" data-toggle="dropdown" class="btn btn-primary" title="Customize">Customize</a>
                        <div class="dropdown-menu" role="menu"/>
                    </div>
                    <a role="button" href="#" class="btn btn-secondary oe_snippet_move" title="Drag to Move" aria-label="Drag to Move"><i class="fa fa-arrows ml4 mr4"></i></a>
                    <a role="button" href="#" class="btn btn-secondary oe_snippet_clone" title="Duplicate Container" aria-label="Duplicate Container"><i class="fa fa-files-o ml4 mr4"></i></a>
                    <a role="button" href="#" class="btn btn-secondary oe_snippet_remove" title="Remove Block" aria-label="Remove Block"><i class="fa fa-trash-o ml4 mr4"></i></a>
                </div>
            </div>
        </div>
    </t>

    <!-- options -->
    <div t-name="web_editor.snippet.option.colorpicker" class="colorpicker">
        <div class="note-palette-title">Background Color</div>
        <div class="btn-group palette-reset">
            <div class="note-color-reset" data-event="foreColor" data-value="inherit" title="None" role="img" aria-label="No color">
                <i class="fa fa-ban"/>
            </div>
        </div>
        <div class="o_colorpicker_sections px-1 pb8">
            <div class="tab-content o_colorpicker_section_tabs"/>
        </div>
    </div>

    <!-- t-field options -->
    <t t-name="web_editor.many2one.button">
        <div class="btn-group">
            <a role="button" href="#" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" title="Search Contact" aria-label="Search Contact"><i class="fa fa-search"></i></a>
            <div class="dropdown-menu contact_menu" role="menu">
                <a role="menuitem" class="dropdown-item"><input href="#" type="email" placeholder="Search"/></a>
            </div>
        </div>
    </t>

    <t t-name="web_editor.many2one.search">
        <t t-foreach="contacts" t-as="item">
            <li><a role="menuitem" href="#" t-att-data-id="item.id" t-att-data-name="item.display_name"><t t-esc="item.display_name"/> <t t-if="item.city or item.country_id"><small class="text-muted">(<t t-esc="item.city"/> <t t-esc="item.country_id and item.country_id[1]"/>)</small></t></a></li>
        </t>
    </t>
</templates>
