{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/row-formatting.schema.json",
  "hideColumnHeader": true,
  "hideSelection": true,
  "rowFormatter": {
    "elmType": "div",
    "attributes": {
      "class": "ms-bgColor-themePrimary"
    },
    "style": {
      "padding": "10px",
      "column-gap": "10px",
      "align-items": "stretch"
    },
    "children": [
      {
        "elmType": "div",
        "defaultHoverField": "[$Requester]",
        "attributes": {
          "class": "ms-bgColor-themeLight"
        },
        "style": {
          "padding": "inherit",
          "text-align": "center",
          "display": "flex",
          "flex-direction": "column",
          "justify-content": "space-between",
          "width": "120px"
        },
        "children": [
          {
            "elmType": "img",
            "attributes": {
              "src": "=getUserImage('[$Requester.email]','medium')"
            },
            "style": {
              "border-radius": "50%",
              "margin-bottom": "10px"
            }
          },
          {
            "elmType": "div",
            "txtContent": "[$Requester.title]",
            "attributes": {
              "class": "ms-bgColor-white"
            },
            "style": {
              "text-align": "center",
              "font-weight": "500",
              "padding": "inherit"
            }
          }
        ]
      },
      {
        "elmType": "div",
        "attributes": {
          "class": "ms-bgColor-themeLight"
        },
        "style": {
          "padding": "inherit",
          "align-items": "stretch",
          "flex-grow": "1",
          "display": "flex",
          "flex-direction": "column",
          "justify-content": "space-between"
        },
        "children": [
          {
            "elmType": "div",
            "txtContent": "= '🎯 ' + [$Title]",
            "attributes": {
              "class": "ms-bgColor-white ms-fontColor-themePrimary"
            },
            "style": {
              "text-align": "left",
              "font-weight": "700",
              "padding": "inherit"
            }
          },
          {
            "elmType": "div",
            "txtContent": "='📅 ' + toLocaleDateString([$TravelStartDate]) + ' - ' + toLocaleDateString([$TravelEndDate]) + ' (' + [$TravelDuration] + ' days)'",
            "attributes": {
              "class": "ms-bgColor-white"
            },
            "style": {
              "text-align": "left",
              "padding": "inherit"
            }
          },
          {
            "elmType": "div",
            "txtContent": "='✈️ Flight: €' + '[$EstimatedAirfare]' + ' (' + '[$Airline]' + ')'",
            "attributes": {
              "class": "ms-bgColor-white"
            },
            "style": {
              "text-align": "left",
              "padding": "inherit"
            }
          },
          {
            "elmType": "div",
            "txtContent": "='🏨 Hotel: €' + '[$EstimatedHotelCost]' + ' (' + '[$Hotel.DisplayName]' + ')'",
            "attributes": {
              "class": "ms-bgColor-white"
            },
            "style": {
              "text-align": "left",
              "padding": "inherit"
            }
          },
          {
            "elmType": "div",
            "txtContent": "='💵 Total: €' + Number([$EstimatedAirfare] + [$EstimatedHotelCost])",
            "attributes": {
              "class": "ms-bgColor-white"
            },
            "style": {
              "text-align": "left",
              "font-weight": "500",
              "padding": "inherit"
            }
          }
        ]
      },
      {
        "elmType": "div",
        "attributes": {
          "class": "ms-bgColor-themeLight"
        },
        "style": {
          "padding": "inherit",
          "column-gap": "10px",
          "display": "flex",
          "flex-direction": "column",
          "justify-content": "space-between"
        },
        "children": [
          {
            "elmType": "img",
            "attributes": {
              "src": "='https://dev.virtualearth.net/REST/v1/Imagery/Map/Road?mapSize=300,200&pp=' + if([$Destination.Coordinates.Latitude], [$Destination.Coordinates.Latitude], '0') + ',' + if([$Destination.Coordinates.Longitude], [$Destination.Coordinates.Longitude], '0') + '&zoomlevel=12&key=REPLACE_THIS_WITH_YOUR_BING_MAPS_KEY'"
            },
            "style": {
              "margin-bottom": "10px"
            }
          },
          {
            "elmType": "div",
            "txtContent": "APPROVE",
            "customRowAction": {
              "action": "setValue",
              "actionInput": {
                "Approved": true
              }
            },
            "attributes": {
              "class": "ms-bgColor-themePrimary ms-fontColor-white"
            },
            "style": {
              "text-align": "center",
              "font-weight": "700",
              "padding": "inherit",
              "cursor": "pointer",
              "display": "=if([$Approved],'none','')"
            }
          },
          {
            "elmType": "div",
            "txtContent": "APPROVED",
            "customRowAction": {
              "action": "defaultClick"
            },
            "attributes": {
              "class": "ms-bgColor-white ms-fontColor-themePrimary"
            },
            "style": {
              "text-align": "center",
              "font-weight": "700",
              "padding": "inherit",
              "cursor": "default",
              "display": "=if([$Approved],'','none')"
            }
          }
        ]
      }
    ]
  }
}