<?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_with_background_video">
    <argument name="data" xsi:type="array">
        <item name="js_config" xsi:type="array">
            <item name="provider" xsi:type="string">pagebuilder_banner_form.pagebuilder_banner_form_data_source</item>
        </item>
        <item name="label" xsi:type="string" translate="true">Banner</item>
    </argument>
    <settings>
        <deps>
            <dep>pagebuilder_banner_form.pagebuilder_banner_form_data_source</dep>
        </deps>
        <namespace>pagebuilder_banner_form</namespace>
    </settings>
    <dataSource name="pagebuilder_banner_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_banner_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">
        <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">poster</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>
                <elementTmpl>Magento_PageBuilder/form/element/visual-select</elementTmpl>
            </settings>
            <formElements>
                <select>
                    <settings>
                        <options class="AppearanceSourceBanner" />
                    </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">300px</item>
                </item>
            </argument>
            <settings>
                <label translate="true">Minimum Height</label>
                <notice translate="true">Minimum height can be a single number with any valid CSS unit (50px, 50%, 50em, 50vh) or a calculation (50% + 50px).</notice>
                <additionalClasses>
                    <class name="admin__field-medium">true</class>
                </additionalClasses>
                <validation>
                    <rule name="validate-calc" xsi:type="boolean">true</rule>
                </validation>
            </settings>
        </field>
    </fieldset>
    <fieldset name="background" sortOrder="20" />
    <fieldset name="contents" sortOrder="30">
        <settings>
            <label translate="true">Content</label>
            <collapsible>true</collapsible>
            <opened>true</opened>
        </settings>
        <field name="message" sortOrder="10" formElement="wysiwyg" template="ui/form/field">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="source" xsi:type="string">page</item>
                    <item name="wysiwygConfigData" xsi:type="array">
                        <item name="pagebuilder_button" xsi:type="boolean">false</item>
                        <item name="is_pagebuilder_enabled" xsi:type="boolean">false</item>
                        <item name="toggle_button" xsi:type="boolean">false</item>
                        <item name="height" xsi:type="string">200px</item>
                    </item>
                </item>
            </argument>
            <settings>
                <label translate="true">Message Text</label>
                <dataScope>message</dataScope>
                <validation>
                    <rule name="validate-no-url" xsi:type="boolean">true</rule>
                </validation>
                <imports>
                    <link name="validation.validate-no-url">${$.parentName}.link_url:value</link>
                </imports>
            </settings>
            <formElements>
                <wysiwyg>
                    <settings>
                        <wysiwyg>true</wysiwyg>
                    </settings>
                </wysiwyg>
            </formElements>
        </field>
        <urlInput name="link_url" sortOrder="20" template="Magento_PageBuilder/form/element/url-input">
            <settings>
                <dataType>text</dataType>
                <label translate="true">Link</label>
                <dataScope>link_url</dataScope>
                <urlTypes class="Magento\Ui\Model\UrlInput\LinksConfigProvider"/>
                <validation>
                    <rule name="validate-message-no-link" xsi:type="boolean">true</rule>
                </validation>
                <imports>
                    <link name="validation.validate-message-no-link">${$.parentName}.message:value</link>
                </imports>
            </settings>
        </urlInput>
        <field name="show_button" sortOrder="40" formElement="select">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="default" xsi:type="string">never</item>
                </item>
            </argument>
            <settings>
                <dataType>text</dataType>
                <label translate="true">Show Button</label>
                <dataScope>show_button</dataScope>
            </settings>
            <formElements>
                <select>
                    <settings>
                        <options>
                            <option name="0" xsi:type="array">
                                <item name="value" xsi:type="string">always</item>
                                <item name="label" xsi:type="string" translate="true">Always</item>
                            </option>
                            <option name="1" xsi:type="array">
                                <item name="value" xsi:type="string">hover</item>
                                <item name="label" xsi:type="string" translate="true">On Hover</item>
                            </option>
                            <option name="2" xsi:type="array">
                                <item name="value" xsi:type="string">never</item>
                                <item name="label" xsi:type="string" translate="true">Never Show</item>
                            </option>
                        </options>
                    </settings>
                </select>
            </formElements>
        </field>
        <field name="button_text" sortOrder="50" formElement="input">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="disabledValues" xsi:type="array">
                        <item name="none" xsi:type="string">never</item>
                    </item>
                </item>
            </argument>
            <settings>
                <label translate="true">Button Text</label>
                <dataType>text</dataType>
                <dataScope>button_text</dataScope>
                <imports>
                    <link name="setDisabled">ns = ${ $.ns }, index = show_button:value</link>
                </imports>
            </settings>
        </field>
        <field name="button_type" sortOrder="60" formElement="select">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="default" xsi:type="string">pagebuilder-button-primary</item>
                    <item name="disabledValues" xsi:type="array">
                        <item name="none" xsi:type="string">never</item>
                    </item>
                </item>
            </argument>
            <settings>
                <dataType>text</dataType>
                <label translate="true">Button Type</label>
                <imports>
                    <link name="setDisabled">ns = ${ $.ns }, index = show_button:value</link>
                </imports>
            </settings>
            <formElements>
                <select>
                    <settings>
                        <options>
                            <option name="0" xsi:type="array">
                                <item name="value" xsi:type="string">pagebuilder-button-primary</item>
                                <item name="label" xsi:type="string" translate="true">Primary</item>
                            </option>
                            <option name="1" xsi:type="array">
                                <item name="value" xsi:type="string">pagebuilder-button-secondary</item>
                                <item name="label" xsi:type="string" translate="true">Secondary</item>
                            </option>
                            <option name="2" xsi:type="array">
                                <item name="value" xsi:type="string">pagebuilder-button-link</item>
                                <item name="label" xsi:type="string" translate="true">Link</item>
                            </option>
                        </options>
                    </settings>
                </select>
            </formElements>
        </field>
        <field name="show_overlay" sortOrder="70" formElement="select">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="default" xsi:type="string">never</item>
                </item>
            </argument>
            <settings>
                <dataType>text</dataType>
                <label translate="true">Show Overlay</label>
                <dataScope>show_overlay</dataScope>
            </settings>
            <formElements>
                <select>
                    <settings>
                        <options>
                            <option name="0" xsi:type="array">
                                <item name="value" xsi:type="string">always</item>
                                <item name="label" xsi:type="string" translate="true">Always</item>
                            </option>
                            <option name="1" xsi:type="array">
                                <item name="value" xsi:type="string">hover</item>
                                <item name="label" xsi:type="string" translate="true">On Hover</item>
                            </option>
                            <option name="2" xsi:type="array">
                                <item name="value" xsi:type="string">never</item>
                                <item name="label" xsi:type="string" translate="true">Never Show</item>
                            </option>
                        </options>
                    </settings>
                </select>
            </formElements>
        </field>
        <field name="overlay_color" sortOrder="80" formElement="colorPicker">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="disabledValues" xsi:type="array">
                        <item name="none" xsi:type="string">never</item>
                    </item>
                </item>
            </argument>
            <settings>
                <label translate="true">Overlay Color</label>
                <componentType>colorPicker</componentType>
                <placeholder translate="true">No Color</placeholder>
                <additionalClasses>
                    <class name="admin__field-medium">true</class>
                </additionalClasses>
                <validation>
                    <rule name="validate-color" xsi:type="boolean">true</rule>
                </validation>
                <dataScope>overlay_color</dataScope>
                <dataType>text</dataType>
                <imports>
                    <link name="setDisabled">ns = ${ $.ns }, index = show_overlay:value</link>
                </imports>
            </settings>
            <formElements>
                <colorPicker>
                    <settings>
                        <colorPickerMode>full</colorPickerMode>
                        <colorFormat>hex</colorFormat>
                    </settings>
                </colorPicker>
            </formElements>
        </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">40</item>
                            <item name="right" xsi:type="number">40</item>
                            <item name="bottom" xsi:type="number">40</item>
                            <item name="left" xsi:type="number">40</item>
                        </item>
                    </item>
                </item>
            </argument>
        </field>
    </fieldset>
</form>
