<templates xml:space="preserve">
    <t t-name="html_editor.Toolbar">
        <div class="o-we-toolbar d-flex align-items-center m-0" t-att-class="props.class"
            style="overflow-x: auto; overflow-y:hidden" t-on-pointerdown.prevent=""
                t-att-data-namespace="state.namespace" data-prevent-closing-overlay="true">
            <t t-foreach="state.buttonGroups" t-as="buttonGroup" t-key="buttonGroup.id">
                <span class="o-we-toolbar-vertical-separator"></span>
                <div class="btn-group" t-att-name="buttonGroup.id">
                    <t t-foreach="buttonGroup.buttons" t-as="button" t-key="button.id">
                            <t t-if="button.Component">
                                <t t-component="button.Component"
                                    t-props="button.props"
                                    title="button.description"
                                    getSelection.bind="props.getSelection"
                                    isDisabled="'isDisabled' in button.props ? button.props.isDisabled : !!button.isDisabled"/>
                            </t>
                            <button t-else=""
                                class="btn btn-light"
                                t-att-class="{
                                    active: button.isActive,
                                    disabled: button.isDisabled,
                                }"
                                t-att-disabled="button.isDisabled"
                                t-att-title="button.description"
                                t-att-name="button.id"
                                t-on-click="() => this.onButtonClick(button)"
                            >
                                <span t-if="button.icon" t-att-class="button.icon.includes('fa-') ? 'fa fa-fw ' + button.icon : 'oi oi-fw ' + button.icon"/>
                                <span t-if="button.text" t-esc="button.text"/>
                            </button>
                    </t>
                </div>
            </t>
        </div>
    </t>
</templates>
