{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/view-formatting.schema.json",
  "hideSelection": true,
  "hideColumnHeader": true,
  "rowFormatter": {
    "elmType": "div",
    "style": {
      "display": "flex",
      "flex-direction": "column",
      "font-family": "Segoe UI, sans-serif",
      "width": "100%",
      "padding": "20px",
      "max-width": "360px",
      "border-radius": "20px",
      "box-shadow": "0 2px 4px rgba(0, 0, 0, 0.1)",
      "overflow": "hidden",
      "margin": "20px"
    },
    "children": [
      {
        "elmType": "div",
        "style": {
          "font-size": "13px",
          "font-weight": "600",
          "color": "#555",
          "margin-bottom": "8px",
          "width": "100%"
        },
        "txtContent": "Commended by"
      },
      {
        "elmType": "div",
        "style": {
          "display": "flex",
          "align-items": "center",
          "gap": "12px",
          "width": "100%"
        },
        "children": [
          {
            "elmType": "img",
            "style": {
              "width": "42px",
              "height": "42px",
              "border-radius": "50%",
              "object-fit": "cover",
              "padding": "20px"
            },
            "attributes": {
              "src": "=getUserImage([$From.email],'L')"
            }
          },
          {
            "elmType": "div",
            "children": [
              {
                "elmType": "span",
                "style": {
                  "font-weight": "600",
                  "font-size": "15px",
                  "color": "#111"
                },
                "txtContent": "[$From.title]"
              },
              {
                "elmType": "div",
                "style": {
                  "font-size": "13px",
                  "color": "#888"
                },
                "txtContent": "[$From.role]"
              }
            ]
          }
        ]
      },
      {
        "elmType": "div",
        "style": {
          "display": "flex",
          "align-items": "center",
          "gap": "12px",
          "background-color": "#f2fdf5",
          "width": "100%",
          "margin-top": "12px"
        },
        "children": [
          {
            "elmType": "img",
            "style": {
              "width": "80px",
              "height": "80px",
              "border-radius": "50%",
              "object-fit": "cover",
              "padding": "20px"
            },
            "attributes": {
              "src": "=getUserImage([$To.email],'L')"
            }
          },
          {
            "elmType": "div",
            "style": {
              "width": "26px",
              "height": "26px",
              "background-color": "#38d39f",
              "border-radius": "50%",
              "display": "flex",
              "align-items": "center",
              "justify-content": "center",
              "padding": "20px",
              "margin-left": "-30px"
            },
            "children": [
              {
                "elmType": "span",
                "style": {
                  "font-size": "20px",
                  "color": "#fff"
                },
                "attributes": {
                  "iconName": "Trophy2"
                }
              }
            ]
          },
          {
            "elmType": "div",
            "style": {
              "flexGrow": "1"
            },
            "children": [
              {
                "elmType": "span",
                "style": {
                  "font-weight": "600",
                  "font-size": "15px",
                  "color": "#111",
                  "padding-left": "8px"
                },
                "txtContent": "[$To.title]"
              },
              {
                "elmType": "div",
                "style": {
                  "font-size": "13px",
                  "font-weight": "600",
                  "color": "#1aaf5d",
                  "padding-left": "8px"
                },
                "txtContent": "[$AwardType]"
              }
            ]
          }
        ]
      },
      {
        "elmType": "div",
        "style": {
          "font-size": "14px",
          "color": "#444",
          "text-align": "center",
          "font-weight": "400",
          "font-style": "italic",
          "padding": "12px 16px",
          "background-color": "#ffffff"
        },
        "txtContent": "[$Message]"
      },
      {
        "elmType": "div",
        "style": {
          "display": "flex",
          "justify-content": "center",
          "gap": "16px",
          "padding": "12px",
          "background-color": "#ffffff",
          "border-bottom-left-radius": "20px",
          "border-bottom-right-radius": "20px"
        },
        "children": [
          {
            "elmType": "div",
            "style": {
              "display": "flex",
              "align-items": "center",
              "justify-content": "center",
              "gap": "6px",
              "background-color": "#f3f3f3",
              "border-radius": "50%",
              "padding": "10px",
              "cursor": "pointer"
            },
            "customRowAction": {
              "action": "setValue",
              "actionInput": {
                "Reactions_Medal": "=if([$Reactions_Medal]=='',1,Number([$Reactions_Medal])+1)"
              }
            },
            "children": [
              {
                "elmType": "span",
                "txtContent": "🥇",
                "style": {
                  "font-size": "16px"
                }
              },
              {
                "elmType": "span",
                "txtContent": "[$Reactions_Medal]",
                "style": {
                  "font-size": "14px",
                  "color": "#222"
                }
              }
            ]
          },
          {
            "elmType": "div",
            "style": {
              "display": "flex",
              "align-items": "center",
              "justify-content": "center",
              "gap": "6px",
              "background-color": "#f3f3f3",
              "border-radius": "50%",
              "padding": "10px",
              "cursor": "pointer"
            },
            "customRowAction": {
              "action": "setValue",
              "actionInput": {
                "Reactions_Heart": "=if([$Reactions_Heart]=='',1,Number([$Reactions_Heart])+1)"
              }
            },
            "children": [
              {
                "elmType": "span",
                "txtContent": "💖",
                "style": {
                  "font-size": "16px"
                }
              },
              {
                "elmType": "span",
                "txtContent": "[$Reactions_Heart]",
                "style": {
                  "font-size": "14px",
                  "color": "#222"
                }
              }
            ]
          },
          {
            "elmType": "div",
            "style": {
              "display": "flex",
              "align-items": "center",
              "justify-content": "center",
              "gap": "6px",
              "background-color": "#f3f3f3",
              "border-radius": "50%",
              "padding": "10px",
              "cursor": "pointer"
            },
            "customRowAction": {
              "action": "setValue",
              "actionInput": {
                "Reactions_Clap": "=if([$Reactions_Clap]=='',1,Number([$Reactions_Clap])+1)"
              }
            },
            "children": [
              {
                "elmType": "span",
                "txtContent": "👏",
                "style": {
                  "font-size": "16px"
                }
              },
              {
                "elmType": "span",
                "txtContent": "[$Reactions_Clap]",
                "style": {
                  "font-size": "14px",
                  "color": "#222"
                }
              }
            ]
          }
        ]
      }
    ]
  }
}