<%=
  render(Primer::Alpha::Layout.new) do |component|
    component.with_main do
      "Main content"
    end
    component.with_sidebar(row_placement: :start, col_placement: :end) do
      render(Primer::OpenProject::SidePanel.new) do |panel|
        panel.with_section do |section|
          section.with_title { "Attributes" }
          section.with_counter(count: 5)
          section.with_description do
            "Attached files are available to all meeting participants. You can also drag and drop these into agenda item notes."
          end

          section.with_action_icon(icon: :pencil, 'aria-label': 'Edit')
          section.with_footer_button(tag: :a, href: '#') do |button|
            button.with_leading_visual_icon(icon: :pencil)
            "Additional action"
          end

          "Section content"
        end

        panel.with_section do |section|
          section.with_title { "Without counter" }
          section.with_action_icon(icon: :gear, 'aria-label': 'Manage')

          "Some more content here"
        end

        panel.with_section do |section|
          section.with_title { "Without action" }

          "Even more content here"
        end
      end

    end
  end
%>