{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/tile-formatting.schema.json",
  "width": 280,
  "height": 280,
  "hideSelection": true,
  "formatter": {
    "elmType": "div",
    "style": {
      "display": "flex",
      "flex-direction": "column",
      "padding": "10px"
    },
    "children": [
      {
        "elmType": "div",
        "txtContent": "=getDate([$Date])",
        "style": {
          "width": "20%",
          "height": "20%",
          "border-radius": "50%",
          "display": "flex",
          "align-items": "center",
          "justify-content": "center",
          "font-size": "20px",
          "font-weight": "bold"
        },
        "attributes": {
          "class": "ms-bgColor-themeLighter"
        }
      },
      {
        "elmType": "div",
        "style": {
          "display": "=if([$Opened] , '' , 'none')",
          "width": "80%",
          "height": "80%"
        },
        "customRowAction": {
          "action": "setValue",
          "actionInput": {
            "Opened": "=if([$Opened] , '0' , '1')"
          }
        },
        "children": [
          {
            "elmType": "div",
            "style": {
              "display": "flex",
              "align-items": "center",
              "justify-content": "center",
              "height": "90%",
              "width": "100%"
            },
            "children": [
              {
                "elmType": "img",
                "style": {
                  "max-height": "90%",
                  "max-width": "90%"
                },
                "attributes": {
                  "src": "[$Present.serverRelativeUrl]"
                }
              }
            ]
          },
          {
            "elmType": "div",
            "txtContent": "[$Title]",
            "style": {
              "display": "flex",
              "align-items": "center",
              "justify-content": "center",
              "height": "10%",
              "font-size": "18px",
              "font-weight": "bold"
            }
          }
        ]
      },
      {
        "elmType": "div",
        "style": {
          "display": "=if([$Opened] , 'none' , 'flex')",
          "flex-direction": "column",
          "width": "80%",
          "height": "80%",
          "cursor": "pointer"
        },
        "customRowAction": {
          "action": "setValue",
          "actionInput": {
            "Opened": "=if([$Opened] || [$Date] >= @now , '0' , '1')"
          }
        },
        "children": [
          {
            "elmType": "div",
            "style": {
              "display": "flex",
              "justify-content": "center",
              "height": "20%",
              "position": "relative",
              "top": "5%"
            },
            "children": [
              {
                "elmType": "svg",
                "style": {
                  "fill": "[$RibbonColor]"
                },
                "attributes": {
                  "viewBox": "0 0 40 20"
                },
                "children": [
                  {
                    "elmType": "path",
                    "style": {
                      "stroke": "rgba(0,0,0,0.2)"
                    },
                    "attributes": {
                      "d": "M 20,20 L0,10 L0,0 L20,10 L40,0 L40,10 L20,20 Z"
                    }
                  }
                ]
              }
            ]
          },
          {
            "elmType": "div",
            "style": {
              "display": "flex",
              "flex-direction": "column",
              "align-items": "center",
              "justify-content": "center",
              "position": "relative",
              "width": "100%",
              "height": "80%"
            },
            "children": [
              {
                "elmType": "div",
                "style": {
                  "width": "100%",
                  "height": "20%",
                  "background-color": "[$BoxColor]",
                  "box-shadow": "0 0 5px rgba(0,0,0,0.6)",
                  "z-index": "2"
                }
              },
              {
                "elmType": "div",
                "style": {
                  "width": "90%",
                  "height": "80%",
                  "background-color": "[$BoxColor]",
                  "box-shadow": "0 0 3px rgba(0,0,0,0.6)",
                  "z-index": "1"
                }
              },
              {
                "elmType": "div",
                "style": {
                  "position": "absolute",
                  "width": "15%",
                  "height": "100%",
                  "background-color": "[$RibbonColor]",
                  "box-shadow": "0 0 3px rgba(0,0,0,0.6)",
                  "z-index": "3"
                }
              },
              {
                "elmType": "div",
                "style": {
                  "position": "absolute",
                  "width": "90%",
                  "height": "15%",
                  "background-color": "[$RibbonColor]",
                  "box-shadow": "0 0 3px rgba(0,0,0,0.6)",
                  "z-index": "4"
                }
              }
            ]
          }
        ]
      }
    ]
  }
}