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

  //---------------------------------------------------------------------------
  // Images
  //---------------------------------------------------------------------------
  "estimated_time_icon": {
    "type": "image",
    "texture": "textures/ui/clock",
    "size": [ "11px", "11px" ]
  },

  "divider": {
    "type": "image",
    "texture": "textures/ui/break",
    // Divider width should match that of lesson_item_button below.
    "size": [ "100%", "1px" ],
    "alpha": 0.2
  },

  "base_course_icon": {
    "type": "image",
    "$icon_visibility_binding|default": false,
    "bindings": [
      {
        "binding_type": "collection",
        "binding_name": "$icon_visibility_binding",
        "binding_name_override": "#visible",
        "binding_collection_name": "lesson_items"
      }
    ]
  },

  // The overlay isn't an icon per se, but we do need that visibility binding that base_course_icon provides
  "gray_overlay@course.base_course_icon": {
    "texture": "textures/ui/Gray",
    "size": [ "100%", "100%" ],
    "alpha": 0.8
  },

  "completed_lesson_icon@course.base_course_icon": {
    "texture": "textures/ui/check",
    "size": [ "22px", "16px" ]
  },

  "multiplayer_icon@course.base_course_icon": {
    "texture": "textures/ui/icon_multiplayer",
    "size": [ "19px", "19px" ]
  },

  "locked_lesson_icon@course.base_course_icon": {
    "texture": "textures/ui/lock_color",
    "size": [ "20px", "20px" ]
  },

  //---------------------------------------------------------------------------
  // Reused components
  //---------------------------------------------------------------------------
  // A screenshot with a border.
  "bordered_screenshot": {
    "type": "image",
    // Pass the image name and file system in please.
    "$image_texture|default": "",
    "$image_file_system|default": "",
    "$binding_type|default": "global",
    "$binding_collection_name|default": "",
    "$image_is_loading|default": false,
    // Defaults to a ratio relative to the horizontal width of the image.
    // This is the ratio fitted to the size of a screenshot for a world template.
    // For the reverse ratio, use [ "173.91%y", "100%" ]
    "size": [ "100%", "57%x" ],
    // Defaults (for this screen) to an image with a solid black border.
    // For an inset image border, use "textures/ui/default_indent"
    "texture": "textures/ui/background_with_border",
    "controls": [
      {
        "item_image": {
          "type": "image",
          "layer": 1,
          "fill": true,
          // Uses a 1px border on all sides to display the border background.
          "size": [ "100%-2px", "100%-2px" ],
          "bindings": [
            {
              "binding_name": "(not $image_is_loading)",
              "binding_name_override": "#visible",
              "binding_type": "$binding_type",
              "binding_collection_name": "$binding_collection_name"
            },
            {
              "binding_name": "$image_texture",
              "binding_name_override": "#texture",
              "binding_type": "$binding_type",
              "binding_collection_name": "$binding_collection_name"
            },
            {
              "binding_name": "$image_file_system",
              "binding_name_override": "#texture_file_system",
              "binding_type": "$binding_type",
              "binding_collection_name": "$binding_collection_name"
            }
          ]
        }
      },
      {
        "progress_loading_bars": {
          "type": "image",
          "layer": 1,
          "texture": "textures/ui/loading_bar",
          "size": [ "80%", "12%x" ],
          "uv_size": [ 64, 8 ],
          "uv": "@progress.bar_animation",
          "color": "$light_glyph_locked_color",
          "bindings": [
            {
              "binding_name": "$image_is_loading",
              "binding_name_override": "#visible",
              "binding_type": "$binding_type",
              "binding_collection_name": "$binding_collection_name"
            }
          ]
        }
      }
    ]
  },

  // The collection version of the bordered screenshot above.
  "bordered_screenshot_for_collections@course.bordered_screenshot": {
    "$binding_collection_name": "#items",
    "$binding_type": "collection"
  },

  // A panel that groups the estimated time text with an icon.
  "estimated_time_panel": {
    "$estimated_time|default": "",
    "$binding_type|default": "global",
    "$binding_collection_name|default": "",
    "type": "stack_panel",
    // If the size is relative to the children, it crashes the layout engine, so be thoughtful when changing the size parameter.
    // Right now, this size is optimized for the active estimated time length label (on the RHS of the screen).
    "size": [ "100%", "14px" ],
    "orientation": "horizontal",
    // To get the icon and image centered, we have to wrap these in panels.
    "controls": [
      {
        "centering_container_icon": {
          "type": "panel",
          "size": [ "100%y", "100%" ],
          "controls": [
            {
              "estimated_time_icon@course.estimated_time_icon": {
                "anchor_from": "center",
                "anchor_to": "center"
              }
            }
          ]
        }
      },
      { "padding_middle@course.vertical_padding_2px": {} },
      {
        "centering_container_label": {
          "type": "panel",
          "size": [ "fill", "100%" ],
          "controls": [
            {
              "item_estimated_time_label": {
                "type": "label",
                "size": [ "default", "default" ],
                "text": "#estimated_time",
                "color": "$generic_button_text_color",
                "anchor_from": "left_middle",
                "anchor_to": "left_middle",
                "bindings": [
                  {
                    "binding_name": "$estimated_time",
                    "binding_name_override": "#estimated_time",
                    "binding_type": "$binding_type",
                    "binding_collection_name": "$binding_collection_name"
                  }
                ]
              }
            }

          ]
        }
      }
    ]
  },

  // The collections version of the estimated time panel above.
  "estimated_time_panel_for_collections@course.estimated_time_panel": {
    "$binding_collection_name": "#items",
    "$binding_type": "collection"
  },

  // A hacky way to mimic a "selected" button for the active button item:
  // Buttons and panels for the active lesson item.
  "lesson_item_button@common_buttons.dark_content_button": {
    // The 11px subtraction is for the divider at the bottom.
    "size": [ "100%", "100%-11px" ],
    "anchor_to": "top_middle",
    "anchor_from": "top_middle",
    "$button_content_size": [ "100%-4px", "100%-4px" ],
    "$button_content": "course.item_button_content",
    "$pressed_button_name": "button.lesson_item",
    // Use edu-specific button textures (while UX is figuring out accessibility styling)
    // TODO: Eventually change these to be consistent with existing UI.
    "$default_button_texture": "textures/ui/edu_borderless_button_normal_dark",
    // While we were provided with a hover text, this did not match the other hover textures for other buttons in the screen.
    "$hover_button_texture": "textures/ui/button_borderless_lighthover",
    "$pressed_button_texture": "textures/ui/edu_borderless_button_pressed"
    // We don't disable these buttons (anymore), so we use the default disabled texture.
  },

  "selected_lesson_item_button@course.lesson_item_button": {
    "$default_button_texture": "textures/ui/edu_borderless_button_pressed"
  },

  // Buttons and panels for the active lesson item.
  "active_lesson_button@common_buttons.light_text_button": {
    "size": [ "100%", "20px" ],
    "$button_text_binding_type": "none",
    // Buttons that add to the bindings should remember to also add this one.
    "bindings": [
      {
        "binding_name": "#is_active_lesson_enabled",
        "binding_name_override": "#enabled"
      }
    ]
  },

  "active_lesson_button_panel": {
    "$visibility_condition|default": [
      {
        "binding_condition": "once",
        "binding_name": "#default_visibility",
        "binding_name_override": "#visible"
      }
    ],
    "type": "stack_panel",
    "orientation": "vertical",
    "anchor_from": "top_right",
    "anchor_to": "top_right",
    "size": [ "50%-4px", "100%" ],
    "bindings": "$visibility_condition"
  },

  // Some padding panels, or how we pretend that we have margins.
  // Larger variations are typically used between header-ish elements and at the bottom of scroll panels to give some nice space following the bottommost element.
  "horizontal_padding_4px@common.empty_panel": {
    "size": [ "100%", "4px" ]
  },

  "horizontal_padding_8px@common.empty_panel": {
    "size": [ "100%", "8px" ]
  },

  "vertical_padding_2px@common.empty_panel": {
    "size": [ "2px", "100%" ]
  },

  "vertical_padding_4px@common.empty_panel": {
    "size": [ "4px", "100%" ]
  },

  //---------------------------------------------------------------------------
  // LEFT SIDE OF THE COURSE SCREEN
  //---------------------------------------------------------------------------
  // The panel containing the title and a grid (list) of course items (lessons).
  "lesson_list_content": {
    "size": [ "100%", "100%c" ],
    "type": "stack_panel",
    "orientation": "vertical",
    "controls": [
      { "padding_top@course.horizontal_padding_4px": {} },
      { "lesson_stack_panel_content@course.lesson_stack_panel_content": {} }
    ]
  },

  "lesson_stack_panel_content": {
    "type": "stack_panel",
    "size": [ "100%", "100%c" ],
    "orientation": "vertical",
    "factory": {
      "name": "lesson_panel_factory",
      "control_name": "course.lesson_panel_item"
    },
    "collection_name": "lesson_items",
    "bindings": [
      {
        "binding_name": "#lesson_count",
        "binding_name_override": "#collection_length"
      }
    ]
  },

  // The item for each lesson - a button that contains a bunch of lesson-related content.
  // Currently contains two buttons: a normal one and a selected one which displays if it is the currently-selected lesson.
  "lesson_panel_item": {
    "type": "panel",
    "size": [ "100%", "25%x" ],
    "controls": [
      {
        "lesson_item_button@course.lesson_item_button": {
          "bindings": [
            {
              "binding_type": "collection",
              "binding_collection_name": "lesson_items",
              "binding_name": "(not #lesson_is_active_item)",
              "binding_name_override": "#visible"
            },
            {
              "binding_type": "collection_details",
              "binding_collection_name": "lesson_items"
            }
          ]
        }
      },
      {
        "selected_lesson_item_button@course.selected_lesson_item_button": {
          "bindings": [
            {
              "binding_type": "collection",
              "binding_collection_name": "lesson_items",
              "binding_name": "#lesson_is_active_item",
              "binding_name_override": "#visible"
            },
            {
              "binding_type": "collection_details",
              "binding_collection_name": "lesson_items"
            }
          ]
        }
      },
      {
        "lesson_item_spacing_panel": {
          "type": "panel",
          "anchor_to": "bottom_middle",
          "anchor_from": "bottom_middle",
          "size": [ "100%", "11px" ],
          "bindings": [
            {
              "binding_condition": "once",
              "binding_type": "collection",
              "binding_collection_name": "lesson_items",
              "binding_name": "#lesson_should_add_spacing_panel",
              "binding_name_override": "#visible"
            }
          ],
          "controls": [
            {
              "divider@course.divider": {}
            }
          ]
        }
      }
    ]
  },

  // The tooltip that displays when the user hovers over a locked image.
  "locked_notification_popup@common.static_tooltip_popup_with_image_and_text": {
    "size": [ "80%", "100%cm + 8px" ],
    "$tooltip_panel_offset": [ 0, -9 ],
    "$tooltip_popup_image": "textures/ui/infobulb",
    "$tooltip_button_binding_type": "collection",
    "$tooltip_button_collection_name": "lesson_items",
    "$tooltip_popup_visible_binding": "#lesson_is_locked_tooltip_visible",
    "$tooltip_text_binding_name": "#lesson_locked_tooltip_text"
  },

  // The content of a lesson button item.
  "item_button_content": {
    "type": "input_panel",
    "size": [ "100%-4px", "100%-4px" ],
    "consume_hover_events": false,
    "button_mappings": [
      {
        "to_button_id": "locked_tooltip.is_hovered",
        "mapping_type": "pressed"
      }
    ],
    "controls": [
      { "locked_notification_popup@course.locked_notification_popup": {} },
      { "item_image_title_panel@course.item_image_title_panel": {} }
    ],
    "bindings": [
      {
        "binding_type": "collection_details",
        "binding_collection_name": "lesson_items"
      }
    ]
  },

  // Panel that holds the screenshot and a bunch of other status icons overlaid on top.
  "item_screenshot_and_icons": {
    "type": "panel",
    // The ratio is the default screenshot aspect ratio.
    "size": [ "173.91%y", "100%" ],
    "controls": [
      {
        "item_bordered_image@course.bordered_screenshot_for_collections": {
          // Takes up the entire panel (plus icons on top, so it doesn't need the weird ratio).
          "size": [ "100%", "100%" ],
          "$image_texture": "#lesson_texture_name",
          "$image_file_system": "#lesson_location_type",
          "$image_is_loading": "#lesson_is_loading",
          "$binding_collection_name": "lesson_items"
        }
      },
      {
        "multiplayer_icon@course.multiplayer_icon": {
          "layer": 2,
          "anchor_from": "bottom_right",
          "anchor_to": "bottom_right",
          "$icon_visibility_binding": "#lesson_is_multiplayer"
        }
      },
      {
        "gray_overlay@course.gray_overlay": {
          "layer": 3,
          // This binding is redundant if the and|or expressions for bindings bug ever gets fixed.
          "$icon_visibility_binding": "#lesson_is_grayed_out"
        }
      },
      {
        "completed_lesson_icon@course.completed_lesson_icon": {
          "layer": 4,
          "anchor_from": "center",
          "anchor_to": "center",
          "$icon_visibility_binding": "#lesson_is_completed"
        }
      },
      {
        "locked_lesson_icon@course.locked_lesson_icon": {
          "layer": 5,
          "anchor_from": "center",
          "anchor_to": "center",
          "$icon_visibility_binding": "(not #lesson_is_enabled)"
        }
      }
    ]
  },

  // A panel containing the template/default image & the ordered title of the item.
  "item_image_title_panel": {
    "type": "stack_panel",
    "orientation": "horizontal",
    "size": [ "100%-4px", "100%-4px" ],
    "controls": [
      { "item_screenshot_and_icons@course.item_screenshot_and_icons": {} },
      { "item_image_title_padding_middle@course.vertical_padding_4px": {} },
      {
        "item_title_label": {
          "type": "label",
          "localize": false,
          "text": "#item_title",
          "size": [ "fill", "100%" ],
          "color": "$generic_button_text_color",
          "bindings": [
            {
              "binding_type": "collection",
              "binding_collection_name": "lesson_items",
              "binding_name": "#lesson_title",
              "binding_name_override": "#item_title"
            }
          ]
        }
      }
    ]
  },

  //---------------------------------------------------------------------------
  // RIGHT SIDE OF THE COURSE SCREEN
  //---------------------------------------------------------------------------
  "active_lesson_content": {
    "size": [ "100%", "100%c" ],
    "type": "stack_panel",
    "orientation": "vertical",
    "$background_fill_alpha|default": 0.1,
    "controls": [
      { "padding_top@course.horizontal_padding_4px": {} },
      { "active_lesson_description_container@course.active_lesson_description_container": {} },
      { "padding_middle0@course.horizontal_padding_4px": {} },
      // Title for the tasks
      {
        "active_lesson_title_label": {
          "size": [ "100%", "default" ],
          "type": "label",
          "text": "#content_title",
          "color": "$generic_button_text_color",
          "bindings": [
            {
              "binding_name": "#active_lesson_content_title",
              "binding_name_override": "#content_title"
            }
          ]
        }
      },
      { "padding_middle1@course.horizontal_padding_4px": {} },
      { "active_lesson_tasks_panel@course.active_lesson_tasks_panel": {} },
      { "padding_bottom@course.horizontal_padding_4px": {} }
    ]
  },


  // A panel that contains information about the active lesson.
  // This container is just the background image...
  "active_lesson_description_container": {
    "type": "image",
    "size": [ "100%", "100%c" ],
    // TODO: This should be changed to a darker texture when one is available.
    "texture": "textures/ui/mainbanners_transparency",
    "alpha": 0.8,
    "controls": [
      { "active_lesson_description_panel@course.active_lesson_description_panel": {} }
    ]
  },

  // ...And this is its content.
  // This information that *should* be populated prior to loading world or any content below.
  "active_lesson_description_panel": {
    "type": "stack_panel",
    "orientation": "vertical",
    "size": [ "100%-8px", "100%c" ],
    "layer": 1,
    "controls": [
      {
        // Special 5px offset just for the top of this panel.
        "active_description_padding_top@common.empty_panel": {
          "size": [ "100%", "5px" ]
        }
      },
      {
        "active_lesson_title_label": {
          "type": "label",
          "text": "#active_title",
          "color": "$generic_button_text_color",
          "size": [ "100%-4px", "default" ],
          "text_alignment": "center",
          "bindings": [
            {
              "binding_name": "#active_lesson_title",
              "binding_name_override": "#active_title"
            }
          ]
        }
      },
      { "active_description_padding_middle0@course.horizontal_padding_4px": {} },
      { "active_lesson_item_screenshot_button_panel@course.active_lesson_item_screenshot_button_panel": {} },
      { "active_description_padding_middle1@course.horizontal_padding_4px": {} },
      {
        "active_lesson_creator_label": {
          "type": "label",
          "text": "#active_creator",
          "localize": false,
          "color": "$generic_button_text_color",
          "size": [ "100%-4px", "default" ],
          "font_type": "smooth",
          "bindings": [
            {
              "binding_name": "#active_lesson_creator",
              "binding_name_override": "#active_creator"
            }
          ]
        }
      },
      { "active_description_padding_middle2@course.horizontal_padding_4px": {} },
      { "active_lesson_collaborative_lesson_panel@course.active_lesson_collaborative_lesson_panel": {} },
      {
        "active_lesson_goals_label": {
          "type": "label",
          "text": "#active_goals",
          "color": "$generic_button_text_color",
          "size": [ "100%-4px", "default" ],
          "font_type": "smooth",
          "bindings": [
            {
              "binding_name": "#active_lesson_goals",
              "binding_name_override": "#active_goals"
            }
          ]
        }
      },
      { "active_description_padding_bottom@course.horizontal_padding_4px": {} }
    ]
  },

  // The horizontal stack panel that displays the images and buttons for the active lesson.
  "active_lesson_item_screenshot_button_panel": {
    "type": "panel",
    // 65px is a nice size given the buttons/screenshot.
    "size": [ "100%", "65px" ],
    "controls": [
      {
        "active_lesson_item_screenshot@course.bordered_screenshot": {
          "size": [ "50%", "100%" ],
          "anchor_to": "top_left",
          "anchor_from": "top_left",
          "$image_texture": "#active_lesson_texture_name",
          "$image_file_system": "#active_lesson_location_type",
          "$image_is_loading": "#active_lesson_is_loading"
        }
      },
      { "padding_middle@course.vertical_padding_4px": {} },
      // Three different versions of the button panels based on the type of content (world vs. not-world, and if world, the current progress).
      // The conditions for visibility are defined in the descriptions.
      { "active_lesson_not_started_panel@course.active_lesson_not_started_panel": {} },
      { "active_lesson_continue_restart_panel@course.active_lesson_continue_restart_panel": {} },
      { "active_lesson_link_to_more_panel@course.active_lesson_link_to_more_panel": {} }
    ]
  },

  // Some re-used join components for multiplayer world content.
  "join_button@course.active_lesson_button": {
    "$pressed_button_name": "button.active_lesson.join", // This button callback is defined in MultiplayerLessonScreenController
    "$button_text": "course.edu.join",
    "bindings": [
      {
        "binding_name": "#is_active_lesson_multiplayer",
        "binding_name_override": "#visible"
      },
      {
        "binding_name": "#is_active_lesson_enabled",
        "binding_name_override": "#enabled"
      }
    ]
  },

  "join_button_padding@course.horizontal_padding_4px": {
    "bindings": [
      {
        "binding_name": "#is_active_lesson_multiplayer",
        "binding_name_override": "#visible"
      }
    ]
  },

  // Button panel for world content which has not been started yet.
  "active_lesson_not_started_panel@course.active_lesson_button_panel": {
    "$visibility_condition": [
      { "binding_name": "#has_world_content" },
      { "binding_name": "#is_active_lesson_started" },
      {
        "binding_type": "view",
        "source_property_name": "(#has_world_content and not #is_active_lesson_started)",
        "target_property_name": "#visible"
      }
    ],
    "controls": [
      // Start button is used for non-multiplayer worlds
      {
        "start_button@course.active_lesson_button": {
          "$pressed_button_name": "button.active_lesson.start",
          "$button_text": "course.edu.startButton",
          "bindings": [
            {
              "binding_name": "(not #is_active_lesson_multiplayer)",
              "binding_name_override": "#visible"
            },
            {
              "binding_name": "#is_active_lesson_enabled",
              "binding_name_override": "#enabled"
            }
          ]
        }
      },
      // Host button is used for multiplayer worlds
      {
        "host_button@course.active_lesson_button": {
          "$pressed_button_name": "button.active_lesson.host",
          "$button_text": "course.edu.hostButton",
          "bindings": [
            {
              "binding_name": "#is_active_lesson_multiplayer",
              "binding_name_override": "#visible"
            },
            {
              "binding_name": "#is_active_lesson_enabled",
              "binding_name_override": "#enabled"
            }
          ]
        }
      },
      { "join_button_padding@course.join_button_padding": {} },
      { "join_button@course.join_button": {} },
      { "active_lesson_button_padding_middle@course.horizontal_padding_4px": {} },
      {
        "estimated_length_title_label": {
          "type": "label",
          "size": [ "100%-4px", "default" ],
          "text": "course.edu.estimatedLength",
          "color": "$generic_button_text_color",
          "visible": "$course_screen_show_estimated_time"
        }
      },
      {
        "active_lesson_estimated_time_panel@course.estimated_time_panel": {
          "$estimated_time": "#active_lesson_estimated_time_formatted",
          "visible": "$course_screen_show_estimated_time"
        }
      },
      { "active_lesson_button_padding_bottom@course.horizontal_padding_4px": {} }
    ]
  },

  // Button panel for world content which has been started.
  "active_lesson_continue_restart_panel@course.active_lesson_button_panel": {
    "$visibility_condition": [
      { "binding_name": "#has_world_content" },
      { "binding_name": "#is_active_lesson_started" },
      {
        "binding_type": "view",
        "source_property_name": "(#has_world_content and #is_active_lesson_started)",
        "target_property_name": "#visible"
      }
    ],
    "controls": [
      {
        "continue_button@course.active_lesson_button": {
          "$pressed_button_name": "button.active_lesson.continue",
          "$button_text": "course.edu.continueButton"
        }
      },
      { "active_lesson_button_padding_middle@course.horizontal_padding_4px": {} },
      {
        "restart_button@course.active_lesson_button": {
          "$pressed_button_name": "button.active_lesson.restart",
          "$button_text": "course.edu.restartButton"
        }
      },
      { "join_button_padding@course.join_button_padding": {} },
      { "join_button@course.join_button": {} }
    ]
  },

  // Button panel for non-world content.
  "active_lesson_link_to_more_panel@course.active_lesson_button_panel": {
    "$visibility_condition": [
      {
        "binding_name": "(not #has_world_content)",
        "binding_name_override": "#visible"
      }
    ],
    "controls": [
      { "active_lesson_button_padding_top@course.horizontal_padding_4px": {} },
      {
        "try_it_now_button@course.active_lesson_button": {
          "$pressed_button_name": "button.active_lesson.try_it_now",
          "$button_text": "course.edu.tryItNowButton"
        }
      },
      { "active_lesson_button_padding_middle@course.horizontal_padding_4px": {} },
      {
        "learn_more_button@course.active_lesson_button": {
          "$pressed_button_name": "button.active_lesson.load_link",
          "$button_text": "course.edu.learnMoreButton"
        }
      }
    ]
  },

  // The icon and text panel that displays if the active lesson is collaborative (multiplayer).
  "active_lesson_collaborative_lesson_panel": {
    "type": "stack_panel",
    "orientation": "horizontal",
    // The 23px creates a 4px spacer underneath so we don't have to do some conditional padding in the stack panel based on whether or not this panel is visible. (And avoids another level of panels.)
    "size": [ "100%-8px", "23px" ],
    "controls": [
      {
        "multiplayer_icon@course.multiplayer_icon": {
          "$icon_visibility_binding": "#is_active_lesson_multiplayer"
        }
      },
      { "padding_middle@course.vertical_padding_4px": {} },

      {
        "centering_container_icon": {
          "type": "panel",
          "size": [ "fill", "19px" ],
          "controls": [
            {
              "collaborative_lesson_label": {
                "type": "label",
                "size": [ "default", "default" ],
                "anchor_from": "left_middle",
                "anchor_to": "left_middle",
                "text": "course.edu.collaborativeLesson",
                "color": "$generic_button_text_color",
                "font_type": "smooth"
              }
            }
          ]
        }
      }
    ],
    "bindings": [
      {
        "binding_name": "#is_active_lesson_multiplayer",
        "binding_name_override": "#visible"
      }
    ]
  },

  // A panel for displaying the active tasks (background image with grid).
  "active_lesson_tasks_panel": {
    "type": "image",
    "size": [ "100%", "100%c" ],
    // TODO: This should be changed to a darker texture when one is available.
    "texture": "textures/ui/mainbanners_transparency",
    "alpha": 0.8,
    "layer": 1,
    "controls": [
      {
        // Need to throw all of the task components in an extra stack panel.
        "task_stack_panel": {
          "type": "stack_panel",
          "orientation": "vertical",
          "size": [ "100%-4px", "100%c" ],
          "controls": [
            { "active_lesson_tasks_padding_top@course.horizontal_padding_4px": {} },
            { "task_panel_header@course.task_panel_header": {} },
            {
              "active_lesson_tasks_padding_middle@course.horizontal_padding_4px": {
                "visible": "$course_screen_show_active_task_header"
              }
            },
            { "task_stack_panel_content@course.task_stack_panel_content": {} },
            { "active_lesson_tasks_padding_bottom@course.horizontal_padding_4px": {} }
          ]
        }
      }
    ]
  },

  // The header for the tasks.
  "task_panel_header": {
    "type": "panel",
    "size": [ "100%", "100%c" ],
    "visible": "$course_screen_show_active_task_header",
    "controls": [
      {
        "task_label": {
          "type": "label",
          "text": "course.edu.byLessonsEndGeneric",
          "size": [ "100%-4px", "default" ],
          "font_type": "smooth",
          "layer": 3,
          "color": "$generic_button_text_color"
        }
      }
    ]
  },

  "task_stack_panel_content": {
    "type": "stack_panel",
    "factory": {
      "name": "task_grid_factory",
      "control_name": "course.task_panel_item"
    },
    "orientation": "vertical",
    "collection_name": "active_tasks",
    "size": [ "100%", "100%c" ],
    "layer": 2,
    "bindings": [
      {
        "binding_name": "#active_tasks_count",
        "binding_name_override": "#collection_length"
      }
    ]
  },

  // The item for each active task - an icon (eventually) and a task name.
  "task_panel_item": {
    "type": "panel",
    "size": [ "100%-4px", "100%c" ],
    "controls": [
      {
        "task_label": {
          "type": "label",
          "text": "#task_text",
          "size": [ "100%-4px", "default" ],
          "font_type": "smooth",
          "color": "$generic_button_text_color",
          "bindings": [
            {
              "binding_type": "collection",
              "binding_collection_name": "active_tasks",
              "binding_name": "#active_task_label",
              "binding_name_override": "#task_text"
            }
          ]
        }
      }
    ]
  },

  //---------------------------------------------------------------------------
  // Screens
  //---------------------------------------------------------------------------

  "course_screen@common.base_screen": {
    "$is_full_screen_layout": true,
    "$screen_content": "course.screen_content"
  },

  // The content of the screen - a header panel.
  "screen_content": {
    "type": "panel",
    "controls": [
      {
        "header@common.fullscreen_header": {
          "$back_button_has_title": true,
          "$button_text": "$course_screen_header",
          "$child_control": "course.header_content"
        }
      }
    ]
  },

  "header_content": {
    "type": "panel",
    "size": [ "100%", "100%" ],
    "controls": [
      {
        "stack_content@course.stack_content": {
          "bindings": [
            {
              "binding_name": "#show_course_content",
              "binding_name_override": "#visible"
            }
          ]
        }
      },
      // Show the loading screen if course is loading.
      {
        "items_populating_progress@progress.progress_panel": {
          // Stops the progress buton from binding to the wrong $button_text binding.
          "$button_text_binding_type": "none",
          "size": [ 200, 200 ],
          "bindings": [
            {
              "binding_name": "#show_course_populating_progress",
              "binding_name_override": "#visible"
            }
          ]
        }
      },
      // Download progress modal window
      {
        "download_progress_panel@edu_common.download_progress_modal_panel": {
          "$body_text": "library.item.progress.body"
        }
      },
      {
        "popup_dialog_factory": {
          "type": "factory",
          "control_ids": {
            "join_lesson_list": "@multiplayer_lesson.popup_dialog_join_lesson_list",
            "join_ip": "@multiplayer_lesson.popup_dialog_join_ip"
          }
        }
      }
    ]
  },

  "stack_content": {
    "type": "stack_panel",
    "size": [ "100%", "100%" ],
    "orientation": "horizontal",
    "controls": [
      {
        // Special padding width to line up course name arrow with the left side of the button.
        "stack_content_padding_left@common.empty_panel": {
          "size": [ "6px", "100%" ]
        }
      },
      { "lesson_list_scroll_panel@course.lesson_list_scroll_panel": {} },
      // TODO: The center divider is slightly imperfect (i.e., leaves a 1px black edge on top and bottom of divider).
      { "stack_content_padding_middle0@course.vertical_padding_2px": {} },
      {
        "center_divider": {
          "type": "image",
          "texture": "textures/ui/background_with_border",
          "size": [ "3px", "100%" ]
        }
      },
      { "stack_content_padding_middle1@course.vertical_padding_4px": {} },
      { "active_lesson_scroll_panel@course.active_lesson_scroll_panel": {} },
      { "stack_content_right_padding_right@course.vertical_padding_2px": {} }
    ]
  },

  // The left-hand side of the screen - a scroll panel that contains the course content (lessons).
  "lesson_list_scroll_panel@common.scrolling_panel": {
    "size": [ "45%", "100%" ],
    "$scroll_size": [ 4, "100%-4px" ],
    "anchor_from": "top_left",
    "anchor_to": "top_left",
    "$scrolling_content": "course.lesson_list_content",
    "$scrolling_content_anchor_from": "top_middle",
    "$scrolling_content_anchor_to": "top_middle",
    "$scroll_view_port_size|default": [ "100% - 2px", "100%" ],
    "$scroll_view_port_size_touch|default": [ "100% - 2px", "100%" ],
    "$show_background": false
  },

  // The right-hand side of the screen - a scroll panel that contains the currently-selected (active) lesson content.
  "active_lesson_scroll_panel@common.scrolling_panel": {
    "size": [ "fill", "100%" ],
    "$scroll_size": [ 4, "100%-4px" ],
    "anchor_from": "top_left",
    "anchor_to": "top_left",
    "$scrolling_content": "course.active_lesson_content",
    "$scrolling_content_anchor_from": "top_middle",
    "$scrolling_content_anchor_to": "top_middle",
    // Magic padding to make the scrollbar centering look passable.
    "$scroll_bar_left_padding_size": [ 1, 0 ],
    "$scroll_view_port_size|default": [ "100% - 4px", "100%" ],
    "$scroll_view_port_size_touch|default": [ "100% - 2px", "100%" ],
    "$show_background": false
  }
}
