<?xml version="1.0" encoding="UTF-8"?>
<form>

    <field name="section_id" type="text" label="Section Id" />

    <field name="section_class" type="text" label="Section Class" />

    <field name="section_bg" type="list" label="Section Background">
        <option value="">JNONE</option>
        <option value="text-bg-primary">Primary</option>
        <option value="text-bg-secondary">Secondary</option>
        <option value="text-bg-light">Light</option>
        <option value="text-bg-dark">Dark</option>
        <option value="text-bg-info">Info</option>
        <option value="text-bg-success">Success</option>
        <option value="text-bg-danger">Danger</option>
        <option value="text-bg-warning">Warning</option>
        <option value="bg-black">Black</option>
        <option value="bg-white">White</option>
        <option value="bg-transparent">Transparent</option>
    </field>

    <field name="bg_gradient" type="list" label="Background Gradient">
        <option value="">JNONE</option>
        <option value="bg-gradient">JYES</option>
    </field>

    <field name="bg_opacity" type="list" label="Background Opacity">
        <option value="">JNONE</option>
        <option value="bg-opacity-75">75%</option>
        <option value="bg-opacity-50">50%</option>
        <option value="bg-opacity-25">25%</option>
        <option value="bg-opacity-10">10%</option>
    </field>

    <field name="section_padding" type="list" label="Section Vertical Padding">
        <option value="">JNONE</option>
        <option value="py-0">Zero</option>
        <option value="py-1">Extra Small</option>
        <option value="py-2">Small</option>
        <option value="py-3">Medium</option>
        <option value="py-4">Large</option>
        <option value="py-5">Extra Large</option>
    </field>

    <field name="section_margin" type="list" label="Section Vertical Margin">
        <option value="">JNONE</option>
        <option value="my-1">Top and Bottom Small</option>
        <option value="my-3">Top and Bottom Medium</option>
        <option value="my-5">Top and Bottom Large</option>
        <option value="mt-1">Top Small</option>
        <option value="mt-3">Top Medium</option>
        <option value="mt-5">Top Large</option>
        <option value="mb-1">Bottom Small</option>
        <option value="mb-3">Bottom Medium</option>
        <option value="mb-5">Bottom Large</option>
    </field>

    <field name="align" type="list" label="Horizontal Alignment">
        <option value="">JNONE</option>
        <option value="text-start">Left or Start</option>
        <option value="text-center">Center</option>
        <option value="text-end">Right or End</option>
    </field>

    <field name="bg_image" type="media" label="Background Image" preview="false" />

    <field name="bg_attach" type="list" label="Attachment" showon="bg_image!:">
        <option value="">JNONE</option>
        <option value="fixed">Fixed</option>
        <option value="scroll">Scroll</option>
    </field>

    <field name="bg_color" type="color" label="Background Color" showon="bg_image!:" />

    <field name="bg_blend" type="list" label="Blend Mode" showon="bg_image!:">
        <option value="">JNONE</option>
        <option value="normal">Normal (Default)</option>
        <option value="screen">Screen</option>
        <option value="multiply">Multiply</option>
        <option value="overlay">Overlay</option>
        <option value="darken">Darken</option>
        <option value="lighten">Lighten</option>
    </field>

</form>