{
  "templates": {
    "button": {
      "type": "text",
      "state_id": 0,
      "font_size": 24,
      "font_weight": "light",
      "text_alignment_horizontal": "center",
      "text_alignment_vertical": "center",
      "text_color": "#000000",
      "focused_text_color": "#FFFFFF",
      "background": [
        {
          "type": "solid",
          "color": "#0e000000"
        }
      ],
      "border": {
        "corner_radius": 6
      },
      "height": {
        "type": "wrap_content"
      },
      "width": {
        "type": "match_parent"
      }
    }
  },
  "card": {
    "log_id": "focus",
    "states": [
      {
        "state_id": 0,
        "div": {
          "type": "container",
          "div_id": "container",
          "paddings": {
            "left": 8,
            "right": 8,
            "top": 4,
            "bottom": 4
          },
          "border": {
            "corner_radius": 24
          },
          "background": [
            {
              "type": "solid",
              "color": "#ffffff"
            }
          ],
          "orientation": "vertical",
          "items": [
            {
              "type": "text",
              "text": "Button is inactive - background is red.\n\nButton is active - background is blue.\n\nFORWARD - enumeration Left - Right - Up - Down (if button is active, it changes the directions).\nUP, DOWN, LEFT, RIGHT - set button.",
              "text_color": "#000000",
              "margins": {
                "top": 8,
                "bottom": 8,
                "left": 12,
                "right": 12
              },
              "font_size": 16
            },
            {
              "type": "gallery",
              "orientation": "vertical",
              "column_count": 3,
              "item_spacing": 10,
              "height": {
                "type": "match_parent"
              },
              "paddings": {
                "left": 16,
                "top": 60,
                "right": 16,
                "bottom": 16
              },
              "items": [
                {
                  "type": "state",
                  "div_id": "left",
                  "states": [
                    {
                      "state_id": "not_tapped",
                      "div": {
                        "type": "button",
                        "id": "left",
                        "height": {
                          "type": "fixed",
                          "value": 70
                        },
                        "text": "Left",
                        "focus": {
                          "background": [
                            {
                              "type": "solid",
                              "color": "#ff7f50"
                            }
                          ],
                          "next_focus_ids": {
                            "forward": "right",
                            "up": "up",
                            "left": "left",
                            "down": "down",
                            "right": "right"
                          }
                        },
                        "actions": [
                          {
                            "log_id": "not_tapped",
                            "url": "div-action://set_state?state_id=0/left/tapped"
                          }
                        ]
                      }
                    },
                    {
                      "state_id": "tapped",
                      "div": {
                        "type": "button",
                        "id": "left",
                        "text": "Left",
                        "height": {
                          "type": "fixed",
                          "value": 70
                        },
                        "font_weight": "bold",
                        "focus": {
                          "background": [
                            {
                              "type": "solid",
                              "color": "#4183d7"
                            }
                          ],
                          "next_focus_ids": {
                            "forward": "down",
                            "up": "up",
                            "left": "left",
                            "down": "down",
                            "right": "right"
                          }
                        },
                        "actions": [
                          {
                            "log_id": "not_tapped",
                            "url": "div-action://set_state?state_id=0/left/not_tapped"
                          }
                        ]
                      }
                    }
                  ]
                },
                {
                  "type": "state",
                  "div_id": "up",
                  "states": [
                    {
                      "state_id": "not_tapped",
                      "div": {
                        "type": "button",
                        "id": "up",
                        "text": "Up",
                        "height": {
                          "type": "fixed",
                          "value": 30
                        },
                        "focus": {
                          "background": [
                            {
                              "type": "solid",
                              "color": "#ff7f50"
                            }
                          ],
                          "next_focus_ids": {
                            "forward": "down",
                            "up": "up",
                            "left": "left",
                            "down": "down",
                            "right": "right"
                          }
                        },
                        "actions": [
                          {
                            "log_id": "not_tapped",
                            "url": "div-action://set_state?state_id=0/up/tapped"
                          }
                        ]
                      }
                    },
                    {
                      "state_id": "tapped",
                      "div": {
                        "type": "button",
                        "id": "up",
                        "text": "Up",
                        "height": {
                          "type": "fixed",
                          "value": 30
                        },
                        "font_weight": "bold",
                        "focus": {
                          "background": [
                            {
                              "type": "solid",
                              "color": "#4183d7"
                            }
                          ],
                          "next_focus_ids": {
                            "forward": "right",
                            "up": "up",
                            "left": "left",
                            "down": "down",
                            "right": "right"
                          }
                        },
                        "actions": [
                          {
                            "log_id": "not_tapped",
                            "url": "div-action://set_state?state_id=0/up/not_tapped"
                          }
                        ]
                      }
                    }
                  ]
                },
                {
                  "type": "state",
                  "div_id": "right",
                  "states": [
                    {
                      "state_id": "not_tapped",
                      "div": {
                        "type": "button",
                        "id": "right",
                        "text": "Right",
                        "height": {
                          "type": "fixed",
                          "value": 70
                        },
                        "focus": {
                          "background": [
                            {
                              "type": "solid",
                              "color": "#ff7f50"
                            }
                          ],
                          "next_focus_ids": {
                            "forward": "up",
                            "up": "up",
                            "left": "left",
                            "down": "down",
                            "right": "right"
                          }
                        },
                        "actions": [
                          {
                            "log_id": "not_tapped",
                            "url": "div-action://set_state?state_id=0/right/tapped"
                          }
                        ]
                      }
                    },
                    {
                      "state_id": "tapped",
                      "div": {
                        "type": "button",
                        "id": "right",
                        "text": "Right",
                        "height": {
                          "type": "fixed",
                          "value": 70
                        },
                        "font_weight": "bold",
                        "focus": {
                          "background": [
                            {
                              "type": "solid",
                              "color": "#4183d7"
                            }
                          ],
                          "next_focus_ids": {
                            "forward": "left",
                            "up": "up",
                            "left": "left",
                            "down": "down",
                            "right": "right"
                          }
                        },
                        "actions": [
                          {
                            "log_id": "not_tapped",
                            "url": "div-action://set_state?state_id=0/right/not_tapped"
                          }
                        ]
                      }
                    }
                  ]
                },
                {
                  "type": "state",
                  "div_id": "down",
                  "states": [
                    {
                      "state_id": "not_tapped",
                      "div": {
                        "type": "button",
                        "id": "down",
                        "text": "Down",
                        "height": {
                          "type": "fixed",
                          "value": 30
                        },
                        "focus": {
                          "background": [
                            {
                              "type": "solid",
                              "color": "#ff7f50"
                            }
                          ],
                          "next_focus_ids": {
                            "forward": "left",
                            "up": "up",
                            "left": "left",
                            "down": "down",
                            "right": "right"
                          }
                        },
                        "actions": [
                          {
                            "log_id": "not_tapped",
                            "url": "div-action://set_state?state_id=0/down/tapped"
                          }
                        ]
                      }
                    },
                    {
                      "state_id": "tapped",
                      "div": {
                        "type": "button",
                        "id": "down",
                        "text": "Down",
                        "height": {
                          "type": "fixed",
                          "value": 30
                        },
                        "font_weight": "bold",
                        "focus": {
                          "background": [
                            {
                              "type": "solid",
                              "color": "#4183d7"
                            }
                          ],
                          "next_focus_ids": {
                            "forward": "up",
                            "up": "up",
                            "left": "left",
                            "down": "down",
                            "right": "right"
                          }
                        },
                        "actions": [
                          {
                            "log_id": "not_tapped",
                            "url": "div-action://set_state?state_id=0/down/not_tapped"
                          }
                        ]
                      }
                    }
                  ]
                }
              ]
            }
          ]
        }
      }
    ]
  }
}