{
  "templates": {
    "rect": {
      "type": "text",
      "text": "Last Gesture:\n@{last_detected_gesture}",
      "text_alignment_horizontal": "center",
      "text_alignment_vertical": "center",
      "text_color": "#fff",
      "font_size": 32,
      "alignment_horizontal": "center",
      "margins": {
        "top": 24
      },
      "width": {
        "type": "fixed",
        "value": 280
      },
      "height": {
        "type": "fixed",
        "value": 280
      },
      "background": [
        {
          "type": "solid",
          "color": "@{bg_color}"
        }
      ],
      "border": {
        "corner_radius": 8
      },
      "delimiter_style": {
        "color": "#00000000"
      },
      "extensions": [
        {
          "id": "gesture",
          "params": {
            "swipe_up": [
              {
                "log_id": "swipe_up",
                "url": "div-action://set_variable?name=bg_color&value=%23f7cb4d"
              },
              {
                "log_id": "swipe_up_text",
                "url": "div-action://set_variable?name=last_detected_gesture&value=UP"
              }
            ],
            "swipe_down": [
              {
                "log_id": "swipe_down",
                "url": "div-action://set_variable?name=bg_color&value=%2341b375"
              },
              {
                "log_id": "swipe_down_text",
                "url": "div-action://set_variable?name=last_detected_gesture&value=DOWN"
              }
            ],
            "swipe_left": [
              {
                "log_id": "swipe_left",
                "url": "div-action://set_variable?name=bg_color&value=%237baaf7"
              },
              {
                "log_id": "swipe_left_text",
                "url": "div-action://set_variable?name=last_detected_gesture&value=LEFT"
              }
            ],
            "swipe_right": [
              {
                "log_id": "swipe_right",
                "url": "div-action://set_variable?name=bg_color&value=%23ba67c8"
              },
              {
                "log_id": "swipe_right_text",
                "url": "div-action://set_variable?name=last_detected_gesture&value=RIGHT"
              }
            ]
          }
        }
      ]
    }
  },
  "card": {
    "variables": [
      {
        "name": "bg_color",
        "type": "color",
        "value": "#e67c73"
      },
      {
        "name": "last_detected_gesture",
        "type": "string",
        "value": "NONE"
      }
    ],
    "log_id": "card_with_gesture",
    "states": [
      {
        "state_id": 0,
        "div": {
          "type": "container",
          "items": [
            {
              "type": "rect"
            }
          ]
        }
      }
    ]
  }
}