<?xml version="1.0"?>
<t t-name="website.s_card_options">
    <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_color_combinations" t-value="True"/>
        <t t-set="with_gradients" t-value="True"/>
    </t>

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

    <div t-if="not disable_width" data-js="CardWidth" t-att-data-selector="selector" t-att-data-exclude="exclude" t-att-data-target="target">
        <we-range string="Card Width" data-select-style="0" data-css-property="max-width" data-unit="%" data-min="8" data-max="100" data-display-range-value="true" data-display-range-value-unit="%"/>

        <we-button-group string="Alignment" class="o_we_sublevel_1" data-name="card_alignment_opt">
            <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>

    <div data-js="CardImageOptions" t-att-data-selector="selector" t-att-data-exclude="exclude" t-att-data-target="target">
        <we-row string="Cover Image">
            <we-button title="Add" data-add-cover-image="" data-no-preview="true" class="o_we_bg_success" data-name="add_cover_image_opt">Add</we-button>
        </we-row>

        <we-row string="Cover Image">
            <we-button-group data-name="cover_image_position_opt">
                <we-button title="Top" data-name="card_img_top_opt" data-select-class="o_card_img_top" data-select-image-class="card-img-top" data-img="/website/static/src/img/snippets_options/pos_top.svg"/>
                <we-button title="Left" data-select-class="o_card_img_horizontal flex-lg-row" data-select-image-class="rounded-start" data-img="/website/static/src/img/snippets_options/pos_left.svg"/>
                <we-button title="Right" data-select-class="o_card_img_horizontal flex-lg-row-reverse" data-select-image-class="rounded-end" data-img="/website/static/src/img/snippets_options/pos_right.svg"/>
            </we-button-group>
            <we-button title="Remove Cover" data-remove-cover-image="" data-no-preview="true" class="fa fa-trash-o fa-fw o_we_bg_danger" data-name="remove_cover_image_opt"/>
        </we-row>

        <we-select string="Ratio" data-apply-to=".o_card_img_wrapper" class="o_we_sublevel_1">
            <we-button data-select-class="">Image default</we-button>
            <we-button data-select-class="ratio ratio-1x1">Square</we-button>
            <we-button data-select-class="ratio ratio-4x3" data-dependencies="card_img_top_opt">Landscape - 4/3</we-button>
            <we-button data-select-class="ratio ratio-16x9" data-dependencies="card_img_top_opt">Wide - 16/9</we-button>
            <we-button data-select-class="ratio ratio-21x9" data-dependencies="card_img_top_opt">Ultrawide - 21/9</we-button>
            <we-button data-select-class="ratio o_card_img_ratio_custom" data-dependencies="card_img_top_opt" data-name="image_ratio_custom_opt">Custom</we-button>
        </we-select>

        <!-- Calculate bootstrap default column size -->
        <t t-set="colSize" t-value="8.33333333"/>
        <we-range string="Width" class="o_we_sublevel_1" title="Adjust the image width" data-name="cover_image_width_opt" data-dependencies="!card_img_top_opt" data-select-style="0" data-css-property="--card-img-size-h" data-unit="%" t-att-data-min="colSize" t-att-data-max="colSize * 11" t-att-data-step="colSize"/>

        <we-range string="Custom Ratio" class="o_we_sublevel_2" data-name="cover_image_ratio_range_opt" data-dependencies="image_ratio_custom_opt" data-select-style="0" data-css-property="--card-img-aspect-ratio" data-unit="%" data-display-range-value="true" data-display-range-value-unit="%" data-min="8" data-max="132" data-step="4"/>

        <we-range string="Alignment" class="o_we_sublevel_1" data-name="cover_image_alignment_opt" data-select-style="0" data-align-cover-image="" data-css-property="--card-img-ratio-align" data-unit="%" data-min="0" data-max="100"/>
    </div>
</t>

