<%= pb_rails("button", props: { variant: "secondary", id: 'list' }) do %>
<%= pb_rails("flex", props: {align: "center"}) do %>
Filter By
<%= pb_rails("flex/flex_item", props: {margin_left: "xxs"}) do %>
<%= pb_rails("icon", props: { icon: "chevron-down", fixed_width: true }) %>
<% end %>
<% end %>
<% end %>
<%= pb_rails("popover", props: {trigger_element_id: "list", tooltip_id: "list-tooltip", position: 'bottom', padding: "none"}) do %>
<%= pb_rails("list", props: {ordered: false, dark: false, borderless: false, xpadding: true}) do %>
<%= pb_rails("list/item") do %>Popularity<% end %>
<%= pb_rails("list/item") do %>Title<% end %>
<%= pb_rails("list/item") do %>Duration<% end %>
<%= pb_rails("list/item") do %>Date Started<% end %>
<%= pb_rails("list/item") do %>Date Ended <% end %>
<% end %>
<% end %>