/********************************************************
*   (c) Mojang. All rights reserved                      *
*   (c) Microsoft. All rights reserved.                  *
*********************************************************/
{
  "namespace": "code",

  "toolbar_button@common.button": {
    "size": [ 16, 16 ],
    "layer": 3,
    "controls": [
      {
        "default": {
          "type": "image",
          "texture": "$default_image"
        }
      },
      {
        "hover": {
          "type": "image",
          "texture": "$hover_image"
        }
      },
      {
        "pressed": {
          "type": "image",
          "texture": "$hover_image"
        }
      }
    ]
  },

  "split_left_button@code.toolbar_button": {
    "$default_image": "textures/ui/left_split_panel_default",
    "$hover_image": "textures/ui/left_split_panel_hover",
    "$pressed_button_name": "button.split_left"
  },

  "split_right_button@code.toolbar_button": {
    "$default_image": "textures/ui/right_split_panel_default",
    "$hover_image": "textures/ui/right_split_panel_hover",
    "$pressed_button_name": "button.split_right"
  },

  "reset_button@code.toolbar_button": {
    "$default_image": "textures/ui/code_reset_default",
    "$hover_image": "textures/ui/code_reset_hover",
    "$pressed_button_name": "button.reset"
  },

  "maximize_button@code.toolbar_button": {
    "$default_image": "textures/ui/maximize_arrow_default",
    "$hover_image": "textures/ui/maximize_arrow_hover",
    "$pressed_button_name": "button.maximize"
  },

  "restore_button@code.toolbar_button": {
    "$default_image": "textures/ui/restore_arrow_default",
    "$hover_image": "textures/ui/restore_arrow_hover",
    "$pressed_button_name": "button.restore"
  },

  "close_button@common.empty_panel": {
    "size": [ "100%c", "100%c" ],
    "controls": [
      {
        "button@common.close_button": {
          "$close_button_panel_size": [ 15, 15 ],
          "$close_button_offset": [ 0, -2 ]
        }
      }
    ]
  },

  "editor_button_image": {
    "type": "image",
    "size": [ "100%y", "100%" ],
    "texture": "$border_texture",
    "controls": [
      {
        "image": {
          "type": "image",
          "layer": 1,
          "texture": "#texture",
          "pixel_perfect": false,
          "bilinear": true,
          "size": [ "100% - 2px", "100% - 2px" ],
          "bindings": [
            {
              "binding_name": "#editor_button_default",
              "binding_name_override": "#texture",
              "binding_type": "collection",
              "binding_collection_name": "editor_buttons_collection",
              "binding_collection_prefix": "editor_buttons"
            }
          ]
        }
      }
    ]
  },

  "editor_button_content_panel": {
    "type": "stack_panel",
    "orientation": "horizontal",
    "size": [ "100%", "100%" ],
    "$border_texture": "textures/ui/default_indent",
    "variables": [
      {
        "requires": "$default_state",
        "$border_texture": "textures/ui/default_indent"
      },
      {
        "requires": "$hover_state",
        "$border_texture": "textures/ui/world_screenshot_focus_border"
      },
      {
        "requires": "$pressed_state",
        "$border_texture": "textures/ui/world_screenshot_focus_border"
      }
    ],
    "controls": [
      { "editor_icon@code.editor_button_image": {} },
      {
        "padded": {
          "type": "panel",
          "size": [ "fill", "100%" ],
          "controls": [
            {
              "editor_description@edu_common.light_label": {
                "size": [ "100% - 10px", "100% - 4px" ],
                "anchor_from": "center",
                "anchor_to": "center",
                "text": "#editor_button_text",
                "bindings": [
                  {
                    "binding_name": "#editor_button_text",
                    "binding_type": "collection",
                    "binding_collection_name": "editor_buttons_collection",
                    "binding_collection_prefix": "editor_buttons",
                    "binding_condition": "once"
                  }
                ]
              }
            }
          ]
        }
      }
    ]
  },

  "editor_button@common_buttons.dark_content_button": {
    "size": [ "100%", 50 ],
    "$pressed_button_name": "button.editor_button",
    "$button_content": "code.editor_button_content_panel",
    "bindings": [
      {
        "binding_type": "collection_details",
        "binding_collection_name": "editor_buttons_collection",
        "binding_collection_prefix": "editor_buttons"
      }
    ]
  },

  "editors": {
    "type": "grid",
    "size": [ "100%", "100%c" ],
    "grid_item_template": "code.editor_button",
    "grid_dimension_binding": "#editor_grid_dimensions",
    "factory": {
      "name": "editor_button_factory",
      "control_name": "code.editor_button"
    },
    "collection_name": "editor_buttons_collection",
    "bindings": [
      {
        "binding_name": "#editor_grid_dimensions"
      }
    ]
  },

  "editor_chooser@common.scrolling_panel": {
    "$show_background": false,
    "size": [ "100%", "100%" ],
    "anchor_from": "top_middle",
    "anchor_to": "top_middle",
    "$scrolling_content": "code.editor_chooser_content",
    "$scrolling_content_anchor_from": "top_middle",
    "$scrolling_content_anchor_to": "top_middle"
  },

  "editor_chooser_content": {
    "type": "stack_panel",
    "orientation": "vertical",
    "size": [ "100% - 4px", "100%c" ],
    "anchor_from": "top_middle",
    "anchor_to": "top_middle",
    "bindings": [
      {
        "binding_name": "#show_editor_chooser",
        "binding_name_override": "#visible"
      }
    ],
    "controls": [
      { "p0@common.empty_panel": { "size": [ "100%", 2 ] } },
      {
        "chooser_label_background": {
          "type": "image",
          "size": [ "100%", 25 ],
          "texture": "textures/ui/text_label_box",
          "controls": [
            {
              "chooser_label@edu_common.light_label": {
                "anchor_from": "center",
                "anchor_to": "center",
                "text_alignment": "center",
                "text": "codeScreen.chooseEditor"
              }
            }
          ]
        }
      },
      { "p1@common.empty_panel": { "size": [ "100%", 2 ] } },
      { "editors@code.editors": {} }
    ]
  },

  "webview": {
    "type": "custom",
    "anchor_from": "top_middle",
    "anchor_to": "top_middle",
    "offset": [ 0, -1 ],
    "layer": 2,
    // Extra size to overlap with the borders, as we want to maximize web view real estate
    "size": [ "100% + 14px", "100% + 9px" ],
    "renderer": "web_view_renderer",
    "bindings": [
      {
        "binding_name": "#show_webview",
        "binding_name_override": "#visible"
      },
      {
        "binding_type": "global",
        "binding_condition": "visible",
        // Binding itself doesn't do anything, but the callback is used to fill the property bag
        "binding_name": "#webview_update"
      }
    ]
  },

  "webview_progress@progress.progress_loading_bars": {
    "size": [ 100, 60 ],
    "bindings": [
      {
        "binding_name": "#show_webview_progress",
        "binding_name_override": "#visible"
      }
    ]
  },

  "code_screen_content": {
    "type": "panel",
    "size": [ "100%", "100%" ],
    "controls": [
      { "chooser@code.editor_chooser": {} },
      { "webview@code.webview": {} },
      { "progress@code.webview_progress": {} }
    ]
  },

  "dim_background": {
    "type": "image",
    "texture": "textures/ui/Banners",
    "alpha": 0.4,
    "layer": -1,
    "controls": [
      {
        "dismiss_region": {
          "type": "button",
          "button_mappings": [
            {
              "from_button_id": "button.menu_select",
              "to_button_id": "button.menu_exit",
              "mapping_type": "pressed"
            },
            {
              "from_button_id": "button.menu_ok",
              "to_button_id": "button.menu_exit",
              "mapping_type": "focused"
            }
          ]
        }
      }
    ]
  },

  "screen_exit_animation_pop_offset": {
    "anim_type": "offset",
    "easing": "out_cubic",
    "duration": "$transition_time_pop",
    "from": [ 0, 0 ],
    "to": [ 0, "100%" ],
    "play_event": "screen.exit_pop",
    "end_event": "screen.exit_end"
  },

  "screen_entrance_animation_push_offset": {
    "anim_type": "offset",
    "easing": "out_cubic",
    "duration": "$transition_time_push",
    "from": [ 0, "100%" ],
    "to": [ 0, 0 ],
    "play_event": "screen.entrance_push",
    "end_event": "screen.entrance_end"
  },

  "code_screen@common.base_screen": {
    "$screen_content": "code.code_screen_panel",
    "$screen_bg_content": "code.dim_background",
    "button_mappings": [
      {
        "from_button_id": "button.menu_cancel",
        "to_button_id": "button.menu_exit",
        "mapping_type": "global"
      }
    ],
    "$screen_animations": [
      "@common.screen_exit_animation_push_offset",
      "@code.screen_exit_animation_pop_offset",
      "@code.screen_entrance_animation_push_offset",
      "@common.screen_entrance_animation_pop_offset",
      "@common.screen_exit_animation_push_fade",
      "@common.screen_exit_animation_pop_fade",
      "@common.screen_entrance_animation_push_fade",
      "@common.screen_entrance_animation_pop_fade"
    ]
  },

  "parent_relative_panel@common_dialogs.dialog_background_hollow_3": {
    "$show_close_button|default": true,
    "$child_control|default": "common.empty_panel",
    "$left_toolbar|default": "code.left_toolbar",
    "$right_toolbar|default": "code.right_toolbar",

    "controls": [
      {
        "content_background": {
          "type": "image",
          "texture": "$dialog_background_texture",
          "layer": 1,
          "size": [ "100% - 16px", "100% - 32px" ],
          "offset": [ 0, 7 ],
          "alpha": "$fill_alpha",
          "controls": [
            { "inside_header_panel@$child_control": {} }
          ]
        }
      },
      {
        "toolbar@common.empty_panel": {
          "controls": [
            {
              "left_toolbar": {
                "layer": 20,
                "type": "panel",
                "anchor_from": "top_left",
                "anchor_to": "top_left",
                "offset": [ 6, 4 ],
                "size": [ "100%c", 18 ],
                "controls": [
                  { "toolbar@$left_toolbar": {} }
                ]
              }
            },
            {
              "right_toolbar": {
                "layer": 20,
                "type": "panel",
                "anchor_from": "top_right",
                "anchor_to": "top_right",
                "offset": [ -4, 4 ],
                "size": [ "100%c", 18 ],
                "controls": [
                  { "toolbar@$right_toolbar": {} }
                ]
              }
            },
            {
              "title_label@common_dialogs.title_label": {
                "anchor_from": "top_middle",
                "anchor_to": "top_middle",
                "offset": [ 0, 8 ]
              }
            }
          ]
        }
      },
      {
        "prevent_dismiss_region": {
          "type": "input_panel",
          // A bit big to prevent accidentally dismissing the window when touching near the edge
          "size": [ "100% + 20px", "100%" ],
          // Behind the content but in front of the background dismiss region
          "layer": 0
        }
      }
    ]
  },

  "padded_toolbar_button@common.empty_panel": {
    "size": [ "100%c + 2px", "100%c" ],
    "$toolbar_button_anchor|default": "center",
    "controls": [
      {
        "button@$toolbar_button": {
          "anchor_from": "$toolbar_button_anchor",
          "anchor_to": "$toolbar_button_anchor"
        }
      }
    ],
    "$button_visibility_binding|default": "none",
    "$button_visibility_binding_type|default": "global",
    "bindings": [
      {
        "binding_name": "$button_visibility_binding",
        "binding_type": "$button_visibility_binding_type",
        "binding_name_override": "#visible"
      }
    ]
  },

  "right_padded_toolbar_button@code.padded_toolbar_button": {
    "$toolbar_button_anchor": "top_left"
  },

  "left_padded_toolbar_button@code.padded_toolbar_button": {
    "$toolbar_button_anchor": "top_right"
  },

  "right_toolbar": {
    "type": "stack_panel",
    "orientation": "horizontal",
    "size": [ "100%c", "100%" ],

    "controls": [
      {
        "reset@code.left_padded_toolbar_button": {
          "$toolbar_button": "code.reset_button",
          "bindings": [
            {
              "binding_name": "#show_reset",
              "binding_name_override": "#visible"
            }
          ]
        }
      },
      {
        "close@code.left_padded_toolbar_button": {
          "$toolbar_button": "code.close_button",
          "$button_visibility_binding_type": "none"
        }
      }
    ]
  },

  "left_toolbar": {
    "type": "stack_panel",
    "orientation": "horizontal",
    "size": [ "100%c", "100%" ],
    "$show_toolbar_split_left|default": false,
    "$show_toolbar_split_right|default": false,
    "$show_toolbar_maximize|default": false,
    "$show_toolbar_restore|default": false,

    "controls": [
      {
        "split_left@code.right_padded_toolbar_button": {
          "$button_visibility_binding": "#show_split_right",
          "$toolbar_button": "code.split_left_button"
        }
      },
      {
        "split_right@code.right_padded_toolbar_button": {
          "$button_visibility_binding": "#show_split_left",
          "$toolbar_button": "code.split_right_button"
        }
      },
      {
        "max@code.right_padded_toolbar_button": {
          "$button_visibility_binding": "(not #show_full)",
          "$toolbar_button": "code.maximize_button"
        }
      },
      {
        "restore@code.right_padded_toolbar_button": {
          "$button_visibility_binding": "#show_full",
          "$toolbar_button": "code.restore_button"
        }
      }
    ]
  },

  "code_screen_panel_base@code.parent_relative_panel": {
    "$text_name": "codeScreen.title",
    "$child_control": "code.code_screen_content",
    "anchor_from": "$anchor_from_to",
    "anchor_to": "$anchor_from_to",
    "$show_toolbar_reset": true,
    "$show_toolbar_close": true
  },

  "split_padding@common.empty_panel": {
    "size": [ "50%", "100%" ],
    "bindings": [
      {
        "binding_name": "$split_visibility",
        "binding_condition": "always",
        "binding_name_override": "#visible"
      }
    ]
  },

  "variable_panel": {
    "size": [ "100%", "100%" ],
    "type": "stack_panel",
    "orientation": "horizontal",
    // Control the position and size of the window by toggling visibility bindings
    // to have half the panel on the left, only the right padding is visible, for full screen no padding is used, in all cases the content fills the remaining space
    "controls": [
      {
        "pad_left@code.split_padding": {
          "$split_visibility": "#show_split_right"
        }
      },
      {
        "content@$content": {
          "size": [ "fill", "100%" ]
        }
      },
      {
        "pad_right@code.split_padding": {
          "$split_visibility": "#show_split_left"
        }
      }
    ]
  },

  "code_screen_variable_panel@code.variable_panel": {
    "$content": "code_screen_panel_base",
    "$anchor_from_to": "top_left",
    "$show_toolbar_split_left": true,
    "$show_toolbar_maximize": true
  },

  "modal_text_content": {
    "type": "image",
    "texture": "textures/ui/Banners",
    "size": [ "100%", "100%" ],
    "layer": 1,
    "controls": [
      {
        "warning_text": {
          "type": "label",
          "layer": 1,
          "anchor_from": "top_middle",
          "anchor_to": "top_middle",
          "size": [ "100% - 4px", "default" ],
          "offset": [ 2, 2 ],
          "color": "$f_color_format",
          "text": "$modal_text"
        }
      }
    ]
  },

  "modal_button@common_buttons.light_text_button": {
    "button_mappings": [
      {
        "from_button_id": "button.menu_select",
        "to_button_id": "$button_mapping",
        "mapping_type": "pressed"
      },
      {
        "from_button_id": "button.menu_ok",
        "to_button_id": "$button_mapping",
        "mapping_type": "focused"
      }
    ]
  },

  "modal_ok@code.modal_button": {
    "$button_mapping": "$ok_mapping",
    "$button_text": "gui.ok"
  },

  "modal_cancel@code.modal_button": {
    "$button_mapping": "$cancel_mapping",
    "$button_text": "gui.cancel"
  },

  "modal": {
    "type": "input_panel",
    "size": [ 220, 135 ],
    "controls": [
      {
        "content@$modal_type": {
          "layer": 21
        }
      }
    ],
    "bindings": [
      {
        "binding_name": "$modal_visible_binding",
        "binding_name_override": "#visible"
      }
    ]
  },

  "one_button_modal_type@common_dialogs.main_panel_one_button": {
    "$show_close_button": false,
    "$child_control": "$modal_content",
    "$button_panel": "code.modal_ok"
  },

  "two_button_modal_type@common_dialogs.main_panel_two_buttons": {
    "$show_close_button": false,
    "$child_control": "$modal_content",
    "$top_button_panel": "code.modal_ok",
    "$bottom_button_panel": "code.modal_cancel"
  },

  "memory_error@code.modal": {
    "$modal_type": "code.one_button_modal_type",
    "$modal_content": "code.modal_text_content",
    "$modal_text": "codeScreen.memoryError",
    "$ok_mapping": "button.error_ok",
    "$modal_visible_binding": "#show_memory_error"
  },

  "memory_warning@code.modal": {
    "$modal_type": "code.two_button_modal_type",
    "$modal_content": "code.modal_text_content",
    "$modal_text": "codeScreen.memoryWarning",
    "$ok_mapping": "button.memory_warning_ok",
    "$cancel_mapping": "button.memory_warning_cancel",
    "$modal_visible_binding": "#show_memory_warning"
  },

  "network_error@code.modal": {
    "$modal_type": "code.one_button_modal_type",
    "$modal_content": "code.modal_text_content",
    "$modal_text": "codeScreen.networkError",
    "$ok_mapping": "button.error_ok",
    "$modal_visible_binding": "#show_network_error"
  },

  "reset_warning@code.modal": {
    "$modal_type": "code.two_button_modal_type",
    "$modal_content": "code.modal_text_content",
    "$modal_text": "codeScreen.resetWarning",
    "$ok_mapping": "button.reset_warning_ok",
    "$cancel_mapping": "button.reset_warning_cancel",
    "$modal_visible_binding": "#show_reset_warning"
  },

  "code_screen_panel": {
    "type": "panel",
    "controls": [
      { "code@code_screen_variable_panel": {} },
      { "memory_error@code.memory_error": {} },
      { "memory_warning@code.memory_warning": {} },
      { "network_error@code.network_error": {} },
      { "reset@code.reset_warning": {} }
    ]
  }
}