{
    "type": "APL",
    "version": "1.1",
    "import": [
        {
            "name": "alexa-viewport-profiles",
            "version": "1.1.0"
        },
        {
            "name": "alexa-layouts",
            "version": "1.1.0"
        },
        {
            "name": "alexa-styles",
            "version": "1.1.0"
        }
    ],
    "resources": [
        {
            "description": "Background Image for Recipe Screen on Small Round Hubs",
            "when": "${@viewportProfile == @hubRoundSmall}",
            "strings": {
                "backgroundImg": "https://s3.amazonaws.com/ask-samples-resources/images/sauce-boss/sauceBoss-background-left-smHub.png"
            }
        },
        {
            "description": "Background Image for Recipe Screen on Landscape Hubs",
            "when": "${@viewportProfile == @hubLandscapeSmall || @viewportProfile == @hubLandscapeMedium || @viewportProfile == @hubLandscapeLarge}",
            "strings": {
                "backgroundImg": "https://s3.amazonaws.com/ask-samples-resources/images/sauce-boss/sauceBoss-background-left-Hub.png"
            }
        },
        {
            "description": "Background Image for Recipe Screen on XLarge Hubs (e.g TV)",
            "when": "${@viewportProfile == @tvLandscapeXLarge}",
            "strings": {
                "backgroundImg": "https://s3.amazonaws.com/ask-samples-resources/images/sauce-boss/sauceBoss-background-left-TV.png"
            }
        },
        {
            "description": "Skill Icon",
            "strings": {
                "skillIcon": "https://s3.amazonaws.com/ask-samples-resources/icons/sauce-boss-icon.png"
            }
        }
    ],
    "styles": {
        "karaokeStyle": {
            "extends": "textStyleKaraoke",
            "values": [
                {
                    "color": "@colorText"
                },
                {
                    "when": "${state.karaoke}",
                    "color": "rgba(91,197,250,1)"
                },
                {
                    "when": "${state.karaokeTarget}",
                    "color": "blue"
                }
            ]
          }
    },
    "mainTemplate": {
        "parameters": [
            "payload"
        ],
        "items": [
            {
                "type": "Container",
                "items": [
                    {
                        "description": "Set background Image",
                        "when": "${@viewportProfile != @hubRoundSmall}",
                        "type": "AlexaBackground",
                        "backgroundImageSource": "@backgroundImg"
                    },
                    {
                        "description": "Use sauce image as background from Small Round Hubs",
                        "when": "${@viewportProfile == @hubRoundSmall}",
                        "type": "AlexaBackground",
                        "backgroundImageSource": "${payload.sauceBossData.properties.sauceImg}",
                        "colorOverlay": true
                    },
                    {
                        "description": "Use Responsive Header accross all Hubs",
                        "type": "AlexaHeader",
                        "headerTitle": "${payload.sauceBossData.properties.headerTitle}",
                        "headerAttributionImage": "@skillIcon",
                        "headerBackButton": "${payload.sauceBossData.properties.headerBackButton}",
                        "headerDivider": true
                    },
                    {
                        "description": "Define a ScrollView to contain sauce instructions on Small Round Hubs",
                        "when": "${@viewportProfile == @hubRoundSmall}",
                        "type": "ScrollView",
                        "width": "100vw",
                        "height": "100vh",
                        "top": "5vh",
                        "paddingRight": 50,
                        "paddingLeft": 50,
                        "paddingBottom": 280,
                        "item": {
                            "type": "Text",
                            "id": "recipeText",
                            "style": "karaokeStyle",
                            "text": "${payload.sauceBossData.properties.sauceText}",
                            "speech": "${payload.sauceBossData.properties.sauceSpeech}",
                            "textAlign": "center",
                            "fontSize": "7vh",
                            "fontWeight": "300"
                        }
                    },
                    {
                        "description": "Define a Container to contain sauce image & instructions for Landscape Hubs",
                        "when": "${@viewportProfile != @hubRoundSmall}",
                        "type": "Container",
                        "direction": "row",
                        "width": "100vw",
                        "height": "65vh",
                        "top": "10vh",
                        "justifyContent": "center",
                        "items": [
                            {
                                "type": "Image",
                                "source": "${payload.sauceBossData.properties.sauceImg}",
                                "borderRadius": "50vh",
                                "width": "50vh",
                                "height": "50vh",
                                "scale": "best-fit"
                            },
                            {
                                "type": "ScrollView",
                                "paddingLeft": "5vw",
                                "width": "60vw",
                                "height": "60vh",
                                "item": {
                                    "type": "Text",
                                    "id": "recipeText",
                                    "style": "karaokeStyle",
                                    "text": "${payload.sauceBossData.properties.sauceText}",
                                    "speech": "${payload.sauceBossData.properties.sauceSpeech}",
                                    "fontSize": "6vh",
                                    "fontWeight": "300"
                                }
                            }
                        ]
                    },
                    {
                        "description": "Use Responsive Footer accross all Hubs",
                        "when": "${@viewportProfile != @hubRoundSmall}",
                        "type": "AlexaFooter",
                        "hintText": "${payload.sauceBossData.properties.hintText}"
                    }
                ]
            }
        ]
    }
}