<?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_base_form_with_background_video">
    <fieldset name="appearance_fieldset">
        <field name="data_min_height" sortOrder="19" formElement="input">
            <settings>
                <label translate="true">Minimum Height</label>
                <additionalClasses>
                    <class name="admin__field-small">true</class>
                </additionalClasses>
                <addAfter translate="true">px</addAfter>
                <validation>
                    <rule name="validate-number" xsi:type="boolean">true</rule>
                </validation>
            </settings>
        </field>
        <field name="mobile_min_height" sortOrder="19" formElement="input">
            <settings>
                <label translate="true">Mobile Minimum Height</label>
                <additionalClasses>
                    <class name="admin__field-small">true</class>
                </additionalClasses>
                <addAfter translate="true">px</addAfter>
                <validation>
                    <rule name="validate-number" xsi:type="boolean">true</rule>
                </validation>
            </settings>
        </field>
        <field name="min_height" sortOrder="20" formElement="input">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="default" xsi:type="string">70px</item>
                </item>
            </argument>
            <settings>
                <visible>false</visible>
            </settings>
        </field>
        <field name="above_fold" sortOrder="30" formElement="checkbox">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="source" xsi:type="string">page</item>
                    <item name="default" xsi:type="number">0</item>
                </item>
            </argument>
            <settings>
                <dataType>boolean</dataType>
                <label translate="true">Above the fold content</label>
                <dataScope>above_fold</dataScope>
            </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>
    </fieldset>
    <fieldset name="background">
        <field name="background_size">
            <settings>
                <visible>true</visible>
                <imports>
                    <link name="visible">true</link>
                </imports>
            </settings>
        </field>
        <field name="background_position">
            <settings>
                <visible>true</visible>
                <imports>
                    <link name="visible">true</link>
                </imports>
            </settings>
        </field>
        <field name="video_source">
            <settings>
                <validation>
                    <rule name="required-entry" xsi:type="boolean">false</rule>
                </validation>
            </settings>
        </field>
        <field name="mobile_video_source" sortOrder="91" formElement="input">
            <settings>
                <visible>false</visible>
                <validation>
                    <rule name="validate-video-source" xsi:type="boolean">true</rule>
                </validation>
                <dataType>text</dataType>
                <label translate="true">Mobile Video URL</label>
                <tooltip>
                    <description translate="true">Video URLs can be links to videos on YouTube or Vimeo, or HTTP(S) links to files with valid video extensions (we recommend .mp4)</description>
                </tooltip>
                <imports>
                    <link name="visible">${$.parentName}.background_type:videoVisible</link>
                </imports>
                <dataScope>mobile_video_source</dataScope>
            </settings>
        </field>
        <field name="background_video_path" sortOrder="92">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="settings" xsi:type="array">
                        <item name="allowedExtensions" xsi:type="string">mp4</item>
                        <item name="maxFileSize" xsi:type="string">4194304</item>
                    </item>
                    <item name="label" xsi:type="string">Self-hosted Video</item>
                    <item name="visible" xsi:type="boolean">true</item>
                    <item name="formElement" xsi:type="string">fileUploader</item>
                    <item name="uploaderConfig" xsi:type="array">
                        <item name="url" xsi:type="url" path="filoblu_refilo/contenttype/video_upload"/>
                    </item>
                </item>
            </argument>
            <settings>
                <imports>
                    <link name="visible">${$.parentName}.background_type:videoVisible</link>
                </imports>
                <dataScope>background_video_path</dataScope>
            </settings>
        </field>
        <field name="background_mobile_video_path" sortOrder="93">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="settings" xsi:type="array">
                        <item name="allowedExtensions" xsi:type="string">mp4</item>
                        <item name="maxFileSize" xsi:type="string">4194304</item>
                    </item>
                    <item name="label" xsi:type="string">Self-hosted Mobile Video</item>
                    <item name="visible" xsi:type="boolean">true</item>
                    <item name="formElement" xsi:type="string">fileUploader</item>
                    <item name="uploaderConfig" xsi:type="array">
                        <item name="url" xsi:type="url" path="filoblu_refilo/contenttype/video_upload"/>
                    </item>
                </item>
            </argument>
            <settings>
                <imports>
                    <link name="visible">${$.parentName}.background_type:videoVisible</link>
                </imports>
                <dataScope>background_mobile_video_path</dataScope>
            </settings>
        </field>
        <field name="video_overlay_color">
            <settings>
                <imports>
                    <link name="visible">false</link>
                </imports>
            </settings>
        </field>
        <field name="video_loop">
            <settings>
                <imports>
                    <link name="visible">false</link>
                </imports>
            </settings>
        </field>
        <field name="video_lazy_load">
            <settings>
                <imports>
                    <link name="visible">false</link>
                </imports>
            </settings>
        </field>
        <field name="video_play_only_visible">
            <settings>
                <imports>
                    <link name="visible">false</link>
                </imports>
            </settings>
        </field>
    </fieldset>
    <fieldset name="parallax_background">
        <settings>
            <opened>false</opened>
            <label>React Scroll Parallax</label>
        </settings>
        <field name="enable_parallax">
            <settings>
                <visible>false</visible>
            </settings>
        </field>
        <field name="parallax_speed">
            <settings>
                <visible>false</visible>
            </settings>
        </field>
        <field name="rsp_speed" formElement="input" sortOrder="1">
            <settings>
                <label translate="true">Speed</label>
                <additionalClasses>
                    <class name="admin__field-small">true</class>
                </additionalClasses>
                <dataScope>rsp_speed</dataScope>
            </settings>
        </field>
        <field name="rsp_easing" formElement="textarea" sortOrder="10">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="rows" xsi:type="number">5</item>
                    <item name="fit" xsi:type="boolean">true</item>
                </item>
            </argument>
            <settings>
                <dataType>text</dataType>
                <label translate="true">Easing</label>
                <dataScope>rsp_easing</dataScope>
            </settings>
        </field>
        <field name="rsp_root_margin" formElement="textarea" sortOrder="20">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="rows" xsi:type="number">5</item>
                    <item name="fit" xsi:type="boolean">true</item>
                </item>
            </argument>
            <settings>
                <dataType>text</dataType>
                <label translate="true">Root Margin</label>
                <dataScope>rsp_root_margin</dataScope>
            </settings>
        </field>
        <field name="rsp_disabled" sortOrder="30" formElement="checkbox">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="default" xsi:type="string">0</item>
                </item>
            </argument>
            <settings>
                <dataType>boolean</dataType>
                <label translate="true">Disabled</label>
                <dataScope>rsp_disabled</dataScope>
            </settings>
            <formElements>
                <checkbox>
                    <settings>
                        <valueMap>
                            <map name="false" xsi:type="number">0</map>
                            <map name="true" xsi:type="number">1</map>
                        </valueMap>
                        <prefer>toggle</prefer>
                    </settings>
                </checkbox>
            </formElements>
        </field>
        <field name="rsp_should_always_complete_animation" sortOrder="40" formElement="checkbox">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="default" xsi:type="string">0</item>
                </item>
            </argument>
            <settings>
                <dataType>boolean</dataType>
                <label translate="true">Always Complete Animation</label>
                <dataScope>rsp_should_always_complete_animation</dataScope>
            </settings>
            <formElements>
                <checkbox>
                    <settings>
                        <valueMap>
                            <map name="false" xsi:type="number">0</map>
                            <map name="true" xsi:type="number">1</map>
                        </valueMap>
                        <prefer>toggle</prefer>
                    </settings>
                </checkbox>
            </formElements>
        </field>
        <field name="rsp_should_disable_scaling_translations" sortOrder="50" formElement="checkbox">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="default" xsi:type="string">0</item>
                </item>
            </argument>
            <settings>
                <dataType>boolean</dataType>
                <label translate="true">Disable Scaling Translations</label>
                <dataScope>rsp_should_disable_scaling_translations</dataScope>
            </settings>
            <formElements>
                <checkbox>
                    <settings>
                        <valueMap>
                            <map name="false" xsi:type="number">0</map>
                            <map name="true" xsi:type="number">1</map>
                        </valueMap>
                        <prefer>toggle</prefer>
                    </settings>
                </checkbox>
            </formElements>
        </field>
        <field name="rsp_start_scroll" formElement="input" sortOrder="60">
            <settings>
                <label translate="true">Start Scroll</label>
                <additionalClasses>
                    <class name="admin__field-small">true</class>
                </additionalClasses>
                <dataScope>rsp_start_scroll</dataScope>
            </settings>
        </field>
        <field name="rsp_end_scroll" formElement="input" sortOrder="70">
            <settings>
                <label translate="true">End Scroll</label>
                <additionalClasses>
                    <class name="admin__field-small">true</class>
                </additionalClasses>
                <dataScope>rsp_end_scroll</dataScope>
            </settings>
        </field>
        <field name="rsp_target_element" formElement="input" sortOrder="80">
            <settings>
                <label translate="true">Target Element</label>
                <dataScope>rsp_target_element</dataScope>
            </settings>
        </field>
        <field name="rsp_translate_x" formElement="textarea" sortOrder="90">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="rows" xsi:type="number">5</item>
                    <item name="fit" xsi:type="boolean">true</item>
                </item>
            </argument>
            <settings>
                <dataType>text</dataType>
                <label translate="true">Translate X</label>
                <dataScope>rsp_translate_x</dataScope>
            </settings>
        </field>
        <field name="rsp_translate_y" formElement="textarea" sortOrder="100">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="rows" xsi:type="number">5</item>
                    <item name="fit" xsi:type="boolean">true</item>
                </item>
            </argument>
            <settings>
                <dataType>text</dataType>
                <label translate="true">Translate Y</label>
                <dataScope>rsp_translate_y</dataScope>
            </settings>
        </field>
        <field name="rsp_rotate" formElement="textarea" sortOrder="110">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="rows" xsi:type="number">5</item>
                    <item name="fit" xsi:type="boolean">true</item>
                </item>
            </argument>
            <settings>
                <dataType>text</dataType>
                <label translate="true">Rotate</label>
                <dataScope>rsp_rotate</dataScope>
            </settings>
        </field>
        <field name="rsp_rotate-x" formElement="textarea" sortOrder="120">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="rows" xsi:type="number">5</item>
                    <item name="fit" xsi:type="boolean">true</item>
                </item>
            </argument>
            <settings>
                <dataType>text</dataType>
                <label translate="true">Rotate X</label>
                <dataScope>rsp_rotate_x</dataScope>
            </settings>
        </field>
        <field name="rsp_rotate-y" formElement="textarea" sortOrder="130">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="rows" xsi:type="number">5</item>
                    <item name="fit" xsi:type="boolean">true</item>
                </item>
            </argument>
            <settings>
                <dataType>text</dataType>
                <label translate="true">Rotate Y</label>
                <dataScope>rsp_rotate_y</dataScope>
            </settings>
        </field>
        <field name="rsp_rotate-z" formElement="textarea" sortOrder="140">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="rows" xsi:type="number">5</item>
                    <item name="fit" xsi:type="boolean">true</item>
                </item>
            </argument>
            <settings>
                <dataType>text</dataType>
                <label translate="true">Rotate Z</label>
                <dataScope>rsp_rotate_z</dataScope>
            </settings>
        </field>
        <field name="rsp_scale" formElement="textarea" sortOrder="150">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="rows" xsi:type="number">5</item>
                    <item name="fit" xsi:type="boolean">true</item>
                </item>
            </argument>
            <settings>
                <dataType>text</dataType>
                <label translate="true">Scale</label>
                <dataScope>rsp_scale</dataScope>
            </settings>
        </field>
        <field name="rsp_scale_x" formElement="textarea" sortOrder="160">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="rows" xsi:type="number">5</item>
                    <item name="fit" xsi:type="boolean">true</item>
                </item>
            </argument>
            <settings>
                <dataType>text</dataType>
                <label translate="true">Scale X</label>
                <dataScope>rsp_scale_x</dataScope>
            </settings>
        </field>
        <field name="rsp_scale_y" formElement="textarea" sortOrder="170">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="rows" xsi:type="number">5</item>
                    <item name="fit" xsi:type="boolean">true</item>
                </item>
            </argument>
            <settings>
                <dataType>text</dataType>
                <label translate="true">Scale Y</label>
                <dataScope>rsp_scale_y</dataScope>
            </settings>
        </field>
        <field name="rsp_scale_z" formElement="textarea" sortOrder="180">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="rows" xsi:type="number">5</item>
                    <item name="fit" xsi:type="boolean">true</item>
                </item>
            </argument>
            <settings>
                <dataType>text</dataType>
                <label translate="true">Scale Z</label>
                <dataScope>rsp_scale_z</dataScope>
            </settings>
        </field>
        <field name="rsp_opacity" formElement="textarea" sortOrder="190">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="rows" xsi:type="number">5</item>
                    <item name="fit" xsi:type="boolean">true</item>
                </item>
            </argument>
            <settings>
                <dataType>text</dataType>
                <label translate="true">Opacity</label>
                <dataScope>rsp_opacity</dataScope>
            </settings>
        </field>
        <field name="rsp_on_progress_change" formElement="textarea" sortOrder="200">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="rows" xsi:type="number">5</item>
                    <item name="fit" xsi:type="boolean">true</item>
                </item>
            </argument>
            <settings>
                <dataType>text</dataType>
                <label translate="true">On Progress Change</label>
                <dataScope>rsp_on_progress_change</dataScope>
            </settings>
        </field>
        <field name="rsp_on_change" formElement="textarea" sortOrder="210">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="rows" xsi:type="number">5</item>
                    <item name="fit" xsi:type="boolean">true</item>
                </item>
            </argument>
            <settings>
                <dataType>text</dataType>
                <label translate="true">On Change</label>
                <dataScope>rsp_on_change</dataScope>
            </settings>
        </field>
        <field name="rsp_on_enter" formElement="textarea" sortOrder="220">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="rows" xsi:type="number">5</item>
                    <item name="fit" xsi:type="boolean">true</item>
                </item>
            </argument>
            <settings>
                <dataType>text</dataType>
                <label translate="true">On Enter</label>
                <dataScope>rsp_on_enter</dataScope>
            </settings>
        </field>
        <field name="rsp_on_exit" formElement="textarea" sortOrder="230">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="rows" xsi:type="number">5</item>
                    <item name="fit" xsi:type="boolean">true</item>
                </item>
            </argument>
            <settings>
                <dataType>text</dataType>
                <label translate="true">On Exit</label>
                <dataScope>rsp_on_exit</dataScope>
            </settings>
        </field>
    </fieldset>
    <fieldset name="advanced">
        <field name="margins_and_padding">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="default" xsi:type="array">
                        <item name="margin" xsi:type="array">
                            <item name="top" xsi:type="number">0</item>
                            <item name="right" xsi:type="number">0</item>
                            <item name="bottom" xsi:type="number">0</item>
                            <item name="left" xsi:type="number">0</item>
                        </item>
                        <item name="padding" xsi:type="array">
                            <item name="top" xsi:type="number">0</item>
                            <item name="right" xsi:type="number">0</item>
                            <item name="bottom" xsi:type="number">0</item>
                            <item name="left" xsi:type="number">0</item>
                        </item>
                    </item>
                </item>
            </argument>
        </field>
        <field name="load_with_priority" 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">Load With Priority</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>
    </fieldset>
</form>
