<?xml version="1.0" encoding="UTF-8"?>
<form xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd" extends="pagebuilder_filoblu_products_form">
    <argument name="data" xsi:type="array">
        <item name="js_config" xsi:type="array">
            <item name="provider" xsi:type="string">pagebuilder_filoblu_products_carousel_form.pagebuilder_filoblu_products_carousel_form_data_source</item>
        </item>
    </argument>
    <settings>
        <deps>
            <dep>pagebuilder_filoblu_products_carousel_form.pagebuilder_filoblu_products_carousel_form_data_source</dep>
        </deps>
        <namespace>pagebuilder_filoblu_products_carousel_form</namespace>
    </settings>
    <dataSource name="pagebuilder_filoblu_products_carousel_form_data_source">
        <argument name="data" xsi:type="array">
            <item name="js_config" xsi:type="array">
                <item name="component" xsi:type="string">Magento_PageBuilder/js/content-type/products/form/provider</item>
            </item>
        </argument>
        <dataProvider name="pagebuilder_filoblu_products_carousel_form_data_source" class="Magento\PageBuilder\Model\ContentType\DataProvider">
            <settings>
                <requestFieldName/>
                <primaryFieldName/>
            </settings>
        </dataProvider>
    </dataSource>
    <fieldset name="appearance_fieldset" sortOrder="10" component="Magento_PageBuilder/js/form/element/dependent-fieldset">
        <field name="appearance" formElement="select" sortOrder="10" component="Magento_PageBuilder/js/form/element/dependent-visual-select">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="default" xsi:type="string">carousel</item>
                </item>
            </argument>
        </field>
        <htmlContent name="conditions_form" sortOrder="30" template="Magento_PageBuilder/form/element/widget-conditions">
            <block name="conditions_form" class="Magento\PageBuilder\Block\Adminhtml\Form\Element\ProductConditions">
                <arguments>
                    <argument name="formNamespace" xsi:type="string">pagebuilder_filoblu_products_carousel_form</argument>
                    <argument name="attribute" xsi:type="string">condition_source</argument>
                    <argument name="label" xsi:type="string" translate="true">Condition</argument>
                </arguments>
            </block>
        </htmlContent>
        <container name="product_count_group" component="Magento_Ui/js/form/components/group" sortOrder="80">
            <field name="products_count" sortOrder="20" formElement="input">
                <argument name="data" xsi:type="array">
                    <item name="config" xsi:type="array">
                        <item name="componentDisabled" xsi:type="boolean">true</item>
                    </item>
                </argument>
            </field>
        </container>
    </fieldset>
    <fieldset name="settings" sortOrder="20">
        <settings>
            <label translate="true">Carousel Settings</label>
            <collapsible>true</collapsible>
            <opened>true</opened>
        </settings>
        <field name="autoplay" sortOrder="20" formElement="checkbox">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="default" xsi:type="string">false</item>
                </item>
            </argument>
            <settings>
                <dataType>boolean</dataType>
                <label translate="true">Autoplay</label>
            </settings>
            <formElements>
                <checkbox>
                    <settings>
                        <valueMap>
                            <map name="false" xsi:type="string">false</map>
                            <map name="true" xsi:type="string">true</map>
                        </valueMap>
                        <prefer>toggle</prefer>
                    </settings>
                </checkbox>
            </formElements>
        </field>
        <field name="autoplay_speed" sortOrder="30" formElement="input">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="default" xsi:type="number">4000</item>
                </item>
            </argument>
            <settings>
                <dataType>text</dataType>
                <label translate="true">Autoplay Speed</label>
                <additionalClasses>
                    <class name="admin__field-small">true</class>
                </additionalClasses>
                <addAfter translate="true">ms</addAfter>
                <dataScope>autoplay_speed</dataScope>
                <notice translate="true">Delay in milliseconds between each slide</notice>
                <imports>
                    <link name="disabled">!ns = ${ $.ns }, index = autoplay:checked</link>
                </imports>
            </settings>
        </field>
        <field name="is_infinite" sortOrder="40" formElement="checkbox">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="default" xsi:type="string">false</item>
                    <item name="disabledValues" xsi:type="array">
                        <item name="none" xsi:type="string">continuous</item>
                    </item>
                    <item name="dependentValues" xsi:type="array">
                        <item name="continuous" xsi:type="string">true</item>
                    </item>
                </item>
            </argument>
            <settings>
                <dataType>boolean</dataType>
                <label translate="true">Infinite Loop</label>
                <imports>
                    <link name="setDisabled">ns = ${ $.ns }, index = carousel_mode:value</link>
                    <link name="setDependentValues">ns = ${ $.ns }, index = carousel_mode:value</link>
                </imports>
            </settings>
            <formElements>
                <checkbox>
                    <settings>
                        <valueMap>
                            <map name="false" xsi:type="string">false</map>
                            <map name="true" xsi:type="string">true</map>
                        </valueMap>
                        <prefer>toggle</prefer>
                    </settings>
                </checkbox>
            </formElements>
        </field>
        <field name="show_arrows" sortOrder="50" formElement="checkbox">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="default" xsi:type="string">false</item>
                </item>
            </argument>
            <settings>
                <dataType>boolean</dataType>
                <label translate="true">Show Arrows</label>
            </settings>
            <formElements>
                <checkbox>
                    <settings>
                        <valueMap>
                            <map name="false" xsi:type="string">false</map>
                            <map name="true" xsi:type="string">true</map>
                        </valueMap>
                        <prefer>toggle</prefer>
                    </settings>
                </checkbox>
            </formElements>
        </field>
        <field name="direction" sortOrder="40" formElement="select">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="default" xsi:type="string">none</item>
                </item>
            </argument>
            <settings>
                <dataType>text</dataType>
                <label translate="true">Slider Direction</label>
            </settings>
            <formElements>
                <select>
                    <settings>
                        <options>
                            <option name="0" xsi:type="array">
                                <item name="value" xsi:type="string">horizontal</item>
                                <item name="label" xsi:type="string" translate="true">Horizontal</item>
                            </option>
                            <option name="1" xsi:type="array">
                                <item name="value" xsi:type="string">vertical</item>
                                <item name="label" xsi:type="string" translate="true">Vertical</item>
                            </option>
                        </options>
                    </settings>
                </select>
            </formElements>
        </field>
        <field name="speed" sortOrder="50" formElement="input">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="default" xsi:type="number">300</item>
                </item>
            </argument>
            <settings>
                <dataType>text</dataType>
                <label translate="true">Transition Speed</label>
                <additionalClasses>
                    <class name="admin__field-small">true</class>
                </additionalClasses>
                <addAfter translate="true">ms</addAfter>
                <dataScope>speed</dataScope>
                <notice translate="true">Transition speed expressed in milliseconds</notice>
            </settings>
        </field>
        <field name="effect" sortOrder="60" formElement="select">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="default" xsi:type="string">none</item>
                </item>
            </argument>
            <settings>
                <dataType>text</dataType>
                <label translate="true">Slide Effect</label>
            </settings>
            <formElements>
                <select>
                    <settings>
                        <options>
                            <option name="0" xsi:type="array">
                                <item name="value" xsi:type="string">slide</item>
                                <item name="label" xsi:type="string" translate="true">Slide</item>
                            </option>
                            <option name="1" xsi:type="array">
                                <item name="value" xsi:type="string">fade</item>
                                <item name="label" xsi:type="string" translate="true">Fade</item>
                            </option>
                            <option name="2" xsi:type="array">
                                <item name="value" xsi:type="string">cube</item>
                                <item name="label" xsi:type="string" translate="true">Cube</item>
                            </option>
                            <option name="3" xsi:type="array">
                                <item name="value" xsi:type="string">coverflow</item>
                                <item name="label" xsi:type="string" translate="true">Coverflow</item>
                            </option>
                            <option name="4" xsi:type="array">
                                <item name="value" xsi:type="string">flip</item>
                                <item name="label" xsi:type="string" translate="true">Flip</item>
                            </option>
                        </options>
                    </settings>
                </select>
            </formElements>
        </field>
    </fieldset>
    <fieldset name="slides_grid" sortOrder="30">
        <settings>
            <label translate="true">Slides Grid</label>
            <collapsible>true</collapsible>
            <opened>true</opened>
        </settings>
        <field name="space_between" sortOrder="1" formElement="input">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="default" xsi:type="number">0</item>
                </item>
            </argument>
            <settings>
                <dataType>text</dataType>
                <label translate="true">Space Between</label>
                <additionalClasses>
                    <class name="admin__field-small">true</class>
                </additionalClasses>
                <dataScope>space_between</dataScope>
                <notice translate="true">Space between slides</notice>
            </settings>
        </field>
        <field name="slides_per_view" sortOrder="10" formElement="input">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="default" xsi:type="number">1</item>
                </item>
            </argument>
            <settings>
                <dataType>text</dataType>
                <label translate="true">Slides per View</label>
                <additionalClasses>
                    <class name="admin__field-small">true</class>
                </additionalClasses>
                <dataScope>slides_per_view</dataScope>
            </settings>
        </field>
        <field name="slides_per_group" sortOrder="20" formElement="input">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="default" xsi:type="number">1</item>
                </item>
            </argument>
            <settings>
                <dataType>text</dataType>
                <label translate="true">Slides per Group</label>
                <additionalClasses>
                    <class name="admin__field-small">true</class>
                </additionalClasses>
                <dataScope>slides_per_group</dataScope>
            </settings>
        </field>
        <field name="centered_slide" sortOrder="30" formElement="checkbox">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="default" xsi:type="string">false</item>
                </item>
            </argument>
            <settings>
                <dataType>boolean</dataType>
                <label translate="true">Centered Slide</label>
            </settings>
            <formElements>
                <checkbox>
                    <settings>
                        <valueMap>
                            <map name="false" xsi:type="string">false</map>
                            <map name="true" xsi:type="string">true</map>
                        </valueMap>
                        <prefer>toggle</prefer>
                    </settings>
                </checkbox>
            </formElements>
        </field>
        <field name="free_mode" sortOrder="40" formElement="checkbox">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="default" xsi:type="string">false</item>
                </item>
            </argument>
            <settings>
                <dataType>boolean</dataType>
                <label translate="true">Free Mode</label>
            </settings>
            <formElements>
                <checkbox>
                    <settings>
                        <valueMap>
                            <map name="false" xsi:type="string">false</map>
                            <map name="true" xsi:type="string">true</map>
                        </valueMap>
                        <prefer>toggle</prefer>
                    </settings>
                </checkbox>
            </formElements>
        </field>
        <field name="breakpoints" sortOrder="50" formElement="textarea">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="rows" xsi:type="number">10</item>
                </item>
            </argument>
            <settings>
                <dataType>text</dataType>
                <label translate="true">Breakpoints</label>
                <dataScope>breakpoints</dataScope>
            </settings>
        </field>
        <field name="pagination_type" sortOrder="60" formElement="select">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="default" xsi:type="string">none</item>
                </item>
            </argument>
            <settings>
                <dataType>text</dataType>
                <label translate="true">Pagination Type</label>
            </settings>
            <formElements>
                <select>
                    <settings>
                        <options>
                            <option name="0" xsi:type="array">
                                <item name="value" xsi:type="string">bullets</item>
                                <item name="label" xsi:type="string" translate="true">Bullets</item>
                            </option>
                            <option name="1" xsi:type="array">
                                <item name="value" xsi:type="string">fraction</item>
                                <item name="label" xsi:type="string" translate="true">Fraction</item>
                            </option>
                            <option name="2" xsi:type="array">
                                <item name="value" xsi:type="string">progressbar</item>
                                <item name="label" xsi:type="string" translate="true">Cube</item>
                            </option>
                            <option name="3" xsi:type="array">
                                <item name="value" xsi:type="string">custom</item>
                                <item name="label" xsi:type="string" translate="true">Custom</item>
                            </option>
                            <option name="4" xsi:type="array">
                                <item name="value" xsi:type="string">none</item>
                                <item name="label" xsi:type="string" translate="true">None</item>
                            </option>
                        </options>
                    </settings>
                </select>
            </formElements>
        </field>
    </fieldset>
</form>
