<?xml version="1.0"?>
<t t-name="website.snippet_options_border_line_widgets">
    <we-row t-att-string="label">
        <we-input data-name="border_width_opt" t-att-data-apply-to="apply_to" data-select-style="0" t-attf-data-css-property="border-#{direction and ('%s-' % direction) or ''}width" data-unit="px" t-att-data-extra-class="with_bs_class and 'border'" t-att-data-variable="width_variable"/>
        <we-select t-attf-data-css-property="border-#{direction and ('%s-' % direction) or ''}style" data-dependencies="border_width_opt" t-att-data-apply-to="apply_to" t-att-data-variable="style_variable">
            <we-button title="Solid" data-select-style="solid"><div class="o_we_fake_img_item o_we_border_preview" style="border-style: solid;"/></we-button>
            <we-button title="Dashed" data-select-style="dashed"><div class="o_we_fake_img_item o_we_border_preview" style="border-style: dashed;"/></we-button>
            <we-button title="Dotted" data-select-style="dotted"><div class="o_we_fake_img_item o_we_border_preview" style="border-style: dotted;"/></we-button>
            <we-button title="Double" data-select-style="double"><div class="o_we_fake_img_item o_we_border_preview" style="border-style: double; border-left: none; border-right: none;"/></we-button>
        </we-select>
        <we-colorpicker data-dependencies="border_width_opt" t-att-data-apply-to="apply_to" data-select-style="true" t-attf-data-css-property="border-#{direction and ('%s-' % direction) or ''}color" data-color-prefix="border-" t-att-data-color="color_variable"/>
    </we-row>
</t>

