id: stage
type: PageSiderMenu
properties:
  title: Stage

areas:
  content:
    blocks:
      - id: title
        type: Title
        layout:
          grow: 1
        properties:
          content: Stage
      - id: new_brand_button # Create a Button block to add a new brand.
        type: Button
        layout:
          grow: 0 # Because the grow of the button is 0, it will not expand but remain in the same row as the title block.
        properties:
          title: New Brand # Button text.
          icon: PlusOutlined # Ant Design icon on the button.
        events:
          onClick: # All the actions to complete when the button is clicked.
            - id: link_to_new_brand # Link to the page where we will add a new brand.
              type: Link
              params:
                pageId: new-brand # The page id of the new brand page.
      # A List block to render the following brands.
      # The list block will render a content area all items in the "brands_list" array in state.
      # The "brands_list" array is populated by the "set_brands" onEnter action.
      - id: brands_list
        type: List
        blocks:
          - id: brands_list.$.container # Wrap all the blocks for a brands item in a box.
            type: Box
            style:
              background: '#fff' # Give the box a white background and some spacing.
              margin: 10
              padding: 10
            blocks:
              - id: brands_list.$.name # Show the item name as a title in the list.
                type: Title
                properties:
                  content:
                    _state: brands_list.$.name
                  level: 3
              - id: brands_list.$.description # Show the item description as a paragraph in the list.
                type: Paragraph
                properties:
                  content:
                    _state: brands_list.$.description
            events:
              onClick:
                - id: link_to_edit_brand # Link to the page where we will edit the clicked brand.
                  type: Link
                  params:
                    pageId: edit-brand # The page id of the edit brand page.
                    urlQuery:
                      brand_id:
                        _state: brands_list.$._id # Set the brand_id in the url query on the edit-brand page to the _id field of the clicked list item.