{
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "type": "AdaptiveCard",
    "version": "1.6",
    "body": [
        {
            "_comment": "Let's Focus prompt container for medium widget size",
            "type": "Container",
            "height": "stretch",
            "verticalContentAlignment": "Bottom",
            "$when": "${state == \"Neutral\" && $host.widgetSize==\"medium\"}",
            "items": [
                {
                    "_comment": "Let's Focus prompt for medium widget size",
                    "type": "TextBlock",
                    "$when": "${state == \"Neutral\" && $host.widgetSize==\"medium\"}",
                    "text": "${LetsFocusPrompt}",
                    "size": "ExtraLarge",
                    "weight": "Bolder",
                    "style": "heading",
                    "spacing": "None",
                    "horizontalAlignment": "Center",
                    "wrap": true
                }
            ]
        },
        {
            "_comment": "Neutral state container for small widget size and buttons for both small and medium size",
            "type": "Container",
            "height": "stretch",
            "$when": "${state == \"Neutral\"}",
            "items": [
                {
                    "_comment": "Let's Focus prompt spacing for small widget size",
                    "type": "Container",
                    "$when": "${$host.widgetSize==\"small\"}",
                    "minHeight": "7px"
                },
                {
                    "_comment": "Let's Focus prompt for small widget size",
                    "type": "TextBlock",
                    "$when": "${$host.widgetSize==\"small\"}",
                    "text": "${LetsFocusPrompt}",
                    "size": "Medium",
                    "weight": "Bolder",
                    "style": "heading",
                    "spacing": "None",
                    "horizontalAlignment": "Center"
                },
                {
                    "_comment": "Neutral state buttons",
                    "type": "ColumnSet",
                    "spacing": "Large",
                    "horizontalAlignment": "Center",
                    "columns": [
                        {
                            "comment": "Duration column - numeric up/down",
                            "type": "Column",
                            "width": "170px",
                            "minHeight": "32px",
                            "verticalContentAlignment": "Center",
                            "horizontalCellContentAlignment": "center",
                            "backgroundImage": {
                                "url": "${if($host.hostTheme == \"light\" || $host.hostTheme == \"highcontrastlight\", $root.numericBgLight, $root.numericBgDark)}"
                            },
                            "items": [
                                {
                                    "_comment": "Numeric up/down parts",
                                    "type": "ColumnSet",
                                    "spacing": "None",
                                    "columns": [
                                        {
                                            "_comment": "left padding",
                                            "type": "Column",
                                            "width": "10px",
                                            "spacing": "None",
                                            "verticalContentAlignment": "Center",
                                            "style": "default"
                                        },
                                        {
                                            "_comment": "duration text - e.g. '25 mins'",
                                            "type": "Column",
                                            "spacing": "None",
                                            "horizontalCellContentAlignment": "left",
                                            "items": [
                                                {
                                                    "type": "TextBlock",
                                                    "text": "${duration}",
                                                    "color": "${if($host.hostTheme == \"light\" || $host.hostTheme == \"highcontrastlight\", 'Dark', 'Light')}",
                                                    "horizontalAlignment": "Left"
                                                }
                                            ],
                                            "width": "stretch"
                                        },
                                        {
                                            "_comment": "decrement button",
                                            "type": "Column",
                                            "width": "28px",
                                            "spacing": "None",
                                            "backgroundImage": {
                                                "url": "data:image/svg+xml;utf8,%3Csvg%20width%3D%2228%22%20height%3D%2224%22%20viewBox%3D%220%200%2028%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0D%3Crect%20x%3D%221%22%20y%3D%221%22%20width%3D%2226%22%20height%3D%2222%22%20rx%3D%223%22%20fill%3D%22black%22%20fill-opacity%3D%220.00373%22%2F%3E%0D%3Crect%20x%3D%220.5%22%20y%3D%220.5%22%20width%3D%2227%22%20height%3D%2223%22%20rx%3D%223.5%22%20stroke%3D%22black%22%20stroke-opacity%3D%220.00373%22%2F%3E%0D%3C%2Fsvg%3E%0D"
                                            },
                                            "items": [
                                                {
                                                    "type": "Image",
                                                    "width": "12px",
                                                    "url": "${if($host.hostTheme == \"light\" || $host.hostTheme == \"highcontrastlight\", $root.numericDecIconLight, $root.numericDecIconDark)}",
                                                    "horizontalAlignment": "Center",
                                                    "verticalAlignment": "Center"
                                                }
                                            ],
                                            "selectAction": {
                                                "type": "Action.Execute",
                                                "verb": "FocusShorter",
                                                "tooltip": "${FocusShorterButtonLabel}"
                                            }
                                        },
                                        {
                                            "_comment": "increment button",
                                            "type": "Column",
                                            "width": "28px",
                                            "spacing": "None",
                                            "backgroundImage": {
                                                "url": "data:image/svg+xml;utf8,%3Csvg%20width%3D%2228%22%20height%3D%2224%22%20viewBox%3D%220%200%2028%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0D%3Crect%20x%3D%221%22%20y%3D%221%22%20width%3D%2226%22%20height%3D%2222%22%20rx%3D%223%22%20fill%3D%22black%22%20fill-opacity%3D%220.00373%22%2F%3E%0D%3Crect%20x%3D%220.5%22%20y%3D%220.5%22%20width%3D%2227%22%20height%3D%2223%22%20rx%3D%223.5%22%20stroke%3D%22black%22%20stroke-opacity%3D%220.00373%22%2F%3E%0D%3C%2Fsvg%3E%0D"
                                            },
                                            "items": [
                                                {
                                                    "type": "Image",
                                                    "width": "12px",
                                                    "url": "${if($host.hostTheme == \"light\" || $host.hostTheme == \"highcontrastlight\", $root.numericIncIconLight, $root.numericIncIconDark)}",
                                                    "horizontalAlignment": "Center",
                                                    "verticalAlignment": "Center"
                                                }
                                            ],
                                            "selectAction": {
                                                "type": "Action.Execute",
                                                "verb": "FocusLonger",
                                                "tooltip": "${FocusLongerButtonLabel}"
                                            }
                                        },
                                        {
                                            "_comment": "right padding",
                                            "type": "Column",
                                            "width": "2px",
                                            "spacing": "None",
                                            "verticalContentAlignment": "Center",
                                            "style": "default"
                                        }
                                    ]
                                }
                            ]
                        },
                        {
                            "_comment": "Spacing column for focus button column at small widget size",
                            "type": "Column",
                            "$when": "${$host.widgetSize==\"small\"}",
                            "width": "8px",
                            "spacing": "None"
                        },
                        {
                            "_comment": "Focus button column for small widget size",
                            "type": "Column",
                            "$when": "${$host.widgetSize==\"small\"}",
                            "width": "92px",
                            "spacing": "None",
                            "minHeight": "32px",
                            "verticalContentAlignment": "Center",
                            "backgroundImage": {
                                "url": "${if($host.hostTheme == \"light\" || $host.hostTheme == \"highcontrastlight\", $root.focusBgLight, $root.focusBgDark)}"
                            },
                            "selectAction": {
                                "type": "Action.Execute",
                                "verb": "Focus",
                                "tooltip": "${FocusButtonLabel}"
                            },
                            "items": [
                                {
                                    "type": "ColumnSet",
                                    "horizontalAlignment": "Center",
                                    "columns": [
                                        {
                                            "type": "Column",
                                            "width": "auto",
                                            "items": [
                                                {
                                                    "type": "Image",
                                                    "width": "14px",
                                                    "height": "17px",
                                                    "url": "${if($host.hostTheme == \"light\" || $host.hostTheme == \"highcontrastlight\", $root.focusIconLight, $root.focusIconDark)}",
                                                    "horizontalAlignment": "Center"
                                                }
                                            ]
                                        }
                                    ]
                                }
                            ]
                        }
                    ]
                },
                {
                    "_comment": "Neutral state focus button for medium widget size",
                    "type": "ColumnSet",
                    "$when": "${$host.widgetSize==\"medium\"}",
                    "spacing": "Large",
                    "horizontalAlignment": "Center",
                    "columns": [
                        {
                            "_comment": "Focus button column",
                            "type": "Column",
                            "width": "92px",
                            "spacing": "None",
                            "minHeight": "32px",
                            "verticalContentAlignment": "Center",
                            "backgroundImage": {
                                "url": "${if($host.hostTheme == \"light\" || $host.hostTheme == \"highcontrastlight\", $root.focusBgLight, $root.focusBgDark)}"
                            },
                            "selectAction": {
                                "type": "Action.Execute",
                                "verb": "Focus",
                                "tooltip": "${FocusButtonLabel}"
                            },
                            "items": [
                                {
                                    "type": "ColumnSet",
                                    "horizontalAlignment": "Center",
                                    "columns": [
                                        {
                                            "type": "Column",
                                            "width": "auto",
                                            "items": [
                                                {
                                                    "type": "Image",
                                                    "width": "14px",
                                                    "height": "17px",
                                                    "url": "${if($host.hostTheme == \"light\" || $host.hostTheme == \"highcontrastlight\", $root.focusIconLight, $root.focusIconDark)}",
                                                    "horizontalAlignment": "Center"
                                                }
                                            ]
                                        }
                                    ]
                                }
                            ]
                        }
                    ]
                }
            ]
        },
        {
            "_comment": "Non-neutral state top spacing for medium widget size",
            "type": "Container",
            "$when": "${state != \"Neutral\" && $host.widgetSize==\"medium\"}",
            "minHeight": "65px"
        },
        {
            "_comment": "Non-neutral state stating the remaining duration in period",
            "type": "RichTextBlock",
            "$when": "${state != \"Neutral\"}",
            "horizontalAlignment": "Center",
            "inlines": [
                {
                    "type": "TextRun",
                    "text": "${remainingTimeText}",
                    "size": "ExtraLarge"
                },
                {
                    "type": "TextRun",
                    "text": " "
                },
                {
                    "type": "TextRun",
                    "text": "${remainingTimeUnit}",
                    "size": "Medium"
                }
            ]
        },
        {
            "_comment": "Upcoming period text upper spacer for medium size widget",
            "type": "Container",
            "$when": "${state != \"Neutral\" && $host.widgetSize==\"medium\" && showUpcoming==\"true\"}",
            "minHeight": "17px",
            "spacing": "None"
        },
        {
            "type": "TextBlock",
            "text": "${FocusSessionUpcoming}",
            "$when": "${state != \"Neutral\" && $host.widgetSize==\"medium\" && showUpcoming==\"true\"}",
            "wrap": true,
            "horizontalAlignment": "Center",
            "isSubtle": true
        },
        {
            "_comment": "e.g. 5 min break",
            "type": "TextBlock",
            "text": "${upcomingValue}",
            "$when": "${state != \"Neutral\"  && $host.widgetSize==\"medium\" && showUpcoming==\"true\"}",
            "wrap": true,
            "spacing": "None",
            "horizontalAlignment": "Center"
        },
        {
            "_comment": "Upcoming period text bottom spacer for medium size widget",
            "type": "Container",
            "$when": "${state != \"Neutral\" && $host.widgetSize==\"medium\" && showUpcoming==\"true\"}",
            "minHeight": "29px",
            "spacing": "None"
        },
        {
            "_comment": "Bottom spacer for small size widget during focus session",
            "type": "Container",
            "$when": "${state != \"Neutral\" && $host.widgetSize==\"small\"}",
            "minHeight": "14px",
            "spacing": "None"
        },
        {
            "_comment": "Bottom spacer for medium size widget when we're in the last period and there's no upcoming period hint",
            "type": "Container",
            "$when": "${state != \"Neutral\" && $host.widgetSize==\"medium\" && showUpcoming==\"false\"}",
            "minHeight": "95px",
            "spacing": "None"
        },
        {
            "_comment": "Running/break/paused state/period buttons",
            "type": "ColumnSet",
            "$when": "${state != \"Neutral\"}",
            "horizontalAlignment": "Center",
            "spacing": "None",
            "columns": [
                {
                    "_comment": "Pause button",
                    "$when": "${state == \"Running\" || state == \"Break\"}",
                    "type": "Column",
                    "backgroundImage": {
                        "url": "${if($host.hostTheme == \"light\" || $host.hostTheme == \"highcontrastlight\", $root.pauseResumeBgLight, $root.pauseResumeBgDark)}"
                    },
                    "selectAction": {
                        "type": "Action.Execute",
                        "verb": "Pause",
                        "tooltip": "${PauseButtonLabel}"
                    },
                    "width": "130px",
                    "minHeight": "32px",
                    "verticalContentAlignment": "Center",
                    "horizontalCellContentAlignment": "center",
                    "items": [
                        {
                            "type": "ColumnSet",
                            "horizontalAlignment": "Center",
                            "columns": [
                                {
                                    "type": "Column",
                                    "width": "auto",
                                    "items": [
                                        {
                                            "_comment": "Pause icon - note we need to increase the size of the svg as adaptive cards round off/clip our corners",
                                            "type": "Image",
                                            "width": "18px",
                                            "height": "18px",
                                            "url": "${if($host.hostTheme == \"light\" || $host.hostTheme == \"highcontrastlight\", $root.pauseIconLight, $root.pauseIconDark)}"
                                        }
                                    ]
                                }
                            ]
                        }
                    ]
                },
                {
                    "_comment": "Resume button",
                    "$when": "${state == \"PausedRunning\" || state == \"PausedBreak\"}",
                    "type": "Column",
                    "backgroundImage": {
                        "url": "${if($host.hostTheme == \"light\" || $host.hostTheme == \"highcontrastlight\", $root.pauseResumeBgLight, $root.pauseResumeBgDark)}"
                    },
                    "selectAction": {
                        "type": "Action.Execute",
                        "verb": "Resume",
                        "tooltip": "${ResumeButtonLabel}"
                    },
                    "width": "130px",
                    "minHeight": "32px",
                    "verticalContentAlignment": "Center",
                    "horizontalCellContentAlignment": "center",
                    "items": [
                        {
                            "type": "ColumnSet",
                            "horizontalAlignment": "Center",
                            "columns": [
                                {
                                    "type": "Column",
                                    "width": "auto",
                                    "items": [
                                        {
                                            "type": "Image",
                                            "width": "14px",
                                            "height": "17px",
                                            "url": "${if($host.hostTheme == \"light\" || $host.hostTheme == \"highcontrastlight\", $root.focusIconLight, $root.focusIconDark)}",
                                            "horizontalAlignment": "Center"
                                        }
                                    ]
                                }
                            ]
                        }
                    ]
                },
                {
                    "type": "Column",
                    "width": "8px",
                    "spacing": "None"
                },
                {
                    "_comment": "Reset button",
                    "type": "Column",
                    "width": "130px",
                    "spacing": "None",
                    "minHeight": "32px",
                    "verticalContentAlignment": "Center",
                    "backgroundImage": {
                        "url": "${if($host.hostTheme == \"light\" || $host.hostTheme == \"highcontrastlight\", $root.resetBgLight, $root.resetBgDark)}"
                    },
                    "selectAction": {
                        "type": "Action.Execute",
                        "verb": "Reset",
                        "tooltip": "${ResetButtonLabel}"
                    },
                    "items": [
                        {
                            "type": "ColumnSet",
                            "horizontalAlignment": "Center",
                            "columns": [
                                {
                                    "type": "Column",
                                    "width": "auto",
                                    "items": [
                                        {
                                            "type": "Image",
                                            "width": "14px",
                                            "height": "17px",
                                            "url": "${if($host.hostTheme == \"light\" || $host.hostTheme == \"highcontrastlight\", $root.resetIconLight, $root.resetIconDark)}"
                                        }
                                    ]
                                }
                            ]
                        }
                    ]
                }
            ]
        }
    ]
}