<?php

namespace YOOtheme;

return [
    'name' => 'row',
    'title' => 'Row',
    'container' => true,
    'width' => 500,
    'updates' => __DIR__ . '/updates.php',
    'templates' => [
        'render' => __DIR__ . '/templates/template.php',
        'content' => __DIR__ . '/templates/content.php',
    ],
    'transforms' => [
        'render' => function ($node, $params) {
            $node->props['parent'] = $params['parent']->type;
        },
    ],
    'fields' => [
        'layout' => [
            'label' => 'Layout',
            'type' => 'select-img',
            'title' => 'Select a grid layout',
            'options' => [
                '' => [
                    'label' => 'Whole',
                    'src' => '${url:images/whole.svg}',
                ],
                '1-2,1-2' => [
                    'label' => 'Halves',
                    'src' => '${url:images/halves.svg}',
                ],
                '1-3,1-3,1-3' => [
                    'label' => 'Thirds',
                    'src' => '${url:images/thirds.svg}',
                ],
                '1-4,1-4,1-4,1-4|1-2,1-2,1-2,1-2' => [
                    'label' => 'Quarters',
                    'src' => '${url:images/quarters.svg}',
                ],
                '1-5,1-5,1-5,1-5,1-5|1-2,1-2,1-3,1-3,1-3' => [
                    'label' => 'Fifths',
                    'src' => '${url:images/fifths.svg}',
                ],
                '1-6,1-6,1-6,1-6,1-6,1-6|1-3,1-3,1-3,1-3,1-3,1-3' => [
                    'label' => 'Sixths',
                    'src' => '${url:images/sixths.svg}',
                ],
                '2-3,1-3' => [
                    'label' => 'Thirds 2-1',
                    'src' => '${url:images/thirds-2-1.svg}',
                ],
                '1-3,2-3' => [
                    'label' => 'Thirds 1-2',
                    'src' => '${url:images/thirds-1-2.svg}',
                ],
                '3-4,1-4' => [
                    'label' => 'Quarters 3-1',
                    'src' => '${url:images/quarters-3-1.svg}',
                ],
                '1-4,3-4' => [
                    'label' => 'Quarters 1-3',
                    'src' => '${url:images/quarters-1-3.svg}',
                ],
                '1-2,1-4,1-4|1-1,1-2,1-2' => [
                    'label' => 'Quarters 2-1-1',
                    'src' => '${url:images/quarters-2-1-1.svg}',
                ],
                '1-4,1-4,1-2|1-2,1-2,1-1' => [
                    'label' => 'Quarters 1-1-2',
                    'src' => '${url:images/quarters-1-1-2.svg}',
                ],
                '1-4,1-2,1-4' => [
                    'label' => 'Quarters 1-2-1',
                    'src' => '${url:images/quarters-1-2-1.svg}',
                ],
                '2-5,3-5' => [
                    'label' => 'Fifths 2-3',
                    'src' => '${url:images/fifths-2-3.svg}',
                ],
                '3-5,2-5' => [
                    'label' => 'Fifths 3-2',
                    'src' => '${url:images/fifths-3-2.svg}',
                ],
                '1-5,4-5' => [
                    'label' => 'Fifths 1-4',
                    'src' => '${url:images/fifths-1-4.svg}',
                ],
                '4-5,1-5' => [
                    'label' => 'Fifths 4-1',
                    'src' => '${url:images/fifths-4-1.svg}',
                ],
                '3-5,1-5,1-5|1-1,1-2,1-2' => [
                    'label' => 'Fifths 3-1-1',
                    'src' => '${url:images/fifths-3-1-1.svg}',
                ],
                '1-5,1-5,3-5|1-2,1-2,1-1' => [
                    'label' => 'Fifths 1-1-3',
                    'src' => '${url:images/fifths-1-1-3.svg}',
                ],
                '1-5,3-5,1-5' => [
                    'label' => 'Fifths 1-3-1',
                    'src' => '${url:images/fifths-1-3-1.svg}',
                ],
                '2-5,1-5,1-5,1-5|1-1,1-3,1-3,1-3' => [
                    'label' => 'Fifths 2-1-1-1',
                    'src' => '${url:images/fifths-2-1-1-1.svg}',
                ],
                '1-5,1-5,1-5,2-5|1-3,1-3,1-3,1-1' => [
                    'label' => 'Fifths 1-1-1-2',
                    'src' => '${url:images/fifths-1-1-1-2.svg}',
                ],
                '1-6,5-6|1-5,4-5' => [
                    'label' => 'Sixths 1-5',
                    'src' => '${url:images/sixths-1-5.svg}',
                ],
                '5-6,1-6|4-5,1-5' => [
                    'label' => 'Sixths 5-1',
                    'src' => '${url:images/sixths-5-1.svg}',
                ],
                'large,expand' => [
                    'label' => 'Fixed-Left',
                    'src' => '${url:images/fixed-left.svg}',
                ],
                'expand,large' => [
                    'label' => 'Fixed-Right',
                    'src' => '${url:images/fixed-right.svg}',
                ],
                'expand,large,expand' => [
                    'label' => 'Fixed-Inner',
                    'src' => '${url:images/fixed-inner.svg}',
                ],
                'large,expand,large' => [
                    'label' => 'Fixed-Outer',
                    'src' => '${url:images/fixed-outer.svg}',
                ],
            ],
        ],
        '_layout' => [
            'text' => 'Edit Layout',
            'description' =>
                'Customize the column widths of the selected layout and set the column order. Changing the layout will reset all customizations.',
            'type' => 'button-panel',
            'panel' => 'builder-row-layout',
        ],
        'columns' => [
            'label' => 'Columns',
            'description' =>
                'Define a background style or an image of a column and set the vertical alignment for its content.',
            'type' => 'children',
        ],
        'column_gap' => [
            'label' => 'Column Gap',
            'description' => 'Set the size of the gap between the grid columns.',
            'type' => 'select',
            'options' => [
                'Small' => 'small',
                'Medium' => 'medium',
                'Default' => '',
                'Large' => 'large',
                'None' => 'collapse',
            ],
        ],
        'row_gap' => [
            'label' => 'Row Gap',
            'description' => 'Set the size of the gap between the grid rows.',
            'type' => 'select',
            'options' => [
                'Small' => 'small',
                'Medium' => 'medium',
                'Default' => '',
                'Large' => 'large',
                'None' => 'collapse',
            ],
        ],
        'divider' => [
            'label' => 'Divider',
            'description' => 'Show a divider between grid columns.',
            'type' => 'checkbox',
            'text' => 'Show dividers',
            'enable' => 'column_gap != \'collapse\' && row_gap != \'collapse\'',
        ],
        'alignment' => [
            'label' => 'Alignment',
            'description' =>
                'Expand columns equally to always fill remaining space within the row, center them or align them to the left.',
            'type' => 'select',
            'options' => [
                'Justify' => '',
                'Left' => 'left',
                'Center' => 'center',
            ],
        ],
        'width' => [
            'label' => 'Max Width',
            'type' => 'select',
            'options' => [
                'Default' => 'default',
                'X-Small' => 'xsmall',
                'Small' => 'small',
                'Large' => 'large',
                'X-Large' => 'xlarge',
                'Expand' => 'expand',
                'None' => '',
            ],
        ],
        'padding_remove_horizontal' => [
            'description' =>
                'Set the maximum content width. Note: The section may already have a maximum width, which you cannot exceed.',
            'type' => 'checkbox',
            'text' => 'Remove horizontal padding',
            'enable' => 'width && width != \'expand\'',
        ],
        'width_expand' => [
            'label' => 'Expand One Side',
            'description' =>
                'Expand the width of one side to the left or right while the other side keeps within the constraints of the max width.',
            'type' => 'select',
            'options' => [
                'Don\'t expand' => '',
                'To left' => 'left',
                'To right' => 'right',
            ],
            'enable' => 'width && width != \'expand\'',
        ],
        'height' => [
            'type' => 'select',
            'options' => [
                'None' => '',
                'Pixels' => 'pixels',
                'Viewport' => 'viewport',
            ],
        ],
        'height_viewport' => [
            'type' => 'number',
            'attrs' => [
                'placeholder' => '100',
                'min' => 0,
                'step' => 10,
            ],
            'enable' => 'height',
        ],
        'height_viewport_offset' => [
            'description' =>
                'Set a fixed height for all columns. They will keep their height when stacking. Optionally, subtract the header height to fill the first visible viewport.',
            'type' => 'checkbox',
            'text' => 'Subtract height above row',
            'enable' => 'height == \'viewport\' && (height_viewport || 0) <= 100',
        ],
        'margin_top' => [
            'label' => 'Margin Top',
            'description' => 'Set the top margin.',
            'type' => 'select',
            'options' => [
                'Keep existing' => '',
                'Small' => 'small',
                'Default' => 'default',
                'Medium' => 'medium',
                'Large' => 'large',
                'X-Large' => 'xlarge',
                'Remove' => 'remove',
            ],
        ],
        'margin_bottom' => [
            'label' => 'Margin Bottom',
            'description' => 'Set the bottom margin.',
            'type' => 'select',
            'options' => [
                'Same as top' => '',
                'Small' => 'small',
                'Default' => 'default',
                'Medium' => 'medium',
                'Large' => 'large',
                'X-Large' => 'xlarge',
                'Remove' => 'remove',
            ],
        ],
        'html_element' => '${builder.html_element}',
        'parallax' => [
            'label' => 'Column Parallax',
            'description' =>
                'Set a parallax animation to move columns with different heights until they justify at the bottom. Mind that this disables the vertical alignment of elements in the columns.',
            'type' => 'checkbox',
            'text' => 'Justify columns at the bottom',
        ],
        'parallax_start' => [
            'label' => 'Start',
            'enable' => 'parallax',
        ],
        'parallax_end' => [
            'label' => 'End',
            'enable' => 'parallax',
        ],
        'status' => [
            'label' => 'Status',
            'description' => 'Disable the row and publish it later.',
            'type' => 'checkbox',
            'text' => 'Disable row',
            'attrs' => [
                'true-value' => 'disabled',
                'false-value' => '',
            ],
        ],
        'source' => '${builder.source}',
        'id' => '${builder.id}',
        'class' => '${builder.cls}',
        'attributes' => '${builder.attrs}',
        'css' => [
            'label' => 'CSS',
            'description' =>
                'Enter your own custom CSS. The following selectors will be prefixed automatically for this element: <code>.el-row</code>',
            'type' => 'editor',
            'editor' => 'code',
            'mode' => 'css',
            'attrs' => [
                'debounce' => 500,
                'hints' => ['.el-row'],
            ],
            'source' => true,
        ],
    ],
    'fieldset' => [
        'default' => [
            'type' => 'tabs',
            'fields' => [
                [
                    'title' => 'Settings',
                    'fields' => [
                        'layout',
                        '_layout',
                        'columns',
                        'column_gap',
                        'row_gap',
                        'divider',
                        'alignment',
                        'width',
                        'padding_remove_horizontal',
                        'width_expand',
                        [
                            'label' => 'Column Height',
                            'name' => '_height',
                            'type' => 'grid',
                            'width' => '3-4,1-4',
                            'gap' => 'small',
                            'fields' => ['height', 'height_viewport'],
                        ],
                        'height_viewport_offset',
                        'margin_top',
                        'margin_bottom',
                        'html_element',
                        'parallax',
                        [
                            'description' =>
                                'The animation starts when the row enters the viewport and ends when it leaves the viewport. Optionally, set a start and end offset, e.g. <code>100px</code>, <code>50vh</code> or <code>50vh + 50%</code>. Percent relates to the row\'s height.',
                            'name' => '_parallax',
                            'type' => 'grid',
                            'width' => '1-2',
                            'fields' => ['parallax_start', 'parallax_end'],
                        ],
                    ],
                ],
                [
                    'title' => 'Advanced',
                    'fields' => ['status', 'source', 'id', 'class', 'attributes', 'css'],
                ],
            ],
        ],
    ],
    'panels' => [
        'builder-row-layout' => [
            'title' => 'Column Layout',
            'width' => 500,
            'fields' => [
                [
                    'label' => 'Column 1',
                    'type' => 'group',
                    'divider' => true,
                    'fields' => [
                        [
                            'label' => 'Phone Portrait',
                            'description' =>
                                'Set the column width for each breakpoint. Mix fraction widths or combine fixed widths with the <i>Expand</i> value. If no value is selected, the column width of the next smaller screen size is applied. The combination of widths should always take the full width.',
                            'type' => 'child-prop',
                            'index' => 0,
                            'field' => [
                                'name' => 'width_default',
                                'type' => 'select',
                                'options' => '${builder.column_width_options_default}',
                            ],
                        ],
                        [
                            'label' => 'Phone Landscape',
                            'description' =>
                                'Set the column width for each breakpoint. Mix fraction widths or combine fixed widths with the <i>Expand</i> value. If no value is selected, the column width of the next smaller screen size is applied. The combination of widths should always take the full width.',
                            'type' => 'child-prop',
                            'index' => 0,
                            'field' => [
                                'name' => 'width_small',
                                'type' => 'select',
                                'options' => '${builder.column_width_options}',
                            ],
                        ],
                        [
                            'label' => 'Tablet Landscape',
                            'description' =>
                                'Set the column width for each breakpoint. Mix fraction widths or combine fixed widths with the <i>Expand</i> value. If no value is selected, the column width of the next smaller screen size is applied. The combination of widths should always take the full width.',
                            'type' => 'child-prop',
                            'index' => 0,
                            'field' => [
                                'name' => 'width_medium',
                                'type' => 'select',
                                'options' => '${builder.column_width_options}',
                            ],
                        ],
                        [
                            'label' => 'Desktop',
                            'description' =>
                                'Set the column width for each breakpoint. Mix fraction widths or combine fixed widths with the <i>Expand</i> value. If no value is selected, the column width of the next smaller screen size is applied. The combination of widths should always take the full width.',
                            'type' => 'child-prop',
                            'index' => 0,
                            'field' => [
                                'name' => 'width_large',
                                'type' => 'select',
                                'options' => '${builder.column_width_options}',
                            ],
                        ],
                        [
                            'label' => 'Large Screen',
                            'description' =>
                                'Set the column width for each breakpoint. Mix fraction widths or combine fixed widths with the <i>Expand</i> value. If no value is selected, the column width of the next smaller screen size is applied. The combination of widths should always take the full width.',
                            'type' => 'child-prop',
                            'index' => 0,
                            'field' => [
                                'name' => 'width_xlarge',
                                'type' => 'select',
                                'options' => '${builder.column_width_options}',
                            ],
                        ],
                        [
                            'label' => 'Order First',
                            'type' => 'child-prop',
                            'description' =>
                                'Select the breakpoint from which the column will start to appear before other columns. On smaller screen sizes, the column will appear in the natural order.',
                            'index' => 0,
                            'field' => [
                                'name' => 'order_first',
                                'type' => 'select',
                                'options' => '${builder.column_order_first_options}',
                            ],
                        ],
                    ],
                ],
                [
                    'label' => 'Column 2',
                    'type' => 'group',
                    'divider' => true,
                    'fields' => [
                        [
                            'label' => 'Phone Portrait',
                            'description' =>
                                'Set the column width for each breakpoint. Mix fraction widths or combine fixed widths with the <i>Expand</i> value. If no value is selected, the column width of the next smaller screen size is applied. The combination of widths should always take the full width.',
                            'type' => 'child-prop',
                            'index' => 1,
                            'field' => [
                                'name' => 'width_default',
                                'type' => 'select',
                                'options' => '${builder.column_width_options_default}',
                            ],
                        ],
                        [
                            'label' => 'Phone Landscape',
                            'description' =>
                                'Set the column width for each breakpoint. Mix fraction widths or combine fixed widths with the <i>Expand</i> value. If no value is selected, the column width of the next smaller screen size is applied. The combination of widths should always take the full width.',
                            'type' => 'child-prop',
                            'index' => 1,
                            'field' => [
                                'name' => 'width_small',
                                'type' => 'select',
                                'options' => '${builder.column_width_options}',
                            ],
                        ],
                        [
                            'label' => 'Tablet Landscape',
                            'description' =>
                                'Set the column width for each breakpoint. Mix fraction widths or combine fixed widths with the <i>Expand</i> value. If no value is selected, the column width of the next smaller screen size is applied. The combination of widths should always take the full width.',
                            'type' => 'child-prop',
                            'index' => 1,
                            'field' => [
                                'name' => 'width_medium',
                                'type' => 'select',
                                'options' => '${builder.column_width_options}',
                            ],
                        ],
                        [
                            'label' => 'Desktop',
                            'description' =>
                                'Set the column width for each breakpoint. Mix fraction widths or combine fixed widths with the <i>Expand</i> value. If no value is selected, the column width of the next smaller screen size is applied. The combination of widths should always take the full width.',
                            'type' => 'child-prop',
                            'index' => 1,
                            'field' => [
                                'name' => 'width_large',
                                'type' => 'select',
                                'options' => '${builder.column_width_options}',
                            ],
                        ],
                        [
                            'label' => 'Large Screen',
                            'description' =>
                                'Set the column width for each breakpoint. Mix fraction widths or combine fixed widths with the <i>Expand</i> value. If no value is selected, the column width of the next smaller screen size is applied. The combination of widths should always take the full width.',
                            'type' => 'child-prop',
                            'index' => 1,
                            'field' => [
                                'name' => 'width_xlarge',
                                'type' => 'select',
                                'options' => '${builder.column_width_options}',
                            ],
                        ],
                        [
                            'label' => 'Order First',
                            'description' =>
                                'Select the breakpoint from which the column will start to appear before other columns. On smaller screen sizes, the column will appear in the natural order.',
                            'type' => 'child-prop',
                            'index' => 1,
                            'field' => [
                                'name' => 'order_first',
                                'type' => 'select',
                                'options' => '${builder.column_order_first_options}',
                            ],
                        ],
                    ],
                    'show' => 'this.node.children.length > 1',
                ],
                [
                    'label' => 'Column 3',
                    'type' => 'group',
                    'divider' => true,
                    'fields' => [
                        [
                            'label' => 'Phone Portrait',
                            'description' =>
                                'Set the column width for each breakpoint. Mix fraction widths or combine fixed widths with the <i>Expand</i> value. If no value is selected, the column width of the next smaller screen size is applied. The combination of widths should always take the full width.',
                            'type' => 'child-prop',
                            'index' => 2,
                            'field' => [
                                'name' => 'width_default',
                                'type' => 'select',
                                'options' => '${builder.column_width_options_default}',
                            ],
                        ],
                        [
                            'label' => 'Phone Landscape',
                            'description' =>
                                'Set the column width for each breakpoint. Mix fraction widths or combine fixed widths with the <i>Expand</i> value. If no value is selected, the column width of the next smaller screen size is applied. The combination of widths should always take the full width.',
                            'type' => 'child-prop',
                            'index' => 2,
                            'field' => [
                                'name' => 'width_small',
                                'type' => 'select',
                                'options' => '${builder.column_width_options}',
                            ],
                        ],
                        [
                            'label' => 'Tablet Landscape',
                            'description' =>
                                'Set the column width for each breakpoint. Mix fraction widths or combine fixed widths with the <i>Expand</i> value. If no value is selected, the column width of the next smaller screen size is applied. The combination of widths should always take the full width.',
                            'type' => 'child-prop',
                            'index' => 2,
                            'field' => [
                                'name' => 'width_medium',
                                'type' => 'select',
                                'options' => '${builder.column_width_options}',
                            ],
                        ],
                        [
                            'label' => 'Desktop',
                            'description' =>
                                'Set the column width for each breakpoint. Mix fraction widths or combine fixed widths with the <i>Expand</i> value. If no value is selected, the column width of the next smaller screen size is applied. The combination of widths should always take the full width.',
                            'type' => 'child-prop',
                            'index' => 2,
                            'field' => [
                                'name' => 'width_large',
                                'type' => 'select',
                                'options' => '${builder.column_width_options}',
                            ],
                        ],
                        [
                            'label' => 'Large Screen',
                            'description' =>
                                'Set the column width for each breakpoint. Mix fraction widths or combine fixed widths with the <i>Expand</i> value. If no value is selected, the column width of the next smaller screen size is applied. The combination of widths should always take the full width.',
                            'type' => 'child-prop',
                            'index' => 2,
                            'field' => [
                                'name' => 'width_xlarge',
                                'type' => 'select',
                                'options' => '${builder.column_width_options}',
                            ],
                        ],
                        [
                            'label' => 'Order First',
                            'description' =>
                                'Select the breakpoint from which the column will start to appear before other columns. On smaller screen sizes, the column will appear in the natural order.',
                            'type' => 'child-prop',
                            'index' => 2,
                            'field' => [
                                'name' => 'order_first',
                                'type' => 'select',
                                'options' => '${builder.column_order_first_options}',
                            ],
                        ],
                    ],
                    'show' => 'this.node.children.length > 2',
                ],
                [
                    'label' => 'Column 4',
                    'type' => 'group',
                    'divider' => true,
                    'fields' => [
                        [
                            'label' => 'Phone Portrait',
                            'description' =>
                                'Set the column width for each breakpoint. Mix fraction widths or combine fixed widths with the <i>Expand</i> value. If no value is selected, the column width of the next smaller screen size is applied. The combination of widths should always take the full width.',
                            'type' => 'child-prop',
                            'index' => 3,
                            'field' => [
                                'name' => 'width_default',
                                'type' => 'select',
                                'options' => '${builder.column_width_options_default}',
                            ],
                        ],
                        [
                            'label' => 'Phone Landscape',
                            'description' =>
                                'Set the column width for each breakpoint. Mix fraction widths or combine fixed widths with the <i>Expand</i> value. If no value is selected, the column width of the next smaller screen size is applied. The combination of widths should always take the full width.',
                            'type' => 'child-prop',
                            'index' => 3,
                            'field' => [
                                'name' => 'width_small',
                                'type' => 'select',
                                'options' => '${builder.column_width_options}',
                            ],
                        ],
                        [
                            'label' => 'Tablet Landscape',
                            'description' =>
                                'Set the column width for each breakpoint. Mix fraction widths or combine fixed widths with the <i>Expand</i> value. If no value is selected, the column width of the next smaller screen size is applied. The combination of widths should always take the full width.',
                            'type' => 'child-prop',
                            'index' => 3,
                            'field' => [
                                'name' => 'width_medium',
                                'type' => 'select',
                                'options' => '${builder.column_width_options}',
                            ],
                        ],
                        [
                            'label' => 'Desktop',
                            'description' =>
                                'Set the column width for each breakpoint. Mix fraction widths or combine fixed widths with the <i>Expand</i> value. If no value is selected, the column width of the next smaller screen size is applied. The combination of widths should always take the full width.',
                            'type' => 'child-prop',
                            'index' => 3,
                            'field' => [
                                'name' => 'width_large',
                                'type' => 'select',
                                'options' => '${builder.column_width_options}',
                            ],
                        ],
                        [
                            'label' => 'Large Screen',
                            'description' =>
                                'Set the column width for each breakpoint. Mix fraction widths or combine fixed widths with the <i>Expand</i> value. If no value is selected, the column width of the next smaller screen size is applied. The combination of widths should always take the full width.',
                            'type' => 'child-prop',
                            'index' => 3,
                            'field' => [
                                'name' => 'width_xlarge',
                                'type' => 'select',
                                'options' => '${builder.column_width_options}',
                            ],
                        ],
                        [
                            'label' => 'Order First',
                            'description' =>
                                'Select the breakpoint from which the column will start to appear before other columns. On smaller screen sizes, the column will appear in the natural order.',
                            'type' => 'child-prop',
                            'index' => 3,
                            'field' => [
                                'name' => 'order_first',
                                'type' => 'select',
                                'options' => '${builder.column_order_first_options}',
                            ],
                        ],
                    ],
                    'show' => 'this.node.children.length > 3',
                ],
                [
                    'label' => 'Column 5',
                    'type' => 'group',
                    'divider' => true,
                    'fields' => [
                        [
                            'label' => 'Phone Portrait',
                            'description' =>
                                'Set the column width for each breakpoint. Mix fraction widths or combine fixed widths with the <i>Expand</i> value. If no value is selected, the column width of the next smaller screen size is applied. The combination of widths should always take the full width.',
                            'type' => 'child-prop',
                            'index' => 4,
                            'field' => [
                                'name' => 'width_default',
                                'type' => 'select',
                                'options' => '${builder.column_width_options_default}',
                            ],
                        ],
                        [
                            'label' => 'Phone Landscape',
                            'description' =>
                                'Set the column width for each breakpoint. Mix fraction widths or combine fixed widths with the <i>Expand</i> value. If no value is selected, the column width of the next smaller screen size is applied. The combination of widths should always take the full width.',
                            'type' => 'child-prop',
                            'index' => 4,
                            'field' => [
                                'name' => 'width_small',
                                'type' => 'select',
                                'options' => '${builder.column_width_options}',
                            ],
                        ],
                        [
                            'label' => 'Tablet Landscape',
                            'description' =>
                                'Set the column width for each breakpoint. Mix fraction widths or combine fixed widths with the <i>Expand</i> value. If no value is selected, the column width of the next smaller screen size is applied. The combination of widths should always take the full width.',
                            'type' => 'child-prop',
                            'index' => 4,
                            'field' => [
                                'name' => 'width_medium',
                                'type' => 'select',
                                'options' => '${builder.column_width_options}',
                            ],
                        ],
                        [
                            'label' => 'Desktop',
                            'description' =>
                                'Set the column width for each breakpoint. Mix fraction widths or combine fixed widths with the <i>Expand</i> value. If no value is selected, the column width of the next smaller screen size is applied. The combination of widths should always take the full width.',
                            'type' => 'child-prop',
                            'index' => 4,
                            'field' => [
                                'name' => 'width_large',
                                'type' => 'select',
                                'options' => '${builder.column_width_options}',
                            ],
                        ],
                        [
                            'label' => 'Large Screen',
                            'description' =>
                                'Set the column width for each breakpoint. Mix fraction widths or combine fixed widths with the <i>Expand</i> value. If no value is selected, the column width of the next smaller screen size is applied. The combination of widths should always take the full width.',
                            'type' => 'child-prop',
                            'index' => 4,
                            'field' => [
                                'name' => 'width_xlarge',
                                'type' => 'select',
                                'options' => '${builder.column_width_options}',
                            ],
                        ],
                        [
                            'label' => 'Order First',
                            'description' =>
                                'Select the breakpoint from which the column will start to appear before other columns. On smaller screen sizes, the column will appear in the natural order.',
                            'type' => 'child-prop',
                            'index' => 4,
                            'field' => [
                                'name' => 'order_first',
                                'type' => 'select',
                                'options' => '${builder.column_order_first_options}',
                            ],
                        ],
                    ],
                    'show' => 'this.node.children.length > 4',
                ],
                [
                    'label' => 'Column 6',
                    'type' => 'group',
                    'fields' => [
                        [
                            'label' => 'Phone Portrait',
                            'description' =>
                                'Set the column width for each breakpoint. Mix fraction widths or combine fixed widths with the <i>Expand</i> value. If no value is selected, the column width of the next smaller screen size is applied. The combination of widths should always take the full width.',
                            'type' => 'child-prop',
                            'index' => 5,
                            'field' => [
                                'name' => 'width_default',
                                'type' => 'select',
                                'options' => '${builder.column_width_options_default}',
                            ],
                        ],
                        [
                            'label' => 'Phone Landscape',
                            'description' =>
                                'Set the column width for each breakpoint. Mix fraction widths or combine fixed widths with the <i>Expand</i> value. If no value is selected, the column width of the next smaller screen size is applied. The combination of widths should always take the full width.',
                            'type' => 'child-prop',
                            'index' => 5,
                            'field' => [
                                'name' => 'width_small',
                                'type' => 'select',
                                'options' => '${builder.column_width_options}',
                            ],
                        ],
                        [
                            'label' => 'Tablet Landscape',
                            'description' =>
                                'Set the column width for each breakpoint. Mix fraction widths or combine fixed widths with the <i>Expand</i> value. If no value is selected, the column width of the next smaller screen size is applied. The combination of widths should always take the full width.',
                            'type' => 'child-prop',
                            'index' => 5,
                            'field' => [
                                'name' => 'width_medium',
                                'type' => 'select',
                                'options' => '${builder.column_width_options}',
                            ],
                        ],
                        [
                            'label' => 'Desktop',
                            'description' =>
                                'Set the column width for each breakpoint. Mix fraction widths or combine fixed widths with the <i>Expand</i> value. If no value is selected, the column width of the next smaller screen size is applied. The combination of widths should always take the full width.',
                            'type' => 'child-prop',
                            'index' => 5,
                            'field' => [
                                'name' => 'width_large',
                                'type' => 'select',
                                'options' => '${builder.column_width_options}',
                            ],
                        ],
                        [
                            'label' => 'Large Screen',
                            'description' =>
                                'Set the column width for each breakpoint. Mix fraction widths or combine fixed widths with the <i>Expand</i> value. If no value is selected, the column width of the next smaller screen size is applied. The combination of widths should always take the full width.',
                            'type' => 'child-prop',
                            'index' => 5,
                            'field' => [
                                'name' => 'width_xlarge',
                                'type' => 'select',
                                'options' => '${builder.column_width_options}',
                            ],
                        ],
                        [
                            'label' => 'Order First',
                            'description' =>
                                'Select the breakpoint from which the column will start to appear before other columns. On smaller screen sizes, the column will appear in the natural order.',
                            'type' => 'child-prop',
                            'index' => 5,
                            'field' => [
                                'name' => 'order_first',
                                'type' => 'select',
                                'options' => '${builder.column_order_first_options}',
                            ],
                        ],
                    ],
                    'show' => 'this.node.children.length > 5',
                ],
            ],
        ],
    ],
];
