<?xml version="1.0" encoding="UTF-8"?>
<!--
/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */
-->
<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">
    <settings>
        <namespace>pagebuilder_base_form_with_background_attributes</namespace>
    </settings>
    <fieldset name="background">
        <settings>
            <label translate="true">Background</label>
            <collapsible>true</collapsible>
            <opened>true</opened>
        </settings>
        <field name="background_color" sortOrder="10" formElement="colorPicker">
            <settings>
                <label translate="true">Background Color</label>
                <componentType>colorPicker</componentType>
                <placeholder translate="true">No Color</placeholder>
                <validation>
                    <rule name="validate-color" xsi:type="boolean">true</rule>
                </validation>
                <dataScope>background_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="background_image" sortOrder="20" formElement="imageUploader">
            <settings>
                <label translate="true">Background Image</label>
                <componentType>imageUploader</componentType>
            </settings>
            <formElements>
                <imageUploader>
                    <settings>
                        <allowedExtensions>jpg jpeg gif png</allowedExtensions>
                        <maxFileSize>4194304</maxFileSize>
                        <uploaderConfig>
                            <param xsi:type="string" name="url">pagebuilder/contenttype/image_upload</param>
                        </uploaderConfig>
                        <previewTmpl>Magento_PageBuilder/form/element/uploader/preview</previewTmpl>
                    </settings>
                </imageUploader>
            </formElements>
        </field>
        <field name="mobile_image" sortOrder="30" formElement="imageUploader">
            <settings>
                <label translate="true">Background Mobile Image</label>
                <componentType>imageUploader</componentType>
            </settings>
            <formElements>
                <imageUploader>
                    <settings>
                        <allowedExtensions>jpg jpeg gif png</allowedExtensions>
                        <maxFileSize>2097152</maxFileSize>
                        <uploaderConfig>
                            <param xsi:type="string" name="url">pagebuilder/contenttype/image_upload</param>
                        </uploaderConfig>
                        <previewTmpl>Magento_PageBuilder/form/element/uploader/preview</previewTmpl>
                    </settings>
                </imageUploader>
            </formElements>
        </field>
        <field name="background_size" sortOrder="40" formElement="select" component="Magento_PageBuilder/js/form/element/visual-select">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="default" xsi:type="string">cover</item>
                </item>
            </argument>
            <settings>
                <dataType>text</dataType>
                <label translate="true">Background Size</label>
                <elementTmpl>Magento_PageBuilder/form/element/visual-select</elementTmpl>
            </settings>
            <formElements>
                <select>
                    <settings>
                        <options class="BackgroundSizeSource" />
                    </settings>
                </select>
            </formElements>
        </field>
        <field name="background_position" sortOrder="50" formElement="select">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="default" xsi:type="string">left top</item>
                </item>
            </argument>
            <settings>
                <dataType>text</dataType>
                <label translate="true">Background Position</label>
            </settings>
            <formElements>
                <select>
                    <settings>
                        <options>
                            <option name="0" xsi:type="array">
                                <item name="value" xsi:type="string">left top</item>
                                <item name="label" xsi:type="string" translate="true">Top Left</item>
                            </option>
                            <option name="1" xsi:type="array">
                                <item name="value" xsi:type="string">center top</item>
                                <item name="label" xsi:type="string" translate="true">Top Center</item>
                            </option>
                            <option name="2" xsi:type="array">
                                <item name="value" xsi:type="string">right top</item>
                                <item name="label" xsi:type="string" translate="true">Top Right</item>
                            </option>
                            <option name="3" xsi:type="array">
                                <item name="value" xsi:type="string">left center</item>
                                <item name="label" xsi:type="string" translate="true">Center Left</item>
                            </option>
                            <option name="4" xsi:type="array">
                                <item name="value" xsi:type="string">center center</item>
                                <item name="label" xsi:type="string" translate="true">Center</item>
                            </option>
                            <option name="5" xsi:type="array">
                                <item name="value" xsi:type="string">right center</item>
                                <item name="label" xsi:type="string" translate="true">Center Right</item>
                            </option>
                            <option name="6" xsi:type="array">
                                <item name="value" xsi:type="string">left bottom</item>
                                <item name="label" xsi:type="string" translate="true">Bottom Left</item>
                            </option>
                            <option name="7" xsi:type="array">
                                <item name="value" xsi:type="string">center bottom</item>
                                <item name="label" xsi:type="string" translate="true">Bottom Center</item>
                            </option>
                            <option name="8" xsi:type="array">
                                <item name="value" xsi:type="string">right bottom</item>
                                <item name="label" xsi:type="string" translate="true">Bottom Right</item>
                            </option>
                        </options>
                    </settings>
                </select>
            </formElements>
        </field>
        <field name="background_attachment" sortOrder="60" formElement="select">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="default" xsi:type="string">scroll</item>
                </item>
            </argument>
            <settings>
                <dataType>text</dataType>
                <label translate="true">Background Attachment</label>
            </settings>
            <formElements>
                <select>
                    <settings>
                        <options>
                            <option name="0" xsi:type="array">
                                <item name="value" xsi:type="string">scroll</item>
                                <item name="label" xsi:type="string" translate="true">Scroll</item>
                            </option>
                            <option name="1" xsi:type="array">
                                <item name="value" xsi:type="string">fixed</item>
                                <item name="label" xsi:type="string" translate="true">Fixed</item>
                            </option>
                        </options>
                    </settings>
                </select>
            </formElements>
        </field>
        <field name="background_repeat" sortOrder="70" formElement="checkbox">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="default" xsi:type="string">no-repeat</item>
                </item>
            </argument>
            <settings>
                <dataType>boolean</dataType>
                <label translate="true">Background Repeat</label>
                <dataScope>background_repeat</dataScope>
            </settings>
            <formElements>
                <checkbox>
                    <settings>
                        <valueMap>
                            <map name="false" xsi:type="string">no-repeat</map>
                            <map name="true" xsi:type="string">repeat</map>
                        </valueMap>
                        <prefer>toggle</prefer>
                    </settings>
                </checkbox>
            </formElements>
        </field>
    </fieldset>
</form>
