{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/view-formatting.schema.json",
  "commandBarProps": {
    "commands": [
      {
        "key": "new",
        "hide": true
      }
    ]
  },
  "hideSelection": true,
  "hideColumnHeader": true,
  "rowFormatter": {
    "elmType": "div",
    "style": {
      "width": "420px",
      "overflow": "hidden",
      "display": "flex",
      "flex-direction": "column",
      "background-color": "[$BackgroundColor]",
      "box-shadow": "0 4px 12px rgba(0,0,0,0.2)",
      "color": "white",
      "margin": "20px"
    },
    "children": [
      {
        "elmType": "div",
        "style": {
          "position": "relative",
          "width": "100%"
        },
        "children": [
          {
            "elmType": "img",
            "attributes": {
              "src": "[$BannerImageUrl]",
              "alt": "Recipe Image"
            },
            "style": {
              "width": "100%"
            }
          },
          {
            "elmType": "div",
            "style": {
              "position": "absolute",
              "bottom": "8px",
              "width": "93%",
              "display": "flex",
              "align-items": "center",
              "gap": "8px",
              "padding": "6px 10px",
              "background-color": "rgba(0, 0, 0, 0.6)",
              "border-radius": "8px"
            },
            "children": [
              {
                "elmType": "img",
                "style": {
                  "width": "42px",
                  "height": "42px",
                  "border-radius": "50%",
                  "object-fit": "cover"
                },
                "attributes": {
                  "src": "=getUserImage([$Author.email],'L')"
                }
              },
              {
                "elmType": "div",
                "style": {
                  "font-size": "13px",
                  "color": "#e2d8e8",
                  "display": "flex",
                  "flex-direction": "column",
                  "padding-left": "5px"
                },
                "children": [
                  {
                    "elmType": "span",
                    "txtContent": "[$Author.title]",
                    "style": {
                      "font-weight": "bold"
                    }
                  },
                  {
                    "elmType": "span",
                    "txtContent": "[$Author.jobTitle]",
                    "style": {
                      "color": "#e2d8e8",
                      "font-size": "10px"
                    }
                  }
                ]
              }
            ]
          }
        ]
      },
      {
        "elmType": "div",
        "style": {
          "text-align": "left",
          "width": "100%",
          "padding-left": "20px",
          "margin-bottom": "16px"
        },
        "children": [
          {
            "elmType": "div",
            "txtContent": "[$Title]",
            "style": {
              "font-size": "16px",
              "font-weight": "bold",
              "color": "#e2d8e8",
              "margin-bottom": "8px"
            }
          },
          {
            "elmType": "div",
            "txtContent": "[$Benefits]",
            "style": {
              "font-size": "14px",
              "color": "#e2d8e8"
            }
          }
        ]
      },
      {
        "elmType": "div",
        "style": {
          "display": "flex",
          "justify-content": "space-between",
          "gap": "8px",
          "margin-bottom": "10px",
          "width": "96%"
        },
        "children": [
          {
            "elmType": "div",
            "style": {
              "background-color": "[$ButtonBackgroundColor]",
              "padding": "8px 12px",
              "border-radius": "20px",
              "margin": "0 5px",
              "width": "60px",
              "font-size": "13px",
              "font-weight": "bold",
              "flex": "1",
              "text-align": "center",
              "cursor": "default",
              "transition": "background-color 0.3s ease"
            },
            "children": [
              {
                "elmType": "div",
                "txtContent": "[$DietType]",
                "style": {
                  "font-size": "13px",
                  "color": "[$ForegroundColor]"
                }
              },
              {
                "elmType": "div",
                "txtContent": "Diet Type",
                "style": {
                  "font-size": "12px",
                  "color": "#e2d8e8",
                  "text-align": "center",
                  "margin-top": "4px"
                }
              }
            ]
          },
          {
            "elmType": "div",
            "style": {
              "background-color": "[$ButtonBackgroundColor]",
              "padding": "8px 12px",
              "border-radius": "20px",
              "margin": "0 5px",
              "width": "60px",
              "font-size": "13px",
              "font-weight": "bold",
              "flex": "1",
              "text-align": "center",
              "cursor": "default",
              "transition": "background-color 0.3s ease"
            },
            "children": [
              {
                "elmType": "div",
                "txtContent": "[$Duration]",
                "style": {
                  "font-size": "13px",
                  "color": "#ffffff"
                }
              },
              {
                "elmType": "div",
                "txtContent": "Duration",
                "style": {
                  "font-size": "12px",
                  "color": "#e2d8e8",
                  "text-align": "center",
                  "margin-top": "4px"
                }
              }
            ]
          },
          {
            "elmType": "div",
            "style": {
              "background-color": "[$ButtonBackgroundColor]",
              "padding": "8px 12px",
              "border-radius": "20px",
              "margin": "0 5px",
              "width": "60px",
              "font-size": "13px",
              "font-weight": "bold",
              "flex": "1",
              "text-align": "center",
              "cursor": "default",
              "transition": "background-color 0.3s ease"
            },
            "children": [
              {
                "elmType": "div",
                "txtContent": "[$Calories]",
                "style": {
                  "font-size": "13px",
                  "color": "#ffffff"
                }
              },
              {
                "elmType": "div",
                "txtContent": "Calories",
                "style": {
                  "font-size": "12px",
                  "color": "#e2d8e8",
                  "text-align": "center",
                  "margin-top": "4px"
                }
              }
            ]
          }
        ]
      },
      {
        "elmType": "div",
        "style": {
          "width": "100%",
          "padding-left": "20px",
          "margin-bottom": "20px"
        },
        "children": [
          {
            "elmType": "a",
            "attributes": {
              "href": "[$PlanLink]",
              "target": "_blank"
            },
            "style": {
              "display": "inline-block",
              "background-color": "#0078D4",
              "padding": "10px 16px",
              "color": "white",
              "text-decoration": "none",
              "border-radius": "20px",
              "font-weight": "bold",
              "text-align": "center",
              "transition": "background-color 0.3s ease"
            },
            "hoverStyle": {
              "background-color": "#005A8C"
            },
            "txtContent": "Start Plan"
          }
        ]
      }
    ]
  }
}