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

<t t-name="website.ThemeTab">
    <div class="o_theme_tab h-100" role="tabpanel" aria-labelledby="theme-tab">
        <div t-ref="content" class="d-flex flex-column h-100">
            <t t-foreach="optionsContainers" t-as="optionsContainer" t-key="optionsContainer.id">
                <!-- TODO Define a more basic kind of options container -->
                <OptionsContainer
                    snippetModel="optionsContainer.snippetModel"
                    editingElement="optionsContainer.element"
                    options="optionsContainer.options"
                    containerTitle="optionsContainer.containerTitle"
                    headerMiddleButtons="optionsContainer.headerMiddleButtons"
                    isRemovable="optionsContainer.isRemovable"
                    isClonable="optionsContainer.isClonable"
                    containerTopButtons="optionsContainer.optionsContainerTopButtons"/>
            </t>
        </div>
    </div>
</t>
<t t-name="website.ThemeWebsiteSettingsOption">
    <BuilderContext preview="false">
        <BuilderRow label.translate="Theme">
            <BuilderButton action="'switchTheme'" type="'global'">Switch Theme</BuilderButton>
        </BuilderRow>
        <BuilderRow label.translate="Language">
            <BuilderButton action="'addLanguage'">Add a Language</BuilderButton>
        </BuilderRow>
        <BuilderRow label.translate="Page Layout">
            <BuilderSelect action="'customizeWebsiteVariable'" actionParam="'layout'">
                <BuilderSelectItem actionValue="'full'" id="'layout_full_opt'" label.translate="Full">
                    <Image attrs="{ style: 'margin-top: 10px !important;' }"
                         src="'/website/static/src/img/snippets_options/page_layout_full.svg'"/>
                    <span>Full</span>
                </BuilderSelectItem>
                <BuilderSelectItem actionValue="'boxed'" label.translate="Boxed">
                    <Image attrs="{ style: 'margin-top: 10px !important;' }"
                         src="'/website/static/src/img/snippets_options/page_layout_boxed.svg'"/>
                    <span>Boxed</span>
                </BuilderSelectItem>
                <BuilderSelectItem actionValue="'framed'" label.translate="Framed">
                    <Image attrs="{ style: 'margin-top: 10px !important;' }"
                         src="'/website/static/src/img/snippets_options/page_layout_framed.svg'"/>
                    <span>Framed</span>
                </BuilderSelectItem>
                <BuilderSelectItem actionValue="'postcard'" label.translate="Postcard">
                    <Image attrs="{ style: 'margin-top: 10px !important;' }"
                         src="'/website/static/src/img/snippets_options/page_layout_postcard.svg'"/>
                    <span>Postcard</span>
                </BuilderSelectItem>
            </BuilderSelect>
            <BuilderButton
                action="'toggleBodyBgImage'"
                id="'body_bg_image_opt'"
                title.translate="Image"
                preview="false"
                className="'ms-auto fa fa-fw fa-camera px-2'"
            />
        </BuilderRow>
        <BuilderRow label.translate="Background" level="1" t-if="!this.isActiveItem('layout_full_opt')">
            <BuilderColorPicker enabledTabs="['solid', 'custom']"
                action="'customizeWebsiteColor'"
                actionParam="'body'"/>
        </BuilderRow>
        <BuilderRow label.translate="Image" level="1" t-if="this.isActiveItem('body_bg_image_opt')">
            <BuilderButton action="'replaceBodyBgImage'" title.translate="Replace Image" preview="false" type="'global'">
                Replace
            </BuilderButton>
            <BuilderButton action="'removeBodyBgImage'" preview="false" icon="'oi-close'" className="'btn-danger-color-hover'"/>
            <ImageSize/>
        </BuilderRow>
        <BuilderRow label.translate="Position" level="1" t-if="this.isActiveItem('body_bg_image_opt')">
            <BuilderSelect action="'customizeWebsiteVariable'" actionParam="'body-image-type'" preview="false">
                <BuilderSelectItem actionValue="'image'">Cover</BuilderSelectItem>
                <BuilderSelectItem actionValue="'pattern'" id="'body_bg_repeat_opt'">Repeat pattern</BuilderSelectItem>
            </BuilderSelect>
            <BuilderButton icon="'fa-crosshairs'" title.translate="Background Position" preview="false" action="'bodyBgPositionOverlay'"/>
        </BuilderRow>
        <BuilderContext t-if="isActiveItem('body_bg_repeat_opt')" action="'customizeWebsiteVariable'">
            <BuilderRow label.translate="Width" level="2">
                <BuilderNumberInput actionParam="'body-image-pattern-width'" placeholder.translate="auto" unit="'px'" min="1" default="null"/>
            </BuilderRow>
            <BuilderRow label.translate="Height" level="2">
                <BuilderNumberInput actionParam="'body-image-pattern-height'" placeholder.translate="auto" unit="'px'" min="1" default="null"/>
            </BuilderRow>
        </BuilderContext>
    </BuilderContext>
</t>

<t t-name="website.ThemeParagraphOption">
    <BuilderContext preview="false">
        <BuilderRow label.translate="Font Size">
            <BuilderNumberInput action="'customizeWebsiteVariable'" actionParam="'font-size-base'" default="null" unit="'px'" saveUnit="'rem'"/>
            <t t-set-slot="collapse">
                <BuilderRow label.translate="Small" level="1">
                    <BuilderNumberInput action="'customizeWebsiteVariable'" actionParam="'small-font-size'" default="null" unit="'px'" saveUnit="'rem'"/>
                </BuilderRow>
            </t>
        </BuilderRow>
        <BuilderRow label.translate="Font Family">
            <BuilderFontFamilyPicker action="'customizeWebsiteVariable'" actionParam="'font'" valueParamName="'actionValue'"/>
        </BuilderRow>
        <BuilderRow label.translate="Line Height">
            <!-- "×": \u00D7\u2000 -->
            <BuilderNumberInput action="'customizeWebsiteVariable'" actionParam="'body-line-height'" default="null" unit="'✕'" saveUnit="''"/>
        </BuilderRow>
        <BuilderRow label.translate="Margins" action="'customizeWebsiteVariable'">
            <BuilderNumberInput title.translate="Top" actionParam="'paragraph-margin-top'" unit="'px'" saveUnit="'px'"/>
            <BuilderNumberInput title.translate="Bottom" actionParam="'paragraph-margin-bottom'" unit="'px'" saveUnit="'px'"/>
        </BuilderRow>
    </BuilderContext>
</t>

<t t-name="website.ThemeLinkOption">
    <BuilderContext preview="false">
        <BuilderRow label.translate="Link Style">
            <BuilderSelect action="'customizeWebsiteVariable'" actionParam="'link-underline'">
                <BuilderSelectItem actionValue="'never'">No Underline</BuilderSelectItem>
                <BuilderSelectItem actionValue="'hover'">Underline On Hover</BuilderSelectItem>
                <BuilderSelectItem actionValue="'always'">Always Underline</BuilderSelectItem>
            </BuilderSelect>
        </BuilderRow>
    </BuilderContext>
</t>

<t t-name="website.ThemeInputOption">
    <BuilderContext preview="false">
        <BuilderRow label.translate="Padding" tooltip.translate="Vertical and Horizontal padding" action="'customizeWebsiteVariable'">
            <BuilderNumberInput actionParam="'input-padding-y'" unit="'px'" saveUnit="'rem'" prefixIcon="'oi oi-arrows-v'"/>
            <BuilderNumberInput actionParam="'input-padding-x'" unit="'px'" saveUnit="'rem'" prefixIcon="'oi oi-arrows-h'"/>
            <t t-set-slot="collapse">
                <BuilderRow label.translate="Small" tooltip.translate="Vertical and Horizontal padding" level="1">
                    <BuilderNumberInput actionParam="'input-padding-y-sm'" unit="'px'" saveUnit="'rem'" prefixIcon="'oi oi-arrows-v'"/>
                    <BuilderNumberInput actionParam="'input-padding-x-sm'" unit="'px'" saveUnit="'rem'" prefixIcon="'oi oi-arrows-h'"/>
                </BuilderRow>
                <BuilderRow label.translate="Large" tooltip.translate="Vertical and Horizontal padding" level="1">
                    <BuilderNumberInput actionParam="'input-padding-y-lg'" unit="'px'" saveUnit="'rem'" prefixIcon="'oi oi-arrows-v'"/>
                    <BuilderNumberInput actionParam="'input-padding-x-lg'" unit="'px'" saveUnit="'rem'" prefixIcon="'oi oi-arrows-h'"/>
                </BuilderRow>
            </t>
        </BuilderRow>
        <BuilderRow label.translate="Font Size" action="'customizeWebsiteVariable'">
            <BuilderNumberInput actionParam="'input-font-size'" unit="'px'" saveUnit="'rem'"/>
            <t t-set-slot="collapse">
                <BuilderRow label.translate="Small" level="1">
                    <BuilderNumberInput actionParam="'input-font-size-sm'" unit="'px'" saveUnit="'rem'"/>
                </BuilderRow>
                <BuilderRow label.translate="Large" level="1">
                    <BuilderNumberInput actionParam="'input-font-size-lg'" unit="'px'" saveUnit="'rem'"/>
                </BuilderRow>
            </t>
        </BuilderRow>
        <BuilderRow label.translate="Border Width" action="'customizeWebsiteVariable'">
            <BuilderNumberInput actionParam="'input-border-width'" unit="'px'" saveUnit="'rem'"/>
        </BuilderRow>
        <BuilderRow label.translate="Border Radius" action="'customizeWebsiteVariable'">
            <BuilderNumberInput actionParam="'input-border-radius'" unit="'px'" saveUnit="'rem'"/>
            <t t-set-slot="collapse">
                <BuilderRow label.translate="Small" level="1">
                    <BuilderNumberInput actionParam="'input-border-radius-sm'" unit="'px'" saveUnit="'rem'"/>
                </BuilderRow>
                <BuilderRow label.translate="Large" level="1">
                    <BuilderNumberInput actionParam="'input-border-radius-lg'" unit="'px'" saveUnit="'rem'"/>
                </BuilderRow>
            </t>
        </BuilderRow>
        <BuilderRow label.translate="Background">
            <BuilderColorPicker noTransparency="true"
                enabledTabs="['solid', 'custom']"
                action="'customizeWebsiteColor'"
                actionParam="'input'"
            />
        </BuilderRow>
    </BuilderContext>
</t>

</templates>
