<?xml version="1.0"?>
<data inherit_id="website.snippet_options">
    <xpath expr="." position="inside">
        <div data-js="Rating" data-selector=".s_rating">
            <we-select string="Icon">
                <we-button data-set-icons="fa-star"><i class="fa fa-fw fa-star"/> Stars</we-button>
                <we-button data-set-icons="fa-thumbs-up"><i class="fa fa-fw fa-thumbs-up"/> Thumbs</we-button>
                <we-button data-set-icons="fa-circle"><i class="fa fa-fw fa-circle"/> Circles</we-button>
                <we-button data-set-icons="fa-square"><i class="fa fa-fw fa-square"/> Squares</we-button>
                <we-button data-set-icons="fa-heart"><i class="fa fa-fw fa-heart"/> Hearts</we-button>
                <we-button data-set-icons="custom" class="d-none">Custom</we-button>
            </we-select>
            <we-row string="⌙ Active">
                <we-colorpicker data-select-style="" data-apply-to=".s_rating_active_icons" data-css-property="color" data-color-prefix="text-"/>
                <we-button data-custom-icon="true" data-custom-active-icon="true" data-no-preview="true">
                    <i class="fa fa-fw fa-refresh me-1"/> Replace Icon
                </we-button>
            </we-row>
            <we-row string="⌙ Inactive">
                <we-colorpicker data-select-style="" data-apply-to=".s_rating_inactive_icons" data-css-property="color" data-color-prefix="text-"/>
                <we-button data-custom-icon="true" data-custom-active-icon="false" data-no-preview="true">
                    <i class="fa fa-fw fa-refresh me-1"/> Replace Icon
                </we-button>
            </we-row>
            <we-row string="Score">
                <we-input data-active-icons-number="true" data-step="1"/>
                <span class="mx-2">/</span>
                <we-input data-total-icons-number="true" data-step="1"/>
            </we-row>
            <we-button-group string="Size" data-apply-to=".s_rating_icons">
                <we-button data-select-class="" title="Small" data-img="/website/static/src/img/snippets_options/size_small.svg"/>
                <we-button data-select-class="fa-lg" title="Medium" data-img="/website/static/src/img/snippets_options/size_medium.svg"/>

                <!--
                This one is hidden and only there for compatibility (allowing to
                remove the fa-3x class. Note that it is put in the middle to
                make sure rounded corners are properly applied on the first and
                last buttons of the group.
                -->
                <we-button data-select-class="fa-3x" data-name="rating_icon_xl"/>

                <we-button data-select-class="fa-2x" title="Large" data-img="/website/static/src/img/snippets_options/size_large.svg"/>
            </we-button-group>
            <we-select string="Title Position">
                <we-button data-select-class="">Top</we-button>
                <we-button data-select-class="s_rating_inline">Left</we-button>
                <we-button data-select-class="s_rating_no_title">Hidden</we-button>
            </we-select>
        </div>
    </xpath>
</data>

