<%= pb_rails("flex", props: {
    dark: true,
    orientation: "row",
    vertical: "center"
    }) do %>
    <%= pb_rails("body", props: { text: "Click info for more details" }) %>
    &nbsp;
    <%= pb_rails("circle_icon_button", props: {
        variant: "secondary",
        icon: "info",
        id: "regular-popover-1"
    }) %>
    <%= pb_rails("popover", props: {
        trigger_element_id: "regular-popover-1",
        tooltip_id: "tooltip-1",
        offset: true,
        position: "top"
    }) do %>
        I'm a popover. I can show content of any size.
    <% end %>
<% end %>

<%= 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 %>
        <div id="arrow-icon" style="display: flex"></div>
        <% 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 %><a>Popularity</a><% end %>
        <%= pb_rails("list/item") do %><a>Title</a><% end %>
        <%= pb_rails("list/item") do %><a>Duration</a><% end %>
        <%= pb_rails("list/item") do %><a>Date Started</a><% end %>
        <%= pb_rails("list/item") do %><a>Date Ended </a><% end %>
    <% end %>
<% end %>


<script type="text/javascript">
const button = document.querySelector("#list")
let buttonClicked = false

const arrowDiv = document.querySelector("#arrow-icon")
arrowDiv.innerHTML = '<i class="far fa-angle-down"></i>'

button.onclick = () => {
    buttonClicked = !buttonClicked    
    if (buttonClicked) {
        arrowDiv.innerHTML = '<i class="far fa-angle-up"></i>'
    } else {
        arrowDiv.innerHTML = '<i class="far fa-angle-down"></i>'
    }
}
</script>

<%= pb_rails("flex", props: {classname: "flex-container", spacing: "between"}) do %>
  <span>
    <%= pb_rails("button", props: { text: "Click Inside", variant: "secondary", id: "inside-popover-1" }) %>
    <%= pb_rails("popover", props: {
      close_on_click: "inside",
      trigger_element_id: "inside-popover-1",
      tooltip_id: "inside-tooltip-1",
      position: "bottom",
      offset: true
    }) do %>
      Click on me!
    <% end %>
  </span>
  <span>
    <%= pb_rails("button", props: { text: "Click Outside", variant: "secondary", id: "outside-popover-1" }) %>
    <%= pb_rails("popover", props: {
      close_on_click: "outside",
      trigger_element_id: "outside-popover-1",
      tooltip_id: "outside-tooltip-1",
      position: "left",
      offset: true
    }) do %>
        Click anywhere but me!
      <% end %>
  </span>
  <span>
    <%= pb_rails("button", props: {
      text: "Click Anywhere",
      variant: "secondary",
      id: "any-popover-1"
    }) %>
    <%= pb_rails("popover", props: {
      close_on_click: "any",
      trigger_element_id: "any-popover-1",
      tooltip_id: "any-tooltip-1",
      position: "top",
      offset: true
    }) do %>
      Click anything!
    <% end %>
  </span>
<% end %>

<div style="position: relative; z-index: 2">
    <%= pb_rails("body", props: {text: "I've got a z-index of 2", margin_bottom: "md"}) %>
</div>
<%= pb_rails("button", props: { variant: "secondary", id: 'tooltip-z-index-1', text: "Click Me", }) %>
<%= pb_rails("popover", props: {
    trigger_element_id: "tooltip-z-index-1",
    tooltip_id: "tooltip-z-index",
    position: 'top',
    z_index: "3",
    offset: true
}) do %>
    I've got a z-index of 3
<% end %>

<%= pb_rails("button", props: { variant: "secondary", id: 'scroll-height', text: "Click Me" }) %>
<%= pb_rails("popover", props: {
    trigger_element_id: "scroll-height",
    tooltip_id: "scroll-height-1",
    position: 'top',
    close_on_click: "any",
    max_height: "150px",
    max_width: "240px",
    offset: true
    }) do %>
    <%= pb_rails("body", props: {
        margin_bottom: "sm",
        text: "So many people live within unhappy circumstances and yet will
          not take the initiative to change their situation because they are
          conditioned to a life of security, conformity, and conservation, all of
          which may appear to give one peace of mind, but in reality, nothing is
          more damaging to the adventurous spirit."
    }) %>
    <%= pb_rails("title", props: {
        size: 4,
        text: "- Christopher McCandless"
    }) %>
<% end %>
      

<%= pb_rails("flex", props: {
    dark: true,
    orientation: "row",
    vertical: "center"
    }) do %>
    <%= pb_rails("body", props: { text: "Click info for more details" }) %>
    &nbsp;
    <%= pb_rails("circle_icon_button", props: {
        variant: "secondary",
        icon: "info",
        id: "actionable-popover-1"
    }) %>
    <%= pb_rails("popover", props: {
        close_on_click: "any",
        trigger_element_id: "actionable-popover-1",
        tooltip_id: "actionable-tooltip-1",
        offset: true,
        position: "top"
    }) do %>
        <%= pb_rails("button", props: { id: "actionable-tooltip-button", text: "Learn more" }) %>
    <% end %>
<% end %>

<%= javascript_tag do %>
    document.addEventListener('DOMContentLoaded', function () {
        document.querySelector('#actionable-tooltip-button').addEventListener('click', function (e) {
            alert("Let's do this")
        }, { once: true })
    })
<% end %>