{
  "namespace": "library",

  "base_label": {
    "type": "label",
    "size": [ "100% - 8px", "100%" ],
    "offset": [ 3, 0 ],
    "anchor_from": "top_left",
    "anchor_to": "top_left",
    "layer": 1,
    "color": "$body_text_color",
    "font_type": "smooth",
    "text_alignment": "left"
  },

  "library_learn_more_button@common_buttons.light_content_button": {
    "max_size": [ 200, 30 ],
    "size": [ "100%", 30 ]
  },

  "feedback_icon": {
    "type": "image",
    "texture": "textures/ui/Feedback",
    "layer": 3,
    "size": [ 16, 16 ]
  },

  "find_more_worlds_icon": {
    "type": "image",
    "texture": "textures/ui/worldsIcon",
    "size": [ 16, 17 ]
  },

  // Used by the big library items.
  "gray_overlay": {
    "type": "image",
    "texture": "textures/ui/Gray",
    "size": [ "100%", "100%" ],
    "alpha": 0.8
  },

  "completed_item_icon": {
    "type": "image",
    "texture": "textures/ui/check",
    "size": [ 44, 32 ]
  },

  "locked_item_icon": {
    "type": "image",
    "texture": "textures/ui/lock_color",
    "size": [ 44, 44 ]
  },

  "creator_label@edu_common.readable_label": {
    "$default_font_scale_factor": 0.85,
    "$normalized_font_scale_factor": 1.0,
    "text": "#creator",
    "size": [ "100%", "default" ],
    "max_size": "$max_label_size",
    "bindings": [
      {
        "binding_type": "collection",
        "binding_collection_name": "library_items",
        "binding_name": "#creator"
      }
    ]
  },

  "search_bar@common.text_edit_box": {
    "max_length": 50,
    "anchor_from": "top_left",
    "anchor_to": "top_left",
    "size": [ "100% - 4px", 18 ],
    "layer": 5,
    "visible": "$library_screen_show_search_bar",
    "$place_holder_text": "store.search.title",
    "$text_box_name": "search_filter_text",
    "property_bag": {
      "#property_field": "#item_name"
    }
  },

  "learn_more_content": {
    "type": "panel",
    "$learn_more_text|default": "",
    "$learn_more_content|default": "common.empty_panel",
    "controls": [
      {
        "icon@$learn_more_content": {
          "anchor_to": "left_middle",
          "anchor_from": "left_middle",
          "offset": [ 7, 0 ]
        }
      },
      {
        "text_hover": {
          "ignored": "$hover_state",
          "type": "label",
          "text": "$learn_more_text",
          "color": "$light_button_default_text_color"
        }
      },
      {
        "text_default": {
          "ignored": "(not $hover_state)",
          "type": "label",
          "text": "$learn_more_text",
          "color": "$generic_button_text_color"
        }
      }
    ]
  },

  "buttons_stack_panel": {
    "size": [ "100%", "100%c" ],
    "type": "stack_panel",
    "orientation": "horizontal",
    "visible": "$library_screen_show_world_and_feedback_buttons",
    "controls": [
      {
        "worlds_wrapper": {
          "size": [ "50%", 20 ],
          "type": "panel",
          "controls": [
            {
              "library_find_more_worlds_button@library.library_learn_more_button": {
                "anchor_from": "top_middle",
                "anchor_to": "top_middle",
                "$learn_more_text": "library.findMoreWorlds",
                "$learn_more_content": "library.find_more_worlds_icon",
                "$button_content": "library.learn_more_content",
                "$pressed_button_name": "button.find_more_worlds"
              }
            }
          ]
        }
      },
      {
        "feedback_wrapper": {
          "size": [ "50%", 20 ],
          "type": "panel",
          "controls": [
            {
              "library_leave_feedback_button@library.library_learn_more_button": {
                "anchor_from": "top_middle",
                "anchor_to": "top_middle",
                "$learn_more_text": "library.leaveFeedback",
                "$learn_more_content": "library.feedback_icon",
                "$button_content": "library.learn_more_content",
                "$pressed_button_name": "button.leave_feedback"
              }
            }
          ]
        }
      }
    ]
  },

  "screen_content_stack_panel": {
    "type": "stack_panel",
    "orientation": "vertical",
    "size": [ "100%", "100%c" ],
    "controls": [
      {
        "search_bar_wrapper": {
          "type": "stack_panel",
          "size": [ "100%", "100%cm" ],
          "orientation": "horizontal",
          "controls": [
            { "padding_left@common.empty_panel": { "size": [ 2, "100%sm" ] } },
            { "library_search_bar@library.search_bar": {} }
          ]
        }
      },
      { "padding_middle@common.empty_panel": { "size": [ "100%", 4 ] } },
      { "grid_content@library.grid_content": {} },
      { "padding_bottom@common.empty_panel": { "size": [ "100%", 4 ] } },
      { "buttons_stack_panel@library.buttons_stack_panel": {} }
    ]
  },

  "scrolling_content": {
    "type": "panel",
    "size": [ "100%", "100%c" ],
    "$scrolling_content_anchor_from": "top_middle",
    "$scrolling_content_anchor_to": "top_middle",
    "controls": [
      { "screen_content_stack_panel@library.screen_content_stack_panel": {} },
      {
        "worlds_populating_progress@progress.progress_panel": {
          "size": [ 200, 200 ],
          "bindings": [
            {
              "binding_name": "#show_worlds_populating_progress",
              "binding_name_override": "#visible"
            }
          ]
        }
      }
    ]
  },

  "grid_content": {
    "type": "grid",
    "size": [ "100%", "default" ],
    "grid_item_template": "$library_screen_button_template",
    "grid_rescaling_type": "horizontal",
    "collection_name": "library_items",
    "bindings": [
      {
        "binding_name": "#library_max_grid_items",
        "binding_name_override": "#maximum_grid_items"
      }
    ]
  },

  "grid_item": {
    "type": "panel",
    // Fit 4 items per row.
    // Image dimensions are 480 x 270 = 56.25% ratio of y to x
    "size": [ "25%", "56.25%x + 36px" ],
    "controls": [
      {
        "library_item_button@library.borderless_button": {
          // Provide spacing between the library item buttons
          "size": [ "100% - 2px", "100% - 2px" ],
          // Create an accurate 1 pixel border around the button's content
          "$button_content_size": [ "100% - 4px", "100% - 4px" ],
          "$button_content": "library.button_content",
          "$pressed_button_name": "button.library_item",
          "bindings": [
            {
              "binding_type": "collection_details",
              "binding_collection_name": "library_items"
            }
          ]
        }
      },
      {
        "new_item_tag@common_store.status_new_offer_icon": {
          "offset": [ -4, -1 ],
          "bindings": [
            {
              "binding_type": "collection",
              "binding_collection_name": "library_items",
              "binding_name": "#should_display_new_icon",
              "binding_name_override": "#visible"
            }
          ]
        }
      }
    ]
  },

  "borderless_button@common_buttons.dark_content_button": {
    "$border_visible": false,
    "$default_button_texture": "textures/ui/Black",
    "$hover_button_texture": "textures/ui/White"
  },

  "button_content": {
    "type": "stack_panel",
    "orientation": "vertical",
    "size": [ "100%", "100%" ],
    "controls": [
      {
        "world_image_panel": {
          "type": "panel",
          "size": [ "100%", "56.25%x" ],
          "controls": [
            {
              "world_image@library.world_image": {
                "layer": 1
              }
            }
          ]
        }
      },
      { "padding_middle@common.empty_panel": { "size": [ "100%", 1 ] } },
      {
        "world_info_panel": {
          "type": "panel",
          "size": [ "100%", "fill" ],
          "controls": [
            {
              "world_info@library.world_info": {
                "layer": 1
              }
            },
            {
              "background": {
                "type": "image",
                "texture": "textures/ui/dark_bg"
              }
            }
          ]
        }
      }
    ]
  },

  "world_image": {
    "type": "image",
    "bilinear": true,
    "bindings": [
      {
        "binding_type": "collection",
        "binding_collection_name": "library_items",
        "binding_name": "#world_texture",
        "binding_name_override": "#texture"
      },
      {
        "binding_type": "collection",
        "binding_collection_name": "library_items",
        "binding_name": "#file_system",
        "binding_name_override": "#texture_file_system"
      }
    ]
  },

  "world_info": {
    "type": "stack_panel",
    "orientation": "vertical",
    "size": [ "100% - 4px", "100%c" ],
    "$max_label_size": [ "100%", 17 ],
    "controls": [
      {
        "title_label@library.base_label": {
          "text": "#library_item_title",
          "size": [ "100%", "default" ],
          "max_size": "$max_label_size",
          "bindings": [
            {
              "binding_type": "collection",
              "binding_collection_name": "library_items",
              "binding_name": "#library_item_title"
            }
          ]
        }
      },
      { "creator_label@library.creator_label": {} }
    ]
  },

  // Big item used for China courses view - or (eventually) view where there's 2 or fewer items on screen.
  "grid_item_big": {
    "type": "panel",
    // Fit 2 items per row.
    "size": [ "50%", "100%x" ],
    "controls": [
      {
        "library_item_button@library.borderless_button": {
          // Provide spacing between the library item buttons
          "size": [ "100% - 10px", "100% - 10px" ],
          // Create an accurate 1 pixel border around the button's content
          "$button_content_size": [ "100% - 4px", "100% - 4px" ],
          "$button_content": "library.button_content_big",
          "$pressed_button_name": "button.library_item",
          "bindings": [
            {
              "binding_type": "collection_details",
              "binding_collection_name": "library_items"
            }
          ]
        }
      }
      // Unlike the standard grid item, we don't display new tags or anything like that.
    ]
  },

  // The version of the content for "grid_item_big" - slightly different ratios/layout/information.
  "button_content_big": {
    "type": "stack_panel",
    "orientation": "vertical",
    "size": [ "100%", "100%" ],
    "controls": [
      {
        "world_image_panel": {
          "type": "panel",
          "size": [ "100%", "67%x" ],
          "controls": [
            {
              "world_image@library.world_image": {
                "layer": 1,
                "fill": true
              }
            },
            {
              "gray_overlay@library.gray_overlay": {
                "layer": 2,
                "bindings": [
                  {
                    "binding_type": "collection",
                    "binding_collection_name": "library_items",
                    // If and|or expressions for bindings ever get fixed, this binding should be removed and replaced with should be "#is_complete or (not #is_enabled)".
                    "binding_name": "#is_image_grayed_out",
                    "binding_name_override": "#visible"
                  }
                ]
              }
            },
            {
              "completed_item_icon@library.completed_item_icon": {
                "layer": 3,
                "bindings": [
                  {
                    "binding_condition": "once",
                    "binding_type": "collection",
                    "binding_collection_name": "library_items",
                    "binding_name": "#is_complete",
                    "binding_name_override": "#visible"
                  }
                ]
              }
            },
            {
              "locked_item_icon@library.locked_item_icon": {
                "layer": 4,
                "bindings": [
                  {
                    "binding_condition": "once",
                    "binding_type": "collection",
                    "binding_collection_name": "library_items",
                    "binding_name": "(not #is_enabled)",
                    "binding_name_override": "#visible"
                  }
                ]
              }
            }
          ]
        }
      },
      { "padding_middle@common.empty_panel": { "size": [ "100%", "2px" ] } },
      {
        "world_info_panel": {
          "type": "panel",
          "size": [ "100%", "fill" ],
          "controls": [
            {
              "world_info_big@library.world_info_big": {
                "layer": 1
              }
            },
            {
              "background": {
                "type": "image",
                "texture": "textures/ui/Black"
              }
            }
          ]
        }
      }
    ]
  },

  "title_creator_panel@common.empty_panel": {
    "size": [ "100%", "100%cm" ],
    "$max_label_size": [ "50%", "24px" ],
    "controls": [
      {
        // The title for this item uses slightly different styling than the default Library labels
        "title_label@edu_common.readable_label": {
          "$default_font_scale_factor": 1,
          "$normalized_font_scale_factor": 1.2,
          "offset": [ 0, 0 ],
          "text": "#library_item_title",
          "size": [ "50%", "default" ],
          // Keeps the title constrained to two lines.
          "max_size": "$max_label_size",
          "anchor_to": "top_left",
          "anchor_from": "top_left",
          "bindings": [
            {
              "binding_type": "collection",
              "binding_collection_name": "library_items",
              "binding_name": "#library_item_title"
            }
          ]
        }
      },
      {
        "creator_label@library.creator_label": {
          // Subtract 2px to create slim border between the title and the creator.
          "size": [ "50% - 2px", "default" ],
          // Keeps the creator name constrained to two lines.
          "max_size": "$max_label_size",
          // Revert the offsetting from the default label.
          "offset": [ 0, 0 ],
          "anchor_to": "bottom_right",
          "anchor_from": "bottom_right",
          "text_alignment": "right"
        }
      }
    ]
  },

  "world_info_big": {
    "type": "stack_panel",
    "orientation": "vertical",
    "size": [ "100% - 4px", "100%" ],
    "controls": [
      { "padding_top@common.empty_panel": { "size": [ "100%", "2px" ] } },
      { "title_creator_panel@library.title_creator_panel": {} },
      // Need to stick description in an empty panel to center description text.
      { "padding_middle@common.empty_panel": { "size": [ "100%", "2px" ] } },
      {
        "description@edu_common.readable_label": {
          "$default_font_scale_factor": 0.85,
          "$normalized_font_scale_factor": 1.0,
          "anchor_to": "top_middle",
          "anchor_from": "top_middle",
          "text": "#description",
          "size": [ "100%", "default" ],
          // Keeps the max size to roughly about four lines.
          "max_size": [ "100%", "48px" ],
          "bindings": [
            {
              "binding_type": "collection",
              "binding_collection_name": "library_items",
              "binding_name": "#description"
            }
          ]
        }
      },
      { "padding_bottom@common.empty_panel": { "size": [ "100%", "2px" ] } }
    ]
  },

  //--------------------------------------------------------------------------------
  // Screen
  //--------------------------------------------------------------------------------

  "library_screen@common.base_screen": {
    // When the player hits Esc (menu_cancel button), they can exit the screen
    "button_mappings": [
      {
        "from_button_id": "button.menu_cancel",
        "to_button_id": "button.menu_exit",
        "mapping_type": "global"
      }
    ],
    "$is_full_screen_layout": true,
    "$screen_content": "library.screen_content"
  },

  "screen_content": {
    "type": "panel",
    "controls": [
      { "screen_content_stack@library.screen_content_stack": {} },
      {
        "welcome_panel@library_modal.welcome_panel": {
          // Make the input_panel be above the header's back button and the "new" tags
          "layer": 201
        }
      }
    ]
  },

  "screen_content_stack": {
    "type": "stack_panel",
    "size": ["100%", "100%"],
    "controls": [
      {
        "header@edu_common.edu_screen_header": {
          "$title_texture": "textures/ui/icon_bookshelf",
          "$title_has_image": true,
          "$title_text": "$library_screen_header"
        }
      },
      { "padding_middle@common.empty_panel": { "size": [ "100%", 4 ] } },
      { "main_panel@library.main_panel": {} },
      { "padding_bottom@common.empty_panel": { "size": [ "100%", 4 ] } }
    ]
  },

  "main_panel@common.scrolling_panel": {
    "$scrolling_pane_size": ["100%", "100%-21px"],
    "$scroll_size": [ 6, "100% - 10px" ],
    "anchor_from": "top_middle",
    "anchor_to": "top_middle",
    "$scrolling_content": "library.scrolling_content",
    "$scrolling_content_anchor_from": "top_middle",
    "$scrolling_content_anchor_to": "top_middle",
    "$scroll_track_anchor": "top_middle",
    "$scroll_bar_left_padding_size": [ 0, 0 ],
    "$scroll_bar_right_padding_size": [ 2, 0 ],
    "$show_background": false
  }
}