{
    "@import": "./element.php",
    "name": "overlay-slider_item",
    "title": "Item",
    "width": 500,
    "placeholder": {
        "props": {
            "image": "${url:~yootheme/theme/assets/images/element-image-placeholder.png}",
            "video": "",
            "title": "Title",
            "meta": "",
            "content": "",
            "hover_image": ""
        }
    },
    "templates": {
        "render": "./templates/template.php",
        "content": "./templates/content.php"
    },
    "fields": {
        "image": {
            "label": "Image",
            "type": "image",
            "source": true,
            "show": "!video",
            "altRef": "%name%_alt"
        },
        "video": {
            "label": "Video",
            "description": "Select a video file or enter a link from <a href=\"https://www.youtube.com\" target=\"_blank\">YouTube</a> or <a href=\"https://vimeo.com\" target=\"_blank\">Vimeo</a>.",
            "type": "video",
            "source": true,
            "show": "!image"
        },
        "_media": {
            "type": "button-panel",
            "panel": "builder-overlay-slider-item-media",
            "text": "Edit Settings",
            "show": "image || video"
        },
        "image_alt": {
            "label": "Image Alt",
            "source": true,
            "show": "image && !video"
        },
        "title": {
            "label": "Title",
            "source": true
        },
        "meta": {
            "label": "Meta",
            "source": true
        },
        "content": {
            "label": "Content",
            "type": "editor",
            "source": true
        },
        "link": "${builder.link}",
        "link_text": {
            "label": "Link Text",
            "description": "Set a different link text for this item.",
            "source": true,
            "enable": "link"
        },
        "link_aria_label": {
            "label": "Link ARIA Label",
            "description": "Set a different link ARIA label for this item.",
            "source": true,
            "enable": "link"
        },
        "hover_image": {
            "label": "Hover Image",
            "description": "Select an optional image that appears on hover.",
            "type": "image",
            "source": true
        },
        "item_element": "${builder.html_element_item}",
        "text_color": {
            "label": "Text Color",
            "description": "Set a different text color for this item.",
            "type": "select",
            "options": {
                "None": "",
                "Light": "light",
                "Dark": "dark"
            },
            "source": true
        },
        "text_color_hover": {
            "type": "checkbox",
            "text": "Inverse the text color on hover"
        },
        "image_focal_point": {
            "label": "Focal Point",
            "description": "Set a focal point to adjust the image focus when cropping.",
            "type": "select",
            "options": {
                "Top Left": "top-left",
                "Top Center": "top-center",
                "Top Right": "top-right",
                "Center Left": "center-left",
                "Center Center": "",
                "Center Right": "center-right",
                "Bottom Left": "bottom-left",
                "Bottom Center": "bottom-center",
                "Bottom Right": "bottom-right"
            },
            "source": true,
            "enable": "image"
        },
        "hover_image_focal_point": {
            "label": "Focal Point",
            "description": "Set a focal point to adjust the image focus when cropping.",
            "type": "select",
            "options": {
                "Top Left": "top-left",
                "Top Center": "top-center",
                "Top Right": "top-right",
                "Center Left": "center-left",
                "Center Center": "",
                "Center Right": "center-right",
                "Bottom Left": "bottom-left",
                "Bottom Center": "bottom-center",
                "Bottom Right": "bottom-right"
            },
            "source": true,
            "enable": "hover_image"
        },
        "status": "${builder.statusItem}",
        "source": "${builder.source}"
    },
    "fieldset": {
        "default": {
            "type": "tabs",
            "fields": [
                {
                    "title": "Content",
                    "fields": [
                        "image",
                        "video",
                        "_media",
                        "image_alt",
                        "title",
                        "meta",
                        "content",
                        "link",
                        "link_text",
                        "link_aria_label",
                        "hover_image"
                    ]
                },
                {
                    "title": "Settings",
                    "fields": [
                        {
                            "label": "Item",
                            "type": "group",
                            "divider": true,
                            "fields": [
                                "item_element"
                            ]
                        },
                        {
                            "label": "Overlay",
                            "type": "group",
                            "divider": true,
                            "fields": ["text_color", "text_color_hover"]
                        },
                        {
                            "label": "Image",
                            "type": "group",
                            "divider": true,
                            "fields": ["image_focal_point"]
                        },
                        {
                            "label": "Hover Image",
                            "type": "group",
                            "fields": ["hover_image_focal_point"]
                        }
                    ]
                },
                "${builder.advancedItem}"
            ]
        }
    },
    "panels": {
        "builder-overlay-slider-item-media": {
            "title": "Image/Video",
            "width": 500,
            "fields": {
                "media_background": {
                    "label": "Background Color",
                    "description": "Use the background color in combination with blend modes.",
                    "type": "color"
                },
                "media_blend_mode": {
                    "label": "Blend Mode",
                    "description": "Determine how the image or video will blend with the background color.",
                    "type": "select",
                    "options": {
                        "Normal": "",
                        "Multiply": "multiply",
                        "Screen": "screen",
                        "Overlay": "overlay",
                        "Darken": "darken",
                        "Lighten": "lighten",
                        "Color-dodge": "color-dodge",
                        "Color-burn": "color-burn",
                        "Hard-light": "hard-light",
                        "Soft-light": "soft-light",
                        "Difference": "difference",
                        "Exclusion": "exclusion",
                        "Hue": "hue",
                        "Saturation": "saturation",
                        "Color": "color",
                        "Luminosity": "luminosity"
                    },
                    "enable": "media_background"
                },
                "media_overlay": {
                    "label": "Overlay Color",
                    "description": "Set an additional transparent overlay to soften the image or video.",
                    "type": "color"
                }
            },
            "fieldset": {
                "default": {
                    "fields": ["media_background", "media_blend_mode", "media_overlay"]
                }
            }
        }
    }
}