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

<t t-name="html_builder.ShadowOption">
    <BuilderRow label.translate="Shadow">
        <BuilderSelect action="props.setShadowClassAction">
            <BuilderSelectItem actionParam="''">None</BuilderSelectItem>
            <BuilderSelectItem actionParam="'shadow'">
                <t t-set="onClick" t-value="getOnClick('shadow')"/>
                <t t-call="html_builder.ShadowOptionItem">Normal</t>
            </BuilderSelectItem>
            <BuilderSelectItem actionParam="'shadow-sm'">
                <t t-set="onClick" t-value="getOnClick('shadow-sm')"/>
                <t t-call="html_builder.ShadowOptionItem">Small</t>
            </BuilderSelectItem>
            <BuilderSelectItem actionParam="'shadow-lg'">
                <t t-set="onClick" t-value="getOnClick('shadow-lg')"/>
                <t t-call="html_builder.ShadowOptionItem">Large</t>
            </BuilderSelectItem>
            <BuilderSelectItem id="'custom_shadow'" actionParam="'o-shadow-custom'">Custom</BuilderSelectItem>
        </BuilderSelect>
    </BuilderRow>
    <t t-if="this.isActiveItem('custom_shadow')">
        <BuilderRow label.translate="Outset/Inset" level="1">
            <BuilderButtonGroup action="props.setShadowModeAction">
                <BuilderButton actionValue="'outset'" title.translate="Outset" iconImg="'/html_builder/static/img/options/shadow_out.svg'"/>
                <BuilderButton actionValue="'inset'" title.translate="Inset" iconImg="'/html_builder/static/img/options/shadow_in.svg'"/>
            </BuilderButtonGroup>
        </BuilderRow>
        <BuilderContext action="props.setShadowStyleAction">
            <BuilderRow label.translate="Color" level="1">
                <BuilderColorPicker actionParam="'color'" enabledTabs="['solid', 'custom']"/>
            </BuilderRow>

            <BuilderRow label.translate="Offset" tooltip.translate="Horizontal and Vertical offset" level="1">
                <BuilderNumberInput actionParam="'offsetX'" unit="'px'" prefixIcon="'oi oi-arrows-h'"/>
                <BuilderNumberInput actionParam="'offsetY'" unit="'px'" prefixIcon="'oi oi-arrows-v'"/>
            </BuilderRow>

            <BuilderRow label.translate="Blur" level="1">
                <BuilderNumberInput actionParam="'blur'" unit="'px'"/>
            </BuilderRow>

            <BuilderRow label.translate="Spread" level="1">
                <BuilderNumberInput actionParam="'spread'" unit="'px'"/>
            </BuilderRow>
        </BuilderContext>
    </t>
</t>

<t t-name="html_builder.ShadowOptionItem">
    <div class="d-flex">
        <div class="o-hb-shadow-text">
            <t t-out="0"/>
        </div>
        <a class="fa fa-pencil btn o-hb-shadow-button"
                title="Edit"
                t-on-click="onClick"/>
    </div>
</t>

</templates>
