<%
positions = [
  {
    setting: "top",
    label: "Top",
    icon: "arrow-up",
  },
  {
    setting: "top-right",
    label: "Top Right",
    icon: {
      name: "arrow-up",
      style: "right",
    }
  },
  {
    setting: "right",
    label: "Right",
    icon: {
      name: "arrow-right",
      style: "right",
    },
  },
  {
    setting: "bottom",
    label: "Bottom",
    icon: "arrow-down",
  },
  {
    setting: "bottom-right",
    label: "Bottom Right",
    icon: {
      name: "arrow-down",
      style: "right",
    }
  },
  {
    setting: "left",
    label: "Left",
    icon: "arrow-left",
  }
]
%>
<%= sage_component SageCardBlock, {} do %>
  <%= sage_component SageBadge, {
    color: "draft",
    value: "Standalone Popover"
  } %>
<% end %>

<%= sage_component SagePopover, {
  title: "Page Title 1",
  icon: "question-circle",
  trigger_value: "Open Menu",
  trigger_icon_only: true,
  link: {
    href: "#",
    name: "Learn more about a thing",
  },
} do %>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    Mauris erat urna, eleifend quis mollis ut, vehicula vitae elit.
    Quisque elementum risus congue, placerat tellus vulputate, ornare neque.
    Mauris eu quam nisi.
  </p>
  <p>
    Ut elementum, nulla sit amet viverra vulputate, mi risus dignissim odio, vel aliquam lorem mi nec diam.
    Donec bibendum tincidunt est, non ultricies nisi efficitur eget.
    Integer et libero aliquam, efficitur ante ac, auctor dolor.
    Vivamus aliquet vehicula sollicitudin.
  </p>
<% end %>

<%= sage_component SageCardBlock, {} do %>
  <%= sage_component SageBadge, {
    color: "draft",
    value: "Another Standalone Popover"
  } %>
<% end %>

<%= sage_component SagePopover, {
  title: "Page Title 2",
  icon: "dot-menu-horizontal",
  trigger_icon_only: true,
  trigger_value: "Open Menu",
  link: {
    href: "#",
    name: "Learn more",
  }
} do %>
  <%= content_for :sage_popover_media do %>
    <%= image_tag "card-placeholder-lg.png", alt: "" %>
  <% end %>

  <p>
    We can add graphics as well as freeform content blocks inside Popovers.
    We can even provide a custom css class on the content container for additional finesse.
  </p>
<% end %>

<%= sage_component SageCardBlock, {} do %>
  <%= sage_component SageBadge, {
    color: "draft",
    value: "Standalone Popover with Customized Content Panel"
  } %>
<% end %>

<%= sage_component SagePopover, {
  custom_content_class: "demo-custom-popover-panel",
  icon: "question-circle",
  trigger_value: "Open Menu",
  trigger_icon_only: true,
} do %>
  <p>I can put whatever content I want in here and use the custom class as a hook to style it like a good 'ol BEM mixin!</p>
<% end %>

<%= sage_component SageCardBlock, {} do %>
  <%= sage_component SageBadge, {
    color: "draft",
    value: "Popover w/ Full Size Trigger"
  } %>
<% end %>

<%= sage_component SagePopover, {
  custom_content_class: "demo-custom-popover-panel",
  icon: "send-message",
  trigger_icon_only: false,
  trigger_value: "Send Test Email",
  popover_position: "bottom",
} do %>
  <form style="width: 100%">
    <div class="sage-input">
      <input type="email" id="form__email1" class="sage-form-field sage-input__field" name="form__email1" placeholder="Email Address" required>
      <label for="form__email1" class="sage-input__label">Email Address</label>
    </div>
    <div class="sage-btn-group sage-btn-group--align-end">
      <button type="submit" class="sage-btn sage-btn--primary">
        <span class="sage-btn__truncate-text">Send</span>
      </button>
    </div>
  </form>
<% end %>

<%= sage_component SageCardBlock, {} do %>
  <%= sage_component SageBadge, {
    color: "draft",
    value: "Popover Positioning"
  } %>
<% end %>

<%= sage_component SageCardRow, { grid_template: "oo" } do %>
  <% positions.each do | position | %>
    <%= sage_component SagePopover, {
      title: "Popover #{position[:label]}",
      icon: position[:icon],
      trigger_icon_only: false,
      trigger_value: position[:label],
      popover_position: position[:setting],
      link: {
        href: "#",
        name: "Learn more",
      }
    } do %>
      <p>This is a block of content.</p>
      <p>This is a block of content.</p>
      <p>This is a block of content.</p>
      <p>This is a block of content.</p>
    <% end %>
  <% end %>
<% end %>