{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/row-formatting.schema.json",
  "hideSelection": true,
  "hideColumnHeader": true,
  "rowFormatter": {
    "elmType": "div",
    "attributes": {
      "class": "ms-borderColor-neutralLight"
    },
    "style": {
      "box-sizing": "border-box",
      "width": "100%",
      "border-width": "1px",
      "border-style": "solid",
      "padding": "0 0 0 20px",
      "margin-bottom": "10px",
      "align-items": "stretch"
    },
    "children": [
      {
        "elmType": "div",
        "style": {
          "flex": "1 0 300px",
          "display": "flex",
          "flex-wrap": "wrap"
        },
        "children": [
          {
            "elmType": "div",
            "style": {
              "flex": "1 0 300px",
              "box-sizing": "border-box",
              "padding": "10px"
            },
            "children": [
              {
                "elmType": "button",
                "attributes": {
                  "class": "ms-fontSize-xl"
                },
                "style": {
                  "line-height": "1.5em",
                  "margin-bottom": "1em",
                  "border": "0",
                  "padding": "0px",
                  "color": "#0077ff",
                  "background-color": "transparent",
                  "cursor": "pointer"
                },
                "txtContent": "[$FileLeafRef]",
                "customRowAction": {
                  "action": "defaultClick"
                }
              },
              {
                "elmType": "div",
                "attributes": {
                  "class": "ms-fontSize-s"
                },
                "style": {
                  "line-height": "1.5em",
                  "margin-bottom": "8px"
                },
                "txtContent": "='Modified by ' + [$Editor.title] + ', ' + toLocaleString([$Modified])"
              },
              {
                "elmType": "div",
                "attributes": {
                  "class": "='ms-fontSize-s ms-fontWeight-bold ' + if([$SignOffDueDate] > @now, 'ms-fontColor-redDark', 'ms-fontColor-neutralPrimary')"
                },
                "style": {
                  "visibility": "=if([$SignOffDueDate], '', 'collapse')",
                  "line-height": "1.5em",
                  "margin-bottom": "8px"
                },
                "txtContent": "='Due date ' + toLocaleDateString([$SignOffDueDate])"
              }
            ]
          },
          {
            "elmType": "div",
            "style": {
              "flex": "0 0 170px",
              "display": "flex",
              "flex-direction": "column"
            },
            "children": [
              {
                "elmType": "button",
                "customRowAction": {
                  "action": "editProps"
                },
                "txtContent": "Edit Properties",
                "attributes": {
                  "class": "sp-row-button ms-bgColor-neutralLighter ms-fontWeight-semibold"
                },
                "style": {
                  "width": "145px",
                  "height": "32px",
                  "margin": "20px 0 10px 0"
                }
              },
              {
                "elmType": "button",
                "customRowAction": {
                  "action": "executeFlow",
                  "actionParams": "{\"id\": \"2d8001c0-31f4-48e5-90ab-1804fa33bb43\"}"
                },
                "txtContent": "Request Sign Off",
                "attributes": {
                  "class": "sp-row-button"
                },
                "style": {
                  "width": "145px",
                  "height": "32px",
                  "margin": "10px 0",
                  "display": "=if([$RequiresSignOff] && [$SignOffStatus] != 'Pending' && [$SignOffStatus] != 'Approved', '', 'none')"
                }
              }
            ]
          }
        ]
      },
      {
        "elmType": "div",
        "attributes": {
          "class": "=if([$RequiresSignOff], if([$SignOffStatus], if([$SignOffStatus] == 'Pending', 'ms-bgColor-yellow', if([$SignOffStatus] == 'Approved', 'ms-bgColor-green', 'ms-bgColor-redDark')), 'ms-bgColor-neutralLighter'), 'ms-bgColor-neutralLighter') + ' ' + if([$SignOffStatus] == 'Pending', 'ms-borderColor-redDark', '')"
        },
        "style": {
          "flex": "0 0 173px",
          "display": "flex",
          "justify-content": "center",
          "align-items": "center",
          "border-top-width": "=if([$SignOffStatus] == 'Pending', '5px', '0')",
          "border-top-style": "solid",
          "color": "=if([$SignOffStatus] == 'Pending', 'black', if([$SignOffStatus] == 'Approved', 'white', 'white'))"
        },
        "children": [
          {
            "elmType": "div",
            "attributes": {
              "class": "ms-fontSize-l"
            },
            "style": {
              "display": "=if([$RequiresSignOff], 'none', '')",
              "text-align": "center",
              "color": "black"
            },
            "txtContent": "No sign-off needed"
          },
          {
            "elmType": "div",
            "style": {
              "display": "=if([$RequiresSignOff], 'inline-block', 'none')",
              "text-align": "center"
            },
            "children": [
              {
                "elmType": "div",
                "attributes": {
                  "class": "ms-fontSize-l"
                },
                "style": {
                  "line-height": "1.5em"
                },
                "txtContent": "[$SignOffStatus]"
              },
              {
                "elmType": "div",
                "style": {
                  "display": "=if([$SignOffStatus], '', 'none')",
                  "font-size": "=if([$SignOffStatus] == 'Approved' || [$SignOffStatus] == 'Rejected', '80px', '30px')",
                  "line-height": "40px",
                  "color": "=if([$SignOffStatus] == 'Pending', 'black', if([$SignOffStatus] == 'Approved', 'white', 'white'))"
                },
                "attributes": {
                  "iconName": "=if([$SignOffStatus] == 'Pending', 'Clock', if([$SignOffStatus] == 'Approved', 'StatusCircleCheckmark', 'StatusCircleErrorX'))"
                }
              }
            ]
          }
        ]
      }
    ]
  }
}