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

<t t-name="html_builder.CustomizeTab">
    <div class="o_customize_tab h-100" role="tabpanel" aria-labelledby="customize-tab">
        <t t-set="currentOptionsContainers" t-value="this.getCurrentOptionsContainers()"/>
        <t t-if="!currentOptionsContainers.length || !this.state.hasContent">
            <div class="text-center pt-5">
                Select a block on your page to style it.
            </div>
        </t>
        <t t-else="">
            <div t-ref="content" class="d-flex flex-column h-100">
                <CustomizeComponent t-if="this.customizeComponent.component"
                    editingElements="this.customizeComponent.editingEls"
                    comp="this.customizeComponent.component"
                    compProps="this.customizeComponent.props"/>
                <t t-else="" t-foreach="currentOptionsContainers" t-as="optionsContainer" t-key="optionsContainer.id">
                    <OptionsContainer
                        snippetModel="props.snippetModel"
                        editingElement="optionsContainer.element"
                        options="optionsContainer.options"
                        containerTitle="optionsContainer.containerTitle"
                        optionTitleComponents="optionsContainer.optionTitleComponents"
                        headerMiddleButtons="optionsContainer.headerMiddleButtons"
                        isRemovable="optionsContainer.isRemovable"
                        removeDisabledReason="optionsContainer.removeDisabledReason"
                        isClonable="optionsContainer.isClonable"
                        cloneDisabledReason="optionsContainer.cloneDisabledReason"
                        containerTopButtons="optionsContainer.optionsContainerTopButtons"/>
                </t>
            </div>
        </t>
    </div>
</t>

</templates>
