<% content = capture do %>
    <%= pb_rails("card", props: { border_none: true, border_radius: "none", padding: "md" }) do %>
        <%= pb_rails("body", props: { text: "Nested content inside a Table Row" }) %>
    <% end %>
<% end %>

<%= pb_rails("table", props: { size: "sm" }) do %>
  <%= pb_rails("table/table_head") do %>
      <%= pb_rails("table/table_row") do %>
          <%= pb_rails("table/table_header", props: { text: "Column 1"}) %>
          <%= pb_rails("table/table_header", props: { text: "Column 2"}) %>
          <%= pb_rails("table/table_header", props: { text: "Column 3"}) %>
          <%= pb_rails("table/table_header", props: { text: "Column 4"}) %>
          <%= pb_rails("table/table_header", props: { text: "Column 5"}) %>
          <%= pb_rails("table/table_header", props: { text: ""}) %>
       <% end %>
  <% end %>
  <%= pb_rails("table/table_body") do %>
      <%= pb_rails("table/table_row", props: { collapsible: true, collapsible_content: content, collapsible_side_highlight: true, id: "1" }) do %>
          <%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
          <%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
          <%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
          <%= pb_rails("table/table_cell", props: { text: "Value 4"}) %>
          <%= pb_rails("table/table_cell", props: { text: "Value 5"}) %>
          <%= pb_rails("table/table_cell", props: { text_align: "right"}) do %>
            <%= pb_rails("icon", props: { icon: "chevron-down", fixed_width: true, color: "primary" }) %>
          <% end %>
      <% end %>
      <%= pb_rails("table/table_row") do %>
          <%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
          <%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
          <%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
          <%= pb_rails("table/table_cell", props: { text: "Value 4"}) %>
          <%= pb_rails("table/table_cell", props: { text: "Value 5"}) %>
          <%= pb_rails("table/table_cell", props: { text: ""}) %>
      <% end %>
      <%= pb_rails("table/table_row") do %>
          <%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
          <%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
          <%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
          <%= pb_rails("table/table_cell", props: { text: "Value 4"}) %>
          <%= pb_rails("table/table_cell", props: { text: "Value 5"}) %>
          <%= pb_rails("table/table_cell", props: { text: ""}) %>
      <% end %>
  <% end %>
<% end %>