<?xml version="1.0" encoding="UTF-8" ?>
<templates id="template" xml:space="preserve">
    <t t-inherit="web_editor.toolbar" t-inherit-mode="extension">
        <xpath expr="//div[@id='chatgpt']" position="after">
            <div
                id="custom_class"
                class="btn-group dropdown"
                t-if="props.custom_class_css and props.custom_class_css.length"
            >
                <button
                    type="button"
                    class="btn dropdown-toggle"
                    data-bs-toggle="dropdown"
                    title="Custom CSS"
                    tabindex="-1"
                    data-bs-original-title="Custom CSS"
                    aria-expanded="false"
                >
                    <span>Custom CSS</span>
                </button>
                <ul class="dropdown-menu">
                    <li t-foreach="props.custom_class_css" t-as="line" t-key="line.id">
                        <a
                            class="dropdown-item css_selector"
                            t-att-id="line.class_name"
                            href="#"
                            data-call="setCustomCss"
                            t-att-data-arg1="line.id"
                        ><span t-att-class="line.class_name" t-out="line.name" /></a>
                    </li>
                </ul>
            </div>
        </xpath>
    </t>
</templates>
