/********************************************************
+*   (c) Mojang. All rights reserved                       *
+*   (c) Microsoft. All rights reserved.                   *
+*********************************************************/

{
  "namespace": "settings_common",

  "arrow_image": {
    "$alpha|default": 1.0,
    "type": "image",
    "layer": 1,
    "texture": "textures/ui/arrowRight",
    "size": [ 8, 8 ],
    "alpha": "$alpha"
  },

  "dropdown_chevron_image": {
    "$alpha|default": 1.0,
    "type": "image",
    "layer": 1,
    "texture": "textures/ui/dropdown_chevron",
    "size": [ 8, 8 ],
    "alpha": "$alpha"
  },

  "action_button@common_buttons.light_text_button": {
    "$pressed_button_name|default": "unset_button_name",
    "$button_text|default": "unset $button_text",
    "size": [ "100%", 30 ],
    "anchor_from": "center",
    "anchor_to": "center"
  },

  "link_button@common_buttons.hyperlink_button": {
    "$button_text|default": "unset $button_text",
    "size": [ "100%", 30 ],
    "$button_size_override": [ "100%", "100% + 1px" ],
    "anchor_from": "center",
    "anchor_to": "center",
    "property_bag": {
      "#hyperlink": "unset #hyperlink in property_bag"
    }
  },

  "option_group_label": {
    "type": "panel",
    "size": [ "100%", "100%c + 9px" ],
    "$text|default": "unset $text",
    "$text_bindings|default": [],
    "controls": [
      {
        "text": {
          "type": "label",
          "color": "$main_header_text_color",
          "text": "$text",
          "anchor_from": "top_left",
          "anchor_to": "top_left",
          "max_size": [ "100%", "default" ],
          "offset": [ 0, 4 ],
          "locked_alpha": 0.5,
          "bindings": "$text_bindings"
        }
      }
    ]
  },

  "option_generic": {
    "type": "panel",
    "$option_generic_panel_size|default": [ "100%", "100%c" ],
    "size": "$option_generic_panel_size",
    "$enabled|default": true,
    "$option_enabled_binding_name|default": "",
    "controls": [
      { "option_generic_core@settings_common.option_generic_core": { } }
    ]
  },

  "white_label": {
    "type": "label",
    "color": "$main_header_text_color",
    "text": "$text"
  },

  // option_generic and option_generic_core are separated so that $enabled and
  // $option_enabled_binding_name are guaranteed to be defined - otherwise, the
  // variables section now in option_generic_core chokes.
  "option_generic_core": {
    "$allow_data_binding|default": true,
    "$option_label|default": "",
    "$show_option_label|default": true,
    "$label_bindings|default": [],
    "$one_line_layout|default": false,
    "$option_enabled_binding_type|default": "global",
    "$option_label_alignment|default": "left",
    "$label_offset|default": [ 0, 0 ],
    "type": "stack_panel",
    "size": [ "100%", "100%c" ],
    "enabled": "$enabled",
    "variables": [
      {
        "requires": "(not $enabled or not $option_enabled_binding_name)",
        "$option_enabled_binding_type": "none",
        "$option_enabled_binding_name": "#not_data_bound"
      }
    ],
    "bindings": [
      {
        "binding_type": "$option_enabled_binding_type",
        "binding_name": "$option_enabled_binding_name",
        "binding_name_override": "#enabled"
      }
    ],
    "controls": [
      {
        "two_line_layout": {
          "ignored": "($one_line_layout)",
          "type": "stack_panel",
          "orientation": "vertical",
          "size": [ "100%", "100%c" ],
          "controls": [
            {
              "option_label_panel": {
                "type": "panel",
                "size": [ "100%", "100%c" ],
                "controls": [
                  {
                    "option_label": {
                      "type": "label",
                      "text_alignment": "$option_label_alignment",
                      "color": "$main_header_text_color",
                      "size": [ "100%", "default" ],
                      "offset": "$label_offset",
                      "layer": 1,
                      "text": "$option_label",
                      "visible": "$show_option_label",
                      "bindings": "$label_bindings",
                      "locked_alpha": 0.5
                    }
                  }
                ]
              }
            },
            {
              "spacer": {
                "type": "panel",
                "visible": "$show_option_label",
                "size": [ 0, 1 ]
              }
            },
            {
              "$control_name@$control_name": {
                "anchor_from": "top_left",
                "anchor_to": "top_left"
              }
            }
          ]
        }
      },
      {
        "one_line_layout": {
          "ignored": "(not $one_line_layout)",
          "type": "panel",
          // Since the label and control are on the same line in this layout,
          // the height of the overall control should *not* be the sum of the
          // heights of the two, which is what a height of "100%c" alone would
          // mean, regardless of how the label and control are positioned
          // relative to each other.  Instead, the height should be the max of
          // the two heights.  Right now, the only control using this layout is
          // the toggle, meaning that height is either 16px (the height of the
          // toggle itself) or 100%c-16px (the height of the label, which varies
          // due to line wrapping, and can only be obtained by subtracting the
          // known height of the toggle, 16px, from the sum of the heights of
          // the toggle and label, 100%c).
          // If this layout is used for any other controls, then $line_size and
          // $min_line_size will need to be changed accordingly, just like
          // $label_size and $label_offset.
          "$line_size|default": [ "100%", "100%c - 16px" ],
          "$line_min_size|default": [ "100%", "16px" ],
          "size": "$line_size",
          "min_size": "$line_min_size",
          "$label_size|default": [ "100% - 34px", "default" ],
          "$label_offset|default": [ 34, 0 ],
          "controls": [
            {
              "$control_name@$control_name": {
                "anchor_from": "top_left",
                "anchor_to": "top_left"
              }
            },
            {
              "option_label": {
                "type": "label",
                "color": "$main_header_text_color",
                "text_alignment": "$option_label_alignment",
                "layer": 1,
                "size": "$label_size",
                "offset": "$label_offset",
                "anchor_from": "left_middle",
                "anchor_to": "left_middle",
                "text": "$option_label",
                "visible": "$show_option_label",
                "bindings": "$label_bindings",
                "locked_alpha": 0.5
              }
            }
          ]
        }
      },
      {
        "spacer": {
          "type": "panel",
          "size": [ 0, 4 ]
        }
      }
    ]
  },

  "option_text_edit_control@common.text_edit_box": {
    "$option_text_edit_control_size|default": [ "100%", "30px" ],
    "size": "$option_text_edit_control_size",
    "max_length": "$max_text_edit_length",
    "$text_edit_box_content_binding_name": "$option_binding_name",
    "$text_edit_box_binding_collection_name": "$option_binding_name",
    "$text_edit_box_binding_type": "global",
    "$text_box_enabled_binding_name": "$option_enabled_binding_name",
    "enabled": "$enabled",
    "$place_holder_text": "$option_place_holder_text",
    "variables": [
      {
        "requires": "(not $option_enabled_binding_name or not $enabled)",
        "$text_box_enabled_binding_name": "#not_data_bound",
        "$text_edit_box_enabled_binding_type": "none"
      }
    ]
  },

  "option_text_edit_control_with_button": {
    "type": "stack_panel",
    "orientation": "horizontal",
    "size": [ "100%", "30px" ],
    "controls": [
      {
        "text_box@common.text_edit_box": {
          "size": [ "85%", "100%" ],
          "max_length": "$max_text_edit_length",
          "$text_edit_box_content_binding_name": "$option_binding_name",
          "$text_edit_box_binding_collection_name": "$option_binding_name",
          "$text_edit_box_binding_type": "global",
          "$text_box_enabled_binding_name": "$option_enabled_binding_name",
          "enabled": "$enabled",
          "$place_holder_text": "$option_place_holder_text",
          "variables": [
            {
              "requires": "(not $option_enabled_binding_name or not $enabled)",
              "$text_box_enabled_binding_name": "#not_data_bound",
              "$text_edit_box_enabled_binding_type": "none"
            }
          ]
        }
      },
      {
        "button@common_buttons.light_glyph_button": {
          "$button_content": "settings_common.arrow_image",
          "size": [ "fill", "100%" ]
        }
      }
    ]
  },

  "option_toggle_state_template": {
    "type": "image",
    "size": [ 30, 16 ],
    "anchor_from": "top_left",
    "anchor_to": "top_left"
  },

  "option_toggle_on@settings_common.option_toggle_state_template": {
    "texture": "textures/ui/toggle_on"
  },

  "option_toggle_off@settings_common.option_toggle_state_template": {
    "texture": "textures/ui/toggle_off"
  },

  "option_toggle_on_hover@settings_common.option_toggle_state_template": {
    "texture": "textures/ui/toggle_on_hover"
  },

  "option_toggle_off_hover@settings_common.option_toggle_state_template": {
    "texture": "textures/ui/toggle_off_hover"
  },

  "option_toggle_on_locked@settings_common.option_toggle_on": {
    "alpha": 0.5
  },

  "option_toggle_off_locked@settings_common.option_toggle_off": {
    "alpha": 0.5
  },

  "option_toggle_control@common.toggle": {
    "layer": 2,
    "$toggle_state_binding_name|default": "$option_binding_name",
    "$toggle_enabled_binding_name|default": "$option_enabled_binding_name",
    "$toggle_enabled_binding_type|default": "global",
    "size": [ "100%", "100%c" ],
    "$binding_type": "global",
    "$binding_condition": "once",
    "$unchecked_control": "settings_common.option_toggle_off",
    "$checked_control": "settings_common.option_toggle_on",
    "$unchecked_hover_control": "settings_common.option_toggle_off_hover",
    "$checked_hover_control": "settings_common.option_toggle_on_hover",
    "$unchecked_locked_control": "settings_common.option_toggle_off_locked",
    "$unchecked_locked_hover_control": "settings_common.option_toggle_off_locked",
    "$checked_locked_control": "settings_common.option_toggle_on_locked",
    "$checked_locked_hover_control": "settings_common.option_toggle_on_locked",

    "$enable_directional_toggling": false,

    "enabled": "$enabled",
    "variables": [
      {
        "requires": "(not $option_enabled_binding_name or not $enabled)",
        "$toggle_enabled_binding_name": "#not_data_bound",
        "$toggle_enabled_binding_type": "none"
      }
    ]
  },

  "radio_visuals_unchecked@radio_visuals": {
    "$radio_texture": "textures/ui/radio_off"
  },

  "radio_visuals_checked@radio_visuals": {
    "$radio_texture": "textures/ui/radio_on"
  },

  "radio_visuals_unchecked_locked@radio_visuals": {
    "$radio_texture": "textures/ui/radio_off",
    "$alpha": 0.5
  },

  "radio_visuals_checked_locked@radio_visuals": {
    "$radio_texture": "textures/ui/radio_on",
    "$alpha": 0.5
  },

  "radio_visuals_unchecked_hover@radio_visuals": {
    "$radio_texture": "textures/ui/radio_off_hover"
  },

  "radio_visuals_checked_hover@radio_visuals": {
    "$radio_texture": "textures/ui/radio_on_hover"
  },

  "radio_visuals": {
    "type": "panel",
    "size": [ "100%", 16 ],
    "$alpha|default": 1.0,
    "$radio_label_bindings|default": [],
    "$radio_label_color|default": "$main_header_text_color",
    "$no_label|default": false,
    "controls": [
      {
        "radio_image": {
          "type": "image",
          "texture": "$radio_texture",
          "alpha": "$alpha",
          "anchor_from": "left_middle",
          "anchor_to": "left_middle",
          "size": [ 10, 10 ]
        }
      },
      {
        "radio_label": {
          "ignored": "($no_label)",
          "type": "label",
          "anchor_from": "left_middle",
          "anchor_to": "left_middle",
          "text": "$radio_label_text",
          "color": "$radio_label_color",
          "offset": [ 16, 0.5 ],
          "size": [ "100% - 16px", "default" ],
          "alpha": "$alpha",
          "bindings": "$radio_label_bindings"
        }
      }
    ]
  },

  "radio_with_label_core@common.radio_toggle": {
    "$unchecked_control|default": "settings_common.radio_visuals_unchecked",
    "$checked_control|default": "settings_common.radio_visuals_checked",
    "$unchecked_hover_control|default": "settings_common.radio_visuals_unchecked_hover",
    "$checked_hover_control|default": "settings_common.radio_visuals_checked_hover",
    "$unchecked_locked_control|default": "settings_common.radio_visuals_unchecked_locked",
    "$unchecked_locked_hover_control|default": "settings_common.radio_visuals_unchecked_locked",
    "$checked_locked_control|default": "settings_common.radio_visuals_checked_locked",
    "$checked_locked_hover_control|default": "settings_common.radio_visuals_checked_locked",
    "$radio_toggle_group": true,
    "size": [ "100%", "100%c" ],
    "$toggle_name|default": "$toggle_state_binding_name",
    "$toggle_enabled_binding_name": "$option_enabled_binding_name",

    "enabled": "$enabled",
    "$toggle_enabled_binding_type": "global",
    "variables": [
      {
        "requires": "(not $option_enabled_binding_name or not $enabled)",
        "$toggle_enabled_binding_name": "#not_data_bound",
        "$toggle_enabled_binding_type": "none"
      }
    ]
  },

  "option_radio_group_control": {
    "type": "stack_panel",
    "size": [ "100%", "100%c" ],
    "controls": "$radio_buttons",
    /* Here's an example of how $radio_buttons should be defined:
    "$radio_buttons": [
      {
        "@settings_common.radio_with_label": {
          "$toggle_state_binding_name": "#game_mode_radio_survival",
          "$radio_label_text": "realmsSettingsScreen.survivalRadioButton",
        }
      },
      {
        "@settings_common.radio_with_label": {
          "$toggle_state_binding_name": "#game_mode_radio_creative",
          "$radio_label_text": "realmsSettingsScreen.creativeRadioButton",
        }
      }
    ]
    */
    "$radio_factory|default": { "name": "empty" },
    "$radio_collection_name|default": "",
    "$radio_bindings|default": [],

    "factory": "$radio_factory",
    "collection_name": "$radio_collection_name",
    "bindings": "$radio_bindings"
  },

  "radio_with_label": {
    "type": "panel",
    "anchor_from": "top_left",
    "anchor_to": "top_left",
    "size": [ "100%", "17px" ],
    "offset": [ 3, 0 ],
    "$enabled|default": true,
    "controls": [
      { "radio_with_label_core@settings_common.radio_with_label_core": {} }
    ]
  },

  "option_slider_control": {
    "type": "panel",
    "size": [ "100% - 2px", 16 ],
    "controls": [
      {
        "slider@common.slider": {
          "size": [ "100%-8px", 10 ],
          "$slider_box_size": [ 10, 16 ],
          "offset": [ 1, 0 ],

          "enabled": "$enabled",
          "$slider_enabled_binding_name": "$option_enabled_binding_name",
          "$slider_enabled_binding_type": "global",
          "variables": [
            {
              "requires": "(not $option_enabled_binding_name or not $enabled)",
              "$slider_enabled_binding_name": "#not_data_bound",
              "$slider_enabled_binding_type": "none"
            }
          ]
        }
      }
    ]
  },

  "default_options_dropdown_toggle_button_state_content": {
    "type": "stack_panel",
    // new_button_state has a layer of 2
    "layer": 3,
    "orientation": "horizontal",
    "size": [ "100% - 16px", "100% - 8px" ],
    "controls": [
      {
        "label_panel": {
          "type": "panel",
          "layer": 1,
          "size": [ "fill", "100%" ],
          "controls": [
            {
              "label@common.new_button_label": {
                "layer": 1,
                "$options_dropdown_label_color_binding_type|default": "none",
                "$options_dropdown_label_color_binding|default": "",
                "anchor_from": "left_middle",
                "anchor_to": "left_middle",
                "size": [ "100%", "default" ],
                "max_size": [ "100%", "100%" ],
                "text": "$options_dropdown_toggle_label_binding",
                "alpha": "$content_alpha",

                "$options_dropdown_toggle_label_binding_type|default": "global",
                "$options_dropdown_toggle_label_binding_collection_name|default": "",
                "bindings": [
                  {
                    "binding_name": "$options_dropdown_toggle_label_binding",
                    "binding_condition": "none",
                    "binding_type": "$options_dropdown_toggle_label_binding_type",
                    "binding_collection_name": "$options_dropdown_toggle_label_binding_collection_name"
                  },
                  {
                    "binding_name": "$options_dropdown_label_color_binding",
                    "binding_type": "$options_dropdown_label_color_binding_type",
                    "binding_name_override": "#color"
                  }
                ]
              }
            }
          ]
        }
      },
      {
        "arrow_panel": {
          "type": "panel",
          "layer": 1,
          "size": [ "100%c", "100%" ],
          "controls": [
            {
              "dropdown_chevron_image@dropdown_chevron_image": {}
            }
          ]
        }
      }
    ]
  },

  "options_dropdown_toggle_control@common_toggles.light_template_toggle": {
    "size": [ "100%", "100%" ],
    "$button_type_panel|default": "settings_common.default_options_dropdown_toggle_button_state_content",

    "enabled": "$enabled",
    "$toggle_enabled_binding_name|default": "$option_enabled_binding_name",
    "$toggle_enabled_binding_type|default": "global",
    "$toggle_binding_type|default": "global",
    "variables": [
      {
        "requires": "(not $option_enabled_binding_name or not $enabled)",
        "$toggle_enabled_binding_name": "#not_data_bound",
        "$toggle_enabled_binding_type": "none"
      }
    ]
  },

  "options_dropdown_dark_toggle_control@common_toggles.dark_template_toggle": {
    "size": [ "100%", "100%" ],
    "$button_type_panel|default": "settings_common.default_options_dropdown_toggle_button_state_content",

    "enabled": "$enabled",
    "$toggle_enabled_binding_name|default": "$option_enabled_binding_name",
    "$toggle_enabled_binding_type|default": "global",
    "$toggle_binding_type|default": "global",
    "variables": [
      {
        "requires": "(not $option_enabled_binding_name or not $enabled)",
        "$toggle_enabled_binding_name": "#not_data_bound",
        "$toggle_enabled_binding_type": "none"
      }
    ]
  },

  "option_dropdown_control": {
    "type": "panel",
    "$option_dropdown_size|default": [ "100%", 30 ],
    "size": "$option_dropdown_size",
    "anchor_from": "center",
    "anchor_to": "center",
    "$dropdown_background_control|default": "common.dropdown_background",
    "$option_dropdown_type|default": "common.dropdown",
    "controls": [
      {
        "dropdown@$option_dropdown_type": {
          "$dropdown_toggle": "settings_common.options_dropdown_toggle_control",
          "$dropdown_background": "$dropdown_background_control",
          // you need to specify the content with "$dropdown_content"
          "$dropdown_content|default": "unset_dropdown_content",
          // you need to specify a unique name with "$dropdown_name"
          "$dropdown_name|default": "unset $dropdown_name",
          // you need to specify a the label with "$options_dropdown_toggle_label_binding"
          "$options_dropdown_toggle_label_binding|default": "unset $options_dropdown_toggle_label_text",
          "$locked_alpha": 0.5
        }
      }
    ]
  },

  "option_dropdown_control_no_scroll@settings_common.option_dropdown_control": {
    "$option_dropdown_type": "common.dropdown_no_scrollpanel"
  },

  "option_info_label_control": {
    "type": "image",
    "texture": "textures/ui/text_label_box",
    "size": [ "100%", "100%c + 6px" ],
    "$used_fontsize|default": "normal",
    "$used_fonttype|default": "default",
    "controls": [
      {
        "control": {
          "type": "label",
          "color": "$main_header_text_color",
          "size": [ "100% - 8px", "default" ],
          "layer": 1,
          "text": "$container_text_binding_name",
          "font_size": "$used_fontsize",
          "font_type": "$used_fonttype",
          "bindings": [
            {
              "binding_name": "$container_text_binding_name"
            }
          ]
        }
      }
    ]
  },

  "option_toggle@settings_common.option_generic": {
    "$control_name": "settings_common.option_toggle_control",
    "variables": [
      {
        "requires": "$desktop_screen",
        "$one_line_layout": true
      }
    ]
  },

  "option_radio_group@settings_common.option_generic": {
    "$control_name": "settings_common.option_radio_group_control"
  },

  "option_radio_dropdown_group": {
    "type": "panel",
    "size": [ "100% - 4px", "100%c + 4px" ],
    "offset": [ 2, 2 ],
    "controls": [
      {
        "radio_control_group@settings_common.option_radio_group_control": {
          "anchor_from": "top_left",
          "anchor_to": "top_left"
        }
      }
    ]
  },

  "option_text_edit@settings_common.option_generic": {
    "$option_place_holder_text|default": "",
    "$max_text_edit_length|default": 30,
    "$control_name": "settings_common.option_text_edit_control"
  },

  "option_text_edit_with_button@settings_common.option_generic": {
    "$option_place_holder_text|default": "",
    "$max_text_edit_length|default": 30,
    "$control_name": "settings_common.option_text_edit_control_with_button"
  },

  "option_slider@settings_common.option_generic": {
    "$control_name": "settings_common.option_slider_control"
  },

  "option_dropdown@settings_common.option_generic": {
    "$control_name": "settings_common.option_dropdown_control"
  },


  "option_dropdown_no_scroll@settings_common.option_generic": {
    "$control_name": "settings_common.option_dropdown_control_no_scroll"
  },

  "option_custom_control@settings_common.option_generic": {
    // user must set $control_name
  },

  "option_info_label@settings_common.option_generic": {
    "$control_name": "settings_common.option_info_label_control"
  },

  "dynamic_dialog_screen@common.base_screen": {
    "type": "screen",
    "cache_screen": true,

    "button_mappings": [
      {
        "from_button_id": "button.menu_cancel",
        "to_button_id": "button.menu_exit",
        "mapping_type": "global"
      },
      {
        "from_button_id": "button.menu_tab_left",
        "to_button_id": "button.menu_tab_left",
        "mapping_type": "global",
        "scope": "view"
      },
      {
        "from_button_id": "button.menu_tab_right",
        "to_button_id": "button.menu_tab_right",
        "mapping_type": "global",
        "scope": "view"
      }
    ],
    "$screen_content": "settings_common.settings_content",
    "$header_safezone_control": "common_store.store_top_bar_filler",
    "$header_bar_control": "common_store.store_top_bar",    
    "$is_full_screen_layout": true
  },

  "settings_content": {
    "type": "panel",
    "controls": [
      {
        "stack_panel": {
          "type": "stack_panel",
          "size": [ "100%", "100%" ],
          "controls": [
            {
              "content_panel": {
                "type": "panel",
                "size": [ "100%", "fill" ],

                "controls": [
                  {
                    "common_panel@common.fullscreen_header": {
                      "$dialog_background": "dialog_background_hollow_3"
                    }
                  },
                  {
                    "container": {
                      "type": "panel",
                      "size": [ "100%", "100% - 4px" ],
                      "controls": [
                        { "$dialog_content@$dialog_content": {} }
                      ]
                    }
                  }
                ]
              }
            }
          ]
        }
      },
      {
        "popup_dialog_factory": {
          "type": "factory",
          "control_ids": {
            "purchase_failed": "@realms_create.popup_dialog__purchase_failed",
            "purchase_in_progress": "@realms_create.popup_dialog__purchase_in_progress",
            "share_by_link": "@realms_whitelist.popup_dialog__share_by_link",
            "options_modal": "@realms_whitelist.popup_dialog__options",
            "backups_modal": "@realms_settings.popup_dialog__backups"
          }
        }
      }
    ]
  },

  "toggle_button_control": {
    "type": "panel",
    "$glyph_offset|default": [ 5, 0 ],
    "$glyph_anchor_from|default": "left_middle",
    "$glyph_anchor_to|default": "left_middle",
    "$button_label_offset|default": [ 34, 0 ],
    "layer": 2,
    "controls": [
      {
        "glyph": {
          "type": "image",
          "anchor_from": "$glyph_anchor_from",
          "anchor_to": "$glyph_anchor_to",
          "offset": "$glyph_offset",
          "texture": "$glyph_texture",
          "size": "$glyph_size",
          "layer": 3,
          "color": "$glyph_color",
          "alpha": "$content_alpha",

          "$glyph_bindings|default": [],
          "bindings": "$glyph_bindings"
        }
      },
      {
        "glyph_color": {
          "type": "image",
          "anchor_from": "$glyph_anchor_from",
          "anchor_to": "$glyph_anchor_to",
          "offset": "$glyph_offset",
          "texture": "$glyph_color_texture",
          "size": "$glyph_size",
          "layer": 4,
          "alpha": "$content_alpha",

          "$glyph_color_bindings|default": [],
          "bindings": "$glyph_color_bindings"
        }
      },
      {
        "progress_loading_bars@progress.progress_loading_bars": {
          "anchor_from": "left_middle",
          "anchor_to": "left_middle",
          "color": "$glyph_color",
          "offset": [ 5, 0 ],
          "layer": 5,
          "size": "$glyph_size",
          "visible": false,
          "$glyph_progress_bindings|default": [],
          "bindings": "$glyph_progress_bindings"
        }
      },
      {
        "tab_button_text": {
          "type": "label",
          "anchor_from": "left_middle",
          "anchor_to": "left_middle",
          "size": [ "100% - 38px", "default" ],
          "max_size": [ "100% - 38px", "100% - 4px" ],
          "offset": "$button_label_offset",
          "text": "$button_text",
          "layer": 3,
          "color": "$text_color",
          "alpha": "$content_alpha",

          "$button_text_binding_type|default": "none",
          "$button_text_grid_collection_name|default": "",
          "$button_text_binding_condition|default": "none",

          "bindings": [
            {
              "binding_type": "$button_text_binding_type",
              "binding_condition": "$button_text_binding_condition",
              "binding_collection_name": "$button_text_grid_collection_name",
              "binding_name": "$button_text",
              "binding_name_override": "$button_text"
            }
          ]
        }
      }
    ]
  },

  "section_toggle_base@common_toggles.light_ui_toggle": {
    "anchor_from": "top_left",
    "anchor_to": "top_left",
    "size": [ "100%", "30px" ],
    "$button_size_override": [ "100%", "100% + 1px" ],
    "$button_type_panel": "settings_common.toggle_button_control",

    "$radio_toggle_group": true,
    "$toggle_name": "navigation_tab",
    "$toggle_group_default_selected": "$default_selector_toggle_index",

    "$toggle_tab_focus_binding_type": "global",
    "$toggle_tab_focus_binding_name": "#navigation_tab_focus_precedence",
    "$toggle_on_hover_binding_type": "global",
    "$toggle_on_hover_binding_name": "#toggle_on_hover"
  },

  // upper right title
  "section_title_label": {
    "type": "label",
    "anchor_from": "top_middle",
    "anchor_to": "top_middle",
    "layer": 2,
    "color": "$title_text_color",
    "text": "#section_title",
    "text_alignment": "center",
    "bindings": [
      {
        "binding_name": "#section_title"
      }
    ]
  },

  // upper left title
  "dialog_title_label": {
    "type": "label",
    "anchor_from": "top_left",
    "anchor_to": "top_left",
    "layer": 2,
    "color": "$title_text_color",
    "text": "#dialog_title",
    "bindings": [
      {
        "binding_name": "#dialog_title"
      }
    ]
  },

  "dialog_titles": {
    "type": "stack_panel",
    "orientation": "horizontal",
    "anchor_from": "top_left",
    "anchor_to": "top_left",
    "size": [ "100%", 15 ],
    "offset": [ 0, 3.5 ],
    "controls": [
      {
        "left_padding": {
          "type": "panel",
          "size": [ 18, "100%" ]
        }
      },
      {
        "dialog_title_label@settings_common.dialog_title_label": {
          "size": [ "40% - 3px", "100%" ]
        }
      },
      {
        "center_padding": {
          "type": "panel",
          "size": [ 9, "100%" ]
        }
      },
      {
        "section_title_label@settings_common.section_title_label": {
          "size": [ "fill", "100%" ]
        }
      },
      {
        "right_padding_is_always_right": {
          "type": "panel",
          "size": [ 22, "100%" ]
        }
      }
    ]
  },

  "dialog_content": {
    "type": "panel",
    "anchor_from": "top_middle",
    "anchor_to": "top_middle",
    "controls": [
      { "dialog_titles@settings_common.dialog_titles": {} },
      { "selector_area@settings_common.selector_area": {} },
      { "content_area@settings_common.content_area": {} },
      { "section_divider@settings_common.section_divider": { } }
    ]
  },

  "selector_group_label": {
    "type": "label",
    "size": [ "100%", "default" ],
    "color": "$main_header_text_color",
    "offset": [ 15, 0 ]
  },

  "scrollable_selector_area_content": {
    "type": "panel",
    "offset": [ "2px", "2px" ],
    "size": [ "100% - 4px", "100%c + 4px" ],
    "controls": [
      { "$selector_stack_panel@$selector_stack_panel": {} }
    ]
  },

  // left side
  "selector_area": {
    "type": "panel",
    "offset": [ 2, "21px" ],
    "size": [ "40% - 3px", "100% - 19px" ],
    "anchor_from": "top_left",
    "anchor_to": "top_left",
    "layer": 2,
    "focus_container": true,
    "use_last_focus": true,
    "$focus_nagivation_mode_override_down|default": "contained",
    "$focus_nagivation_mode_override_up|default": "contained",
    "$focus_nagivation_mode_override_left|default": "",
    "$focus_nagivation_mode_override_right|default": "",
    "focus_nagivation_mode_down": "$focus_nagivation_mode_override_down",
    "focus_nagivation_mode_up": "$focus_nagivation_mode_override_up",
    "focus_nagivation_mode_left": "$focus_nagivation_mode_override_left",
    "focus_nagivation_mode_right": "$focus_nagivation_mode_override_right",
    "controls": [
      {
        "scrolling_panel@common.scrolling_panel": {
          "$scrolling_content": "settings_common.scrollable_selector_area_content",
          "$show_background": false,
          "$scroll_size": [ "5px", "100% - 4px" ],
          "$scroll_bar_left_padding_size": [ 1, 0 ]
        }
      }
    ]
  },

  // right side
  "content_area": {
    "type": "panel",
    "offset": [ "-1px", "21px" ],
    "size": [ "60% - 8px", "100% - 19px" ],
    "anchor_from": "top_right",
    "anchor_to": "top_right",
    "layer": 1,

    "focus_container": true,
    "use_last_focus": false,
    "$focus_nagivation_mode_override_down|default": "contained",
    "$focus_nagivation_mode_override_up|default": "contained",
    "$focus_nagivation_mode_override_left|default": "",
    "$focus_nagivation_mode_override_right|default": "",
    "focus_nagivation_mode_down": "$focus_nagivation_mode_override_down",
    "focus_nagivation_mode_up": "$focus_nagivation_mode_override_up",
    "focus_nagivation_mode_left": "$focus_nagivation_mode_override_left",
    "focus_nagivation_mode_right": "$focus_nagivation_mode_override_right",

    "controls": [
      {
        "control": {
          "type": "stack_panel",
          "size": [ "100%", "100%" ],
          "anchor_from": "top_right",
          "anchor_to": "top_right",
          "controls": [
            {
              "header_panel": {
                "type": "panel",
                "layer": 20,
                "size": [ "100%", "100%c" ],
                "anchor_from": "top_left",
                "anchor_to": "top_left",
                "controls": [
                  {
                    "content@$section_header_panels": {}
                  }
                ]
              }
            },
            {
              "scrolling_panel@common.scrolling_panel": {
                "size": [ "100%", "fill" ],
                "$scrolling_content": "$section_content_panels",
                "$show_background": false,
                "$scroll_size": [ "5px", "100% - 4px" ],
                "$scroll_bar_left_padding_size": [ 1, 0 ]
              }
            },
            {
              "footer_panel": {
                "type": "panel",
                "layer": 20,
                "size": [ "100%", "100%c" ],
                "anchor_from": "bottom_left",
                "anchor_to": "bottom_left",
                "controls": [
                  {
                    "content@$section_footer_panels": {}
                  }
                ]
              }
            }
          ]
        }
      }
    ]
  },

  // divider between two sides
  "section_divider": {
    "type": "image",
    "offset": [ "40%", "20px" ],
    "size": [ "4px", "100% - 18px" ],
    "anchor_from": "top_left",
    "anchor_to": "top_left",
    "layer": 3,
    "texture": "textures/ui/HowToPlayDivider"
  },

  "screen_base@settings_common.dynamic_dialog_screen": {
    "$dialog_content": "settings_common.dialog_content"
  }
}