{
  "surface_id": "wagas-navigation-card-surface",
  "surface_version": 1,
  "payload": {
    "objects": [
      {
        "beginRendering": {
          "surfaceId": "wagas-navigation-card-surface",
          "root": "root-card"
        }
      },
      {
        "surfaceUpdate": {
          "surfaceId": "wagas-navigation-card-surface",
          "components": [
            {
              "id": "root-card",
              "component": {
                "Card": {
                  "child": "main-column"
                }
              }
            },
            {
              "id": "main-column",
              "component": {
                "Column": {
                  "alignment": "stretch",
                  "children": {
                    "explicitList": [
                      "restaurant-title",
                      "restaurant-meta-row",
                      "restaurant-map",
                      "navigate-button"
                    ]
                  }
                }
              }
            },
            {
              "id": "restaurant-title",
              "component": {
                "Label": {
                  "text": {
                    "literalString": "Wagas 🥗🥑"
                  },
                  "variant": "title"
                }
              }
            },
            {
              "id": "restaurant-meta-row",
              "component": {
                "Row": {
                  "children": {
                    "explicitList": [
                      "distance-label",
                      "meta-dot",
                      "time-label"
                    ]
                  }
                }
              }
            },
            {
              "id": "distance-label",
              "component": {
                "Label": {
                  "text": {
                    "literalString": "1.2km"
                  },
                  "variant": "bodySans",
                  "color": "secondary"
                }
              }
            },
            {
              "id": "meta-dot",
              "component": {
                "Label": {
                  "text": {
                    "literalString": "•"
                  },
                  "variant": "bodySans",
                  "color": "tertiary"
                }
              }
            },
            {
              "id": "time-label",
              "component": {
                "Label": {
                  "text": {
                    "literalString": "9 min"
                  },
                  "variant": "bodySans",
                  "color": "secondary"
                }
              }
            },
            {
              "id": "restaurant-map",
              "component": {
                "Map": {
                  "latitude": {
                    "literalNumber": 31.2304
                  },
                  "longitude": {
                    "literalNumber": 121.4737
                  },
                  "zoom": {
                    "literalNumber": 15
                  },
                  "tileUrlTemplate": {
                    "literalString": "https://tile.openstreetmap.org/{z}/{x}/{y}.png"
                  }
                }
              }
            },
            {
              "id": "navigate-button",
              "component": {
                "Button": {
                  "child": "navigate-button-content",
                  "style": "primary",
                  "action": {
                    "name": "start_navigation",
                    "handler": {
                      "operation": "open_map_navigation",
                      "value": {
                        "latitude": 31.2304,
                        "longitude": 121.4737
                      }
                    }
                  }
                }
              }
            },
            {
              "id": "navigate-button-content",
              "component": {
                "Row": {
                  "alignment": "center",
                  "children": {
                    "explicitList": [
                      "navigate-button-icon",
                      "navigate-button-label"
                    ]
                  }
                }
              }
            },
            {
              "id": "navigate-button-icon",
              "component": {
                "Label": {
                  "text": {
                    "literalString": "🧭"
                  },
                  "variant": "bodySansSemibold"
                }
              }
            },
            {
              "id": "navigate-button-label",
              "component": {
                "Label": {
                  "text": {
                    "literalString": "Navigate here"
                  },
                  "variant": "bodySansSemibold"
                }
              }
            }
          ]
        }
      }
    ]
  }
}