<?xml version="1.0"?>
<t t-name="website.s_blockquote_options">
    <div t-if="not disable_blockquote_width" t-att-data-selector="selector" t-att-data-target="target" t-att-data-exclude="exclude">
        <we-select string="Width">
            <we-button data-select-class="w-25">25%</we-button>
            <we-button data-select-class="w-50">50%</we-button>
            <we-button data-select-class="w-75">75%</we-button>
            <we-button data-select-class="w-100" data-name="so_width_100">100%</we-button>
        </we-select>
        <we-button-group string="Alignment" class="o_we_sublevel_1" data-dependencies="!so_width_100">
            <we-button class="fa fa-fw fa-align-left" title="Left" data-select-class="me-auto"/>
            <we-button class="fa fa-fw fa-align-center" title="Center" data-select-class="mx-auto"/>
            <we-button class="fa fa-fw fa-align-right" title="Right" data-select-class="ms-auto"/>
        </we-button-group>
    </div>

    <!-- Color and images -->
    <t t-call="website.snippet_options_background_options">
        <t t-set="selector" t-value="selector"/>
        <t t-set="exclude" t-value="exclude"/>
        <t t-set="target" t-value="target"/>
        <t t-set="with_colors" t-value="True"/>
        <t t-set="with_images" t-value="True"/>
        <t t-set="with_shapes" t-value="True"/>
        <t t-set="with_gradients" t-value="True"/>
        <t t-set="with_color_combinations" t-value="True"/>
    </t>

    <!-- Layout -->
    <div t-att-data-selector="selector" t-att-data-target="target" t-att-data-exclude="exclude">
        <we-range string="Edge Spacing" data-select-class="p-1|p-2|p-3|p-4|p-5"/>
        <we-select string="Decoration">
            <we-button data-select-class="s_blockquote_default">None</we-button>
            <we-button data-select-class="s_blockquote_with_line" data-name="blockquote_with_line_opt">Left line</we-button>
            <we-button data-select-class="s_blockquote_with_icon">Icon</we-button>
        </we-select>
        <we-row string="Style" class="o_we_sublevel_1">
            <we-input data-apply-to=".s_blockquote_line_elt" data-css-property="width" data-select-style="" data-unit="px" data-dependencies="blockquote_with_line_opt"/>
            <we-colorpicker title="Color" data-apply-to=".s_blockquote_line_elt" data-name="bg_color_opt" data-select-style="" data-css-property="background-color" data-color-prefix="bg-" t-att-data-with-gradients="True" data-dependencies="blockquote_with_line_opt"/>
        </we-row>
        <we-checkbox string="Author" data-name="toggle_blockquote_author_opt" data-select-class="d-flex" data-apply-to=".s_blockquote_infos"/>
        <we-select string="Alignment" class="o_we_sublevel_1" data-dependencies="toggle_blockquote_author_opt" data-apply-to=".s_blockquote_infos">
            <we-button data-select-class="flex-row align-items-start justify-content-start text-start">Left</we-button>
            <we-button data-select-class="flex-column align-items-center text-center">Center</we-button>
            <we-button data-select-class="flex-row-reverse align-items-start justify-content-start text-end">Right</we-button>
        </we-select>
        <we-range string="Content spacing" data-select-class="gap-1|gap-2|gap-3|gap-4|gap-5"/>
    </div>

    <!-- Border and Shadow -->
    <div data-js="Box" t-att-data-selector="selector" t-att-data-target="target" t-att-data-exclude="exclude">
        <t t-call="website.snippet_options_border_widgets"/>
        <t t-call="website.snippet_options_shadow_widgets"/>
    </div>
</t>

