<?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_attributes">
    <argument name="data" xsi:type="array">
        <item name="js_config" xsi:type="array">
            <item name="provider" xsi:type="string">pagebuilder_filoblu_zendesk_form.pagebuilder_filoblu_zendesk_form_data_source</item>
        </item>
        <item name="label" xsi:type="string" translate="true">Lead Form</item>
    </argument>
    <settings>
        <namespace>pagebuilder_filoblu_zendesk_form</namespace>
        <deps>
            <dep>pagebuilder_filoblu_zendesk_form.pagebuilder_filoblu_zendesk_form_data_source</dep>
        </deps>
    </settings>
    <dataSource name="pagebuilder_filoblu_zendesk_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/form/provider</item>
            </item>
        </argument>
        <dataProvider name="pagebuilder_filoblu_zendesk_form_data_source" class="Magento\PageBuilder\Model\ContentType\DataProvider">
            <settings>
                <requestFieldName/>
                <primaryFieldName/>
            </settings>
        </dataProvider>
    </dataSource>
    <fieldset name="advanced">
        <settings>
            <visible>false</visible>
        </settings>
    </fieldset>
    <fieldset name="background">
        <settings>
            <visible>false</visible>
        </settings>
    </fieldset>
    <fieldset name="appearance_fieldset" sortOrder="10" component="Magento_PageBuilder/js/form/element/dependent-fieldset">
        <settings>
            <label translate="true">Appearance</label>
            <additionalClasses>
                <class name="admin__fieldset-visual-select-large">true</class>
            </additionalClasses>
            <collapsible>false</collapsible>
            <opened>true</opened>
            <imports>
                <link name="hideFieldset">${$.name}.appearance:options</link>
                <link name="hideLabel">${$.name}.appearance:options</link>
            </imports>
        </settings>
        <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">default</item>
                </item>
            </argument>
            <settings>
                <additionalClasses>
                    <class name="admin__field-wide">true</class>
                    <class name="admin__field-visual-select-container">true</class>
                </additionalClasses>
                <dataType>text</dataType>
                <validation>
                    <rule name="required-entry" xsi:type="boolean">true</rule>
                </validation>
                <elementTmpl>Magento_PageBuilder/form/element/visual-select</elementTmpl>
            </settings>
            <formElements>
                <select>
                    <settings>
                        <options class="AppearanceSourceFilobluDefault"/>
                    </settings>
                </select>
            </formElements>
        </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">50px</item>
                </item>
            </argument>
            <settings>
                <visible>false</visible>
            </settings>
        </field>
    </fieldset>
    <fieldset name="general" sortOrder="20">
        <settings>
            <label>General</label>
        </settings>
        <field name="zendesk_text" sortOrder="10" formElement="input">
            <settings>
                <label>Text</label>
                <dataScope>zendesk_text</dataScope>
            </settings>
        </field>
        <field name="zendesk_text_color" sortOrder="20" formElement="colorPicker">
            <settings>
                <label translate="true">Text Color</label>
                <componentType>colorPicker</componentType>
                <validation>
                    <rule name="validate-color" xsi:type="boolean">true</rule>
                </validation>
                <dataScope>zendesk_text_color</dataScope>
                <additionalClasses>
                    <class name="admin__field-medium">true</class>
                </additionalClasses>
            </settings>
            <formElements>
                <colorPicker>
                    <settings>
                        <colorPickerMode>full</colorPickerMode>
                        <colorFormat>hex</colorFormat>
                    </settings>
                </colorPicker>
            </formElements>
        </field>
        <field name="zendesk_bg_color" sortOrder="30" formElement="colorPicker">
            <settings>
                <label translate="true">Background Color</label>
                <componentType>colorPicker</componentType>
                <validation>
                    <rule name="validate-color" xsi:type="boolean">true</rule>
                </validation>
                <dataScope>zendesk_bg_color</dataScope>
                <additionalClasses>
                    <class name="admin__field-medium">true</class>
                </additionalClasses>
            </settings>
            <formElements>
                <colorPicker>
                    <settings>
                        <colorPickerMode>full</colorPickerMode>
                        <colorFormat>hex</colorFormat>
                    </settings>
                </colorPicker>
            </formElements>
        </field>
        <field name="widget_position" sortOrder="40" formElement="select">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="default" xsi:type="string">left</item>
                </item>
            </argument>
            <settings>
                <dataType>text</dataType>
                <label translate="true">Widget Position</label>
                <dataScope>widget_position</dataScope>
            </settings>
            <formElements>
                <select>
                    <settings>
                        <options>
                            <option name="0" xsi:type="array">
                                <item name="value" xsi:type="string">left</item>
                                <item name="label" xsi:type="string" translate="true">Left</item>
                            </option>
                            <option name="1" xsi:type="array">
                                <item name="value" xsi:type="string">right</item>
                                <item name="label" xsi:type="string" translate="true">Right</item>
                            </option>
                        </options>
                    </settings>
                </select>
            </formElements>
        </field>
        <field name="zendesk_top_distance" sortOrder="50" formElement="select">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="default" xsi:type="string">50%</item>
                </item>
            </argument>
            <settings>
                <dataType>text</dataType>
                <label translate="true">Distance from top</label>
                <dataScope>zendesk_top_distance</dataScope>
            </settings>
            <formElements>
                <select>
                    <settings>
                        <options>
                            <option name="0" xsi:type="array">
                                <item name="value" xsi:type="string">10%</item>
                                <item name="label" xsi:type="string" translate="true">10%</item>
                            </option>
                            <option name="1" xsi:type="array">
                                <item name="value" xsi:type="string">15%</item>
                                <item name="label" xsi:type="string" translate="true">15%</item>
                            </option>
                            <option name="2" xsi:type="array">
                                <item name="value" xsi:type="string">20%</item>
                                <item name="label" xsi:type="string" translate="true">20%</item>
                            </option>
                            <option name="3" xsi:type="array">
                                <item name="value" xsi:type="string">25%</item>
                                <item name="label" xsi:type="string" translate="true">25%</item>
                            </option>
                            <option name="4" xsi:type="array">
                                <item name="value" xsi:type="string">30%</item>
                                <item name="label" xsi:type="string" translate="true">30%</item>
                            </option>
                            <option name="5" xsi:type="array">
                                <item name="value" xsi:type="string">35%</item>
                                <item name="label" xsi:type="string" translate="true">35%</item>
                            </option>
                            <option name="6" xsi:type="array">
                                <item name="value" xsi:type="string">40%</item>
                                <item name="label" xsi:type="string" translate="true">40%</item>
                            </option>
                            <option name="7" xsi:type="array">
                                <item name="value" xsi:type="string">50%</item>
                                <item name="label" xsi:type="string" translate="true">50%</item>
                            </option>
                            <option name="8" xsi:type="array">
                                <item name="value" xsi:type="string">55%</item>
                                <item name="label" xsi:type="string" translate="true">55%</item>
                            </option>
                            <option name="9" xsi:type="array">
                                <item name="value" xsi:type="string">60%</item>
                                <item name="label" xsi:type="string" translate="true">60%</item>
                            </option>
                            <option name="10" xsi:type="array">
                                <item name="value" xsi:type="string">65%</item>
                                <item name="label" xsi:type="string" translate="true">65%</item>
                            </option>
                            <option name="11" xsi:type="array">
                                <item name="value" xsi:type="string">70%</item>
                                <item name="label" xsi:type="string"  translate ="true">70%</item>
                            </option>
                            <option name="12" xsi:type="array">
                                <item name="value" xsi:type="string">75%</item>
                                <item name="label" xsi:type="string" translate="true">75%</item>
                            </option>
                            <option name="13" xsi:type="array">
                                <item name="value" xsi:type="string">80%</item>
                                <item name="label" xsi:type="string" translate="true">80%</item>
                            </option>
                            <option name="14" xsi:type="array">
                                <item name="value" xsi:type="string">85%</item>
                                <item name="label" xsi:type="string" translate="true">85%</item>
                            </option>
                            <option name="15" xsi:type="array">
                                <item name="value" xsi:type="string">90%</item>
                                <item name="label" xsi:type="string" translate="true">90%</item>
                            </option>
                        </options>
                    </settings>
                </select>
            </formElements>
        </field>
        <field name="zendesk_z_index" sortOrder="60" formElement="input">
            <settings>
                <label>Z Index</label>
                <dataScope>zendesk_z_index</dataScope>
                <additionalClasses>
                    <class name="admin__field-small">true</class>
                </additionalClasses>
            </settings>
        </field>
        <field name="zendesk_offset_top" sortOrder="70" formElement="input">
            <settings>
                <label>Offset Top</label>
                <dataScope>zendesk_offset_top</dataScope>
                <additionalClasses>
                    <class name="admin__field-small">true</class>
                </additionalClasses>
            </settings>
        </field>
    </fieldset>
</form>
