{
    "@import": "./element.php",
    "name": "description_list",
    "title": "Description List",
    "icon": "${url:images/icon.svg}",
    "iconSmall": "${url:images/iconSmall.svg}",
    "element": true,
    "container": true,
    "width": 500,
    "defaults": {
        "show_title": true,
        "show_meta": true,
        "show_content": true,
        "show_link": true,
        "layout": "grid-2",
        "title_grid_width": "auto",
        "title_grid_column_gap": "small",
        "title_grid_row_gap": "small",
        "meta_style": "meta",
        "meta_align": "below-content"
    },
    "placeholder": {
        "children": [
            {"type": "description_list_item", "props": {}},
            {"type": "description_list_item", "props": {}},
            {"type": "description_list_item", "props": {}}
        ]
    },
    "templates": {
        "render": "./templates/template.php",
        "content": "./templates/content.php"
    },
    "fields": {
        "content": {
            "label": "Items",
            "type": "content-items",
            "item": "description_list_item"
        },
        "show_title": {
            "label": "Display",
            "type": "checkbox",
            "text": "Show the title"
        },
        "show_meta": {
            "type": "checkbox",
            "text": "Show the meta text"
        },
        "show_content": {
            "type": "checkbox",
            "text": "Show the content"
        },
        "show_link": {
            "description": "Show or hide content fields without the need to delete the content itself.",
            "type": "checkbox",
            "text": "Show the link"
        },
        "list_style": {
            "label": "Style",
            "description": "Select the list style and add larger padding between items.",
            "type": "select",
            "default": "",
            "options": {
                "None": "",
                "Divider": "divider",
                "Striped": "striped"
            }
        },
        "list_size": {
            "type": "checkbox",
            "text": "Larger padding"
        },
        "layout": {
            "label": "Layout",
            "description": "Define the layout of the title, meta and content.",
            "type": "select",
            "default": "",
            "options": {
                "2 Column Grid": "grid-2",
                "2 Column Grid (Meta only)": "grid-2-m",
                "Stacked": "stacked"
            }
        },
        "title_style": {
            "label": "Style",
            "description": "Select the title style and add an optional colon at the end of the title.",
            "type": "select",
            "default": "",
            "options": {
                "None": "",
                "Strong": "strong",
                "Small": "heading-small",
                "H1": "h1",
                "H2": "h2",
                "H3": "h3",
                "H4": "h4",
                "H5": "h5",
                "H6": "h6"
            },
            "enable": "show_title"
        },
        "title_colon": {
            "type": "checkbox",
            "text": "Add a colon",
            "enable": "show_title"
        },
        "title_font_family": {
            "label": "Font Family",
            "description": "Select an alternative font family.",
            "type": "select",
            "default": "",
            "options": {
                "None": "",
                "Default": "default",
                "Primary": "primary",
                "Secondary": "secondary",
                "Tertiary": "tertiary"
            },
            "enable": "show_title"
        },
        "title_color": {
            "label": "Color",
            "description": "Select the text color. If the Background option is selected, styles that don't apply a background image use the primary color instead.",
            "type": "select",
            "default": "",
            "options": {
                "None": "",
                "Muted": "muted",
                "Emphasis": "emphasis",
                "Primary": "primary",
                "Success": "success",
                "Warning": "warning",
                "Danger": "danger",
                "Background": "background"
            },
            "enable": "show_title"
        },
        "title_grid_width": {
            "label": "Grid Width",
            "description": "Define the width of the title within the grid.",
            "type": "select",
            "default": "",
            "options": {
                "Auto": "auto",
                "Small": "small",
                "Medium": "medium",
                "Expand": "expand"
            },
            "enable": "layout != 'stacked'"
        },
        "title_leader": {
            "type": "checkbox",
            "text": "Add a leader",
            "enable": "layout == 'grid-2-m' && title_grid_width == 'expand'"
        },
        "title_grid_column_gap": {
            "label": "Grid Column Gap",
            "description": "Set the size of the gap between the title and the content.",
            "type": "select",
            "options": {
                "Small": "small",
                "Medium": "medium",
                "Default": "",
                "Large": "large",
                "None": "collapse"
            },
            "enable": "layout != 'stacked'"
        },
        "title_grid_row_gap": {
            "label": "Grid Row Gap",
            "description": "Set the size of the gap if the grid items stack.",
            "type": "select",
            "options": {
                "Small": "small",
                "Medium": "medium",
                "Default": "",
                "Large": "large",
                "None": "collapse"
            },
            "enable": "layout != 'stacked'"
        },
        "title_grid_breakpoint": {
            "label": "Grid Breakpoint",
            "description": "Set the breakpoint from which grid items will stack.",
            "type": "select",
            "default": "",
            "options": {
                "Always": "",
                "Small (Phone Landscape)": "s",
                "Medium (Tablet Landscape)": "m",
                "Large (Desktop)": "l",
                "X-Large (Large Screens)": "xl"
            },
            "enable": "layout != 'stacked'"
        },
        "meta_style": {
            "label": "Style",
            "description": "Select a predefined meta text style, including color, size and font-family.",
            "type": "select",
            "options": {
                "None": "",
                "Meta": "meta",
                "H1": "h1",
                "H2": "h2",
                "H3": "h3",
                "H4": "h4",
                "H5": "h5",
                "H6": "h6"
            },
            "enable": "show_meta"
        },
        "meta_color": {
            "label": "Color",
            "description": "Select the text color.",
            "type": "select",
            "default": "",
            "options": {
                "None": "",
                "Muted": "muted",
                "Emphasis": "emphasis",
                "Primary": "primary",
                "Success": "success",
                "Warning": "warning",
                "Danger": "danger"
            },
            "enable": "show_meta"
        },
        "meta_align": {
            "label": "Alignment",
            "description": "Align the meta text.",
            "type": "select",
            "options": {
                "Above Title": "above-title",
                "Below Title": "below-title",
                "Above Content": "above-content",
                "Below Content": "below-content"
            },
            "enable": "show_meta && layout != 'grid-2-m'"
        },
        "content_style": {
            "label": "Style",
            "description": "Select a predefined text style, including color, size and font-family.",
            "type": "select",
            "default": "",
            "options": {
                "None": "",
                "Lead": "lead",
                "Meta": "meta"
            },
            "enable": "show_content"
        },
        "link_style": {
            "label": "Style",
            "description": "This option doesn't apply unless a URL has been added to the item. Only the item's content will be linked.",
            "type": "select",
            "default": "",
            "options": {
                "None": "",
                "Muted": "muted",
                "Reset": "reset"
            },
            "enable": "show_link"
        },
        "position": "${builder.position}",
        "position_left": "${builder.position_left}",
        "position_right": "${builder.position_right}",
        "position_top": "${builder.position_top}",
        "position_bottom": "${builder.position_bottom}",
        "position_z_index": "${builder.position_z_index}",
        "margin": "${builder.margin}",
        "margin_remove_top": "${builder.margin_remove_top}",
        "margin_remove_bottom": "${builder.margin_remove_bottom}",
        "maxwidth": "${builder.maxwidth}",
        "maxwidth_breakpoint": "${builder.maxwidth_breakpoint}",
        "block_align": "${builder.block_align}",
        "block_align_breakpoint": "${builder.block_align_breakpoint}",
        "block_align_fallback": "${builder.block_align_fallback}",
        "text_align": "${builder.text_align_justify}",
        "text_align_breakpoint": "${builder.text_align_breakpoint}",
        "text_align_fallback": "${builder.text_align_justify_fallback}",
        "animation": "${builder.animation}",
        "_parallax_button": "${builder._parallax_button}",
        "visibility": "${builder.visibility}",
        "name": "${builder.name}",
        "status": "${builder.status}",
        "id": "${builder.id}",
        "class": "${builder.cls}",
        "css": {
            "label": "CSS",
            "description": "Enter your own custom CSS. The following selectors will be prefixed automatically for this element: <code>.el-element</code>, <code>.el-item</code>, <code>.el-title</code>, <code>.el-meta</code>, <code>.el-content</code>",
            "type": "editor",
            "editor": "code",
            "mode": "css",
            "attrs": {
                "debounce": 500
            }
        }
    },
    "fieldset": {
        "default": {
            "type": "tabs",
            "fields": [
                {
                    "title": "Content",
                    "fields": [
                        "content",
                        "show_title",
                        "show_meta",
                        "show_content",
                        "show_link"
                    ]
                },
                {
                    "title": "Settings",
                    "fields": [
                        {
                            "label": "List",
                            "type": "group",
                            "divider": true,
                            "fields": [
                                "list_style",
                                "list_size",
                                "layout"
                            ]
                        },
                        {
                            "label": "Title",
                            "type": "group",
                            "divider": true,
                            "fields": [
                                "title_style",
                                "title_colon",
                                "title_font_family",
                                "title_color",
                                "title_grid_width",
                                "title_leader",
                                "title_grid_column_gap",
                                "title_grid_row_gap",
                                "title_grid_breakpoint"
                            ]
                        },
                        {
                            "label": "Meta",
                            "type": "group",
                            "divider": true,
                            "fields": [
                                "meta_style",
                                "meta_color",
                                "meta_align"
                            ]
                        },
                        {
                            "label": "Content",
                            "type": "group",
                            "divider": true,
                            "fields": [
                                "content_style"
                            ]
                        },
                        {
                            "label": "Link",
                            "type": "group",
                            "divider": true,
                            "fields": [
                                "link_style"
                            ]
                        },
                        {
                            "label": "General",
                            "type": "group",
                            "fields": [
                                "position",
                                "position_left",
                                "position_right",
                                "position_top",
                                "position_bottom",
                                "position_z_index",
                                "margin",
                                "margin_remove_top",
                                "margin_remove_bottom",
                                "maxwidth",
                                "maxwidth_breakpoint",
                                "block_align",
                                "block_align_breakpoint",
                                "block_align_fallback",
                                "text_align",
                                "text_align_breakpoint",
                                "text_align_fallback",
                                "animation",
                                "_parallax_button",
                                "visibility"
                            ]
                        }
                    ]
                },
                "${builder.advanced}"
            ]
        }
    }
}
