<templates xml:space="preserve">
    <t t-name="html_editor.AlignSelector">
        <Dropdown menuClass="'o-we-toolbar-dropdown'" bottomSheet="false" menuRef="menuRef">
            <button class="btn btn-light" t-att-title="props.title" name="text_align">
                <span class="px-1 d-flex align-items-center">
                    <i t-att-class="`fa fa-align-${state.displayName}`"/>
                </span>
            </button>
            <t t-set-slot="content">
                <div data-prevent-closing-overlay="true">
                    <t t-foreach="items" t-as="item" t-key="item_index">
                        <button
                            t-attf-class="btn btn-light fa fa-align-{{item.mode}}"
                            t-att-class="{ active: item.mode === state.displayName }"
                            t-on-click="() => this.onSelected(item)"
                            t-on-pointerdown.prevent="() => {}"
                        />
                    </t>
                </div>
            </t>
        </Dropdown>
    </t>
</templates>
