<?xml version="1.0" encoding="UTF-8"?>
<element>
   <form>
      <fields>
         <fieldset name="general-settings" label="TPL_ASTROID_GENERAL_SETTINGS_LABEL" addfieldpath="/libraries/astroid/framework/fields">
            <field type="astroidtext" class="form-control" label="ASTROID_COLUMN_TITLE_LABEL" name="title"/>
            <field type="astroidtext" class="form-control" label="ASTROID_CUSTOM_CLASS" description="ASTROID_CUSTOM_CLASS_DESC" name="customclass"/>
            <field type="astroidtext" class="form-control" label="ASTROID_CUSTOM_ID" description="ASTROID_CUSTOM_ID_DESC" name="customid"/>
         </fieldset>
         <fieldset name="design-settings" label="ASTROID_ELEMENT_HEAD_DESIGN_SEETINGS_LABEL" addfieldpath="/libraries/astroid/framework/fields">
            <field name="animation" type="astroidanimations" label="ASTROID_ANIMATION"/>
            <field ngShow="animation!=''" name="animation_delay" class="form-control" type="astroidtext" hint="500" default="500" label="ASTROID_ANIMATION_DELAY" description="ASTROID_ANIMATION_DELAY_DESC"/>
            <field ngShow="animation!=''" name="animation_duration" class="form-control" type="astroidtext" hint="500" default="500" label="ASTROID_ANIMATION_DURATION" description="ASTROID_ANIMATION_DURATION_DESC"/>
            <field description="TPL_ASTROID_ADVANCED_POPUUP_LAYOUT_SELECT_DESC" name="background_setting" type="astroidradio" default="0" label="TPL_ASTROID_ADVANCED_POPUUP_LAYOUT_SELECT_LABEL">
               <option value="0">ASTROID_NONE</option>
               <option value="color">TPL_ASTROID_COLOR</option>
               <option value="image">TPL_ASTROID_IMAGE</option>
               <option value="video">TPL_ASTROID_VIDEO</option>
               <option value="gradient">TPL_ASTROID_GRADIENT</option>
            </field>
            
            <field ngShow="background_setting =='color'" description="ASTROID_SELECT_BACKGROUND_COLOR_DESC" name="background_color" type="astroidcolor" label="TPL_ASTROID_BACKGROUND_COLOR_LABEL" />
            
            <field ngShow="background_setting =='image'"  name="img_background_color" type="astroidcolor" label="TPL_ASTROID_BACKGROUND_COLOR_LABEL"/>

            <field ngShow="background_setting =='image'"  name="background_image" type="astroidmedia" label="TPL_ASTROID_BACKGROUND_IMAGE_LABEL"/>
            
            <field ngShow="background_setting =='image'" name="background_repeat" type="astroidlist" label="TPL_ASTROID_BACKGROUND_REPEAT_LABEL" hint="TPL_ASTROID_BACKGROUND_REPEAT_LABEL">
               <option value="">JGLOBAL_INHERIT</option>
               <option value="no-repeat">TPL_ASTROID_BACKGROUND_NO_REPEAT_LABEL</option>
               <option value="repeat-x">TPL_ASTROID_BACKGROUND_REPEAT_HORIZONTALLY_LABEL</option>
               <option value="repeat-y">TPL_ASTROID_BACKGROUND_REPEAT_VERTICAL_LABEL</option>
            </field>
            <field ngShow="background_setting =='image'" name="background_size" type="astroidlist" label="ASTROID_BACKGROUND_SIZE">
               <option value="">JGLOBAL_INHERIT</option>
               <option value="cover">ASTROID_BACKGROUND_SIZE_COVER</option>
               <option value="contain">ASTROID_BACKGROUND_SIZE_CONTAIN</option>
            </field>
            <field ngShow="background_setting =='image'" name="background_attchment" type="astroidlist" label="ASTROID_BACKGROUND_ATTCHMENT">
               <option value="">JGLOBAL_INHERIT</option>
               <option value="scroll">ASTROID_BACKGROUND_ATTCHMENT_SCROLL</option>
               <option value="fixed">ASTROID_BACKGROUND_ATTCHMENT_FIXED</option>
            </field>	  
            <field ngShow="background_setting =='image'" name="background_position" type="astroidlist" label="ASTROID_BACKGROUND_POSITION_LABEL">
               <option value="">JGLOBAL_INHERIT</option>
               <option value="left top">ASTROID_BACKGROUND_POSITION_LEFT_TOP</option>
               <option value="left center">ASTROID_BACKGROUND_POSITION_LEFT_CENTER</option>
               <option value="left bottom">ASTROID_BACKGROUND_POSITION_LEFT_BOTTOM</option>
               <option value="right top">ASTROID_BACKGROUND_POSITION_RIGHT_TOP</option>
               <option value="right center">ASTROID_BACKGROUND_POSITION_RIGHT_CENTER</option>
               <option value="right bottom">ASTROID_BACKGROUND_POSITION_RIGHT_BOTTOM</option>
               <option value="center top">ASTROID_BACKGROUND_POSITION_CENTER_TOP</option>
               <option value="center center">ASTROID_BACKGROUND_POSITION_CENTER_CENTER</option>
               <option value="center bottom">ASTROID_BACKGROUND_POSITION_CENTER_BOTTOM</option>
            </field>

            <field ngShow="background_setting =='image'" description="TPL_ASTROID_OVERLAY_COLOR_DESC" name="background_image_overlay" type="astroidradio" default="0" label="TPL_ASTROID_OVERLAY_COLOR_LABEL">
               <option value="">ASTROID_NONE</option>
               <option value="color">TPL_ASTROID_COLOR</option>
               <option value="gradient">TPL_ASTROID_GRADIENT</option>
               <option value="pattern">TPL_ASTROID_PATTERN</option>
            </field>
            <field ngShow="background_setting=='image' AND (background_image_overlay=='color' OR background_image_overlay=='pattern')" description="ASTROID_SELECT_BACKGROUND_COLOR_DESC" name="background_image_overlay_color" type="astroidcolor" label="TPL_ASTROID_BACKGROUND_COLOR_LABEL" />
            <field ngShow="background_setting=='image' AND background_image_overlay=='gradient'" description="ASTROID_SELECT_BACKGROUND_COLOR_DESC" name="background_image_overlay_gradient" type="astroidgradient" label="TPL_ASTROID_BG_GREDIENT_LABEL" />
            <field ngShow="background_setting=='image' AND background_image_overlay=='pattern'" name="background_image_overlay_pattern" type="astroidmedia" label="TPL_ASTROID_BACKGROUND_PATTERN_IMAGE_LABEL"/>

            <field ngShow="background_setting =='video'" name="background_video" type="astroidmedia" media="videos" label="TPL_ASTROID_BACKGROUND_VIDEO_LABEL" description="TPL_ASTROID_BACKGROUND_VIDEO_DESC"/>

            <field ngShow="background_setting =='gradient'" description="ASTROID_SELECT_BACKGROUND_COLOR_DESC" name="background_gradient" type="astroidgradient" label="TPL_ASTROID_BG_GREDIENT_LABEL"/>
             
            
            <field name="custom_colors" type="astroidtext" astroid-switch="true" default="0" label="ASTROID_ELEMENT_CUSTOM_COLORS_LABEL"  />
            
            <field ngShow="custom_colors!=0" name="text_color" type="astroidcolor" label="TPL_ASTROID_TEXT_COLOR_LABEL" />
            <field ngShow="custom_colors!=0" name="link_color" type="astroidcolor" label="TPL_ASTROID_LINK_COLOR_LABEL" />
            <field ngShow="custom_colors!=0" name="link_hover_color" type="astroidcolor" label="TPL_ASTROID_LINK_HOVER_COLOR_LABEL" />
            <field name="spacing_settings" type="astroidheading" title="ASTROID_ELEMENT_HEAD_SPACING_LABEL" />
            <field name="margin" type="astroidspacing" label="Margin" />
            <field name="padding" type="astroidspacing" label="Padding" />
         </fieldset>
         <fieldset name="responsive-settings" label="ASTROID_ELEMENT_HEAD_RESPONSIVE_SETTINGS_LABEL" addfieldpath="/libraries/astroid/framework/fields">
            <field default="" name="responsive" type="astroidresponsive" label=""/>
            <field name="column_order_xl" type="astroidlist" default="0" label="ASTROID_EXTRA_LARGE_COLUMN_ORDER_LABEL">
               <option value="0">JDEFAULT</option>
               <option value="1">1</option>
               <option value="2">2</option>
               <option value="3">3</option>
               <option value="4">4</option>
               <option value="5">5</option>
               <option value="6">6</option>
               <option value="7">7</option>
               <option value="8">8</option>
               <option value="9">9</option>
               <option value="10">10</option>
               <option value="11">11</option>
               <option value="12">12</option>
            </field>
            <field name="column_order_lg" type="astroidlist" default="0" label="ASTROID_LARGE_COLUMN_ORDER_LABEL">
               <option value="0">JDEFAULT</option>
               <option value="1">1</option>
               <option value="2">2</option>
               <option value="3">3</option>
               <option value="4">4</option>
               <option value="5">5</option>
               <option value="6">6</option>
               <option value="7">7</option>
               <option value="8">8</option>
               <option value="9">9</option>
               <option value="10">10</option>
               <option value="11">11</option>
               <option value="12">12</option>
            </field>
            <field name="column_order_md" type="astroidlist" default="0" label="ASTROID_MEDIUM_COLUMN_ORDER_LABEL">
               <option value="0">JDEFAULT</option>
               <option value="1">1</option>
               <option value="2">2</option>
               <option value="3">3</option>
               <option value="4">4</option>
               <option value="5">5</option>
               <option value="6">6</option>
               <option value="7">7</option>
               <option value="8">8</option>
               <option value="9">9</option>
               <option value="10">10</option>
               <option value="11">11</option>
               <option value="12">12</option>
            </field>
            <field name="column_order_sm" type="astroidlist" default="0" label="ASTROID_SMALL_COLUMN_ORDER_LABEL">
               <option value="0">JDEFAULT</option>
               <option value="1">1</option>
               <option value="2">2</option>
               <option value="3">3</option>
               <option value="4">4</option>
               <option value="5">5</option>
               <option value="6">6</option>
               <option value="7">7</option>
               <option value="8">8</option>
               <option value="9">9</option>
               <option value="10">10</option>
               <option value="11">11</option>
               <option value="12">12</option>
            </field>
            <field name="column_order_xs" type="astroidlist" default="0" label="ASTROID_EXTRA_SMALL_COLUMN_ORDER_LABEL">
               <option value="0">JDEFAULT</option>
               <option value="1">1</option>
               <option value="2">2</option>
               <option value="3">3</option>
               <option value="4">4</option>
               <option value="5">5</option>
               <option value="6">6</option>
               <option value="7">7</option>
               <option value="8">8</option>
               <option value="9">9</option>
               <option value="10">10</option>
               <option value="11">11</option>
               <option value="12">12</option>
            </field>
         </fieldset>
      </fields>
   </form>
</element>