<%
  demo_description =  "Make sure you know how these changes affect you."
  demo_primary_action = {
    value: "Primary action",
    attributes: {
      href: "#href-for-primary-action"
    },
  }
%>

<%= md("
### Alert colors

Alerts can be implemented in a few different colors.
These also determine the icon that will appear by default.
", use_sage_type: true) %>
<%= sage_component SageAlert, {
  color: "default",
  title: "A default alert",
  desc: demo_description,
  icon_name: "sage-icon-info-circle-filled",
} do %>
  <% content_for :sage_alert_actions do %>
    <%= sage_component SageButton, {
      style: "primary",
      value: "Primary action",
    } %>
  <% end %>
<% end %>
<%= sage_component SageAlert, {
  color: "info",
  title: "An informative alert",
  desc: demo_description,
  icon_name: "sage-icon-info-circle-filled",
} do %>
  <% content_for :sage_alert_actions do %>
    <%= sage_component SageButton, {
      style: "primary",
      value: "Primary action",
    } %>
  <% end %>
<% end %>
<%= sage_component SageAlert, {
  color: "success",
  title: "An informative alert",
  desc: demo_description,
  icon_name: "sage-icon-check-circle-filled",
} do %>
  <% content_for :sage_alert_actions do %>
    <%= sage_component SageButton, {
      style: "primary",
      value: "Primary action",
    } %>
  <% end %>
<% end %>
<%= sage_component SageAlert, {
  color: "warning",
  title: "Uh, oh! Here's a warning alert",
  desc: demo_description,
  icon_name: "sage-icon-danger-filled",
} do %>
  <% content_for :sage_alert_actions do %>
    <%= sage_component SageButton, {
      style: "primary",
      value: "Primary action",
    } %>
  <% end %>
<% end %>
<%= sage_component SageAlert, {
  color: "danger",
  title: "Look out! This alert means there's an error",
  desc: demo_description,
  icon_name: "sage-icon-warning-filled",
} do %>
  <% content_for :sage_alert_actions do %>
    <%= sage_component SageButton, {
      style: "primary",
      value: "Primary action",
    } %>
  <% end %>
<% end %>

<%= md("
### Alert actions

Alerts can include buttons and links for users to take further action.
These include a single primary action button and one or more additional secondary actions.

", use_sage_type: true) %>
<%= sage_component SageAlert, {
  color: "published",
  title: "Alert with all actions",
  desc: demo_description,
  icon_name: "sage-icon-check-circle-filled",
} do %>
  <% content_for :sage_alert_actions do %>
    <%= sage_component SageButton, {
      style: "primary",
      value: "Primary action",
    } %>
    <%= sage_component SageLink, {
      url: "#href-for-link-1",
      label: "Link 1",
      launch: false,
      help_link: false,
      show_label: true,
      style: "secondary",
      remove_underline: true,
    } %>
    <%= sage_component SageLink, {
      url: "#href-for-link-1",
      label: "Link 2",
      launch: false,
      help_link: false,
      show_label: true,
      style: "secondary",
      remove_underline: true,
    } %>
  <% end %>
<% end %>


<%= md("
### Dismissable Alerts

Alerts can be implemented in a few different colors.
These also determine the icon that will appear by default.

Alerts emit a custom event, `sage.alert.dismiss` when the dismiss button is clicked.
You can listen for this event as it bubbles and respond as you see fit.
", use_sage_type: true) %>
<%= sage_component SageAlert, {
  color: "info",
  title: "This nifty alert can be dismissed",
  desc: demo_description,
  dismissable: true,
  icon_name: "sage-icon-info-circle-filled",
} do %>
  <% content_for :sage_alert_actions do %>
    <%= sage_component SageButton, {
      style: "primary",
      value: "Primary action",
    } %>
  <% end %>
<% end %>

<%= md("
### Small Alerts

The `small` variant of Alert can be used for smaller spaces or a more minimal presence.
They support all other properties with the exception of buttons in the `sage_alerts_actions` slot; only links are allowed.
", use_sage_type: true) %>

<%= sage_component SageAlert, {
  color: "default",
  desc: demo_description,
  small: true,
  dismissable: true,
  icon_name: "sage-icon-info-circle-filled",
} do %>
  <% content_for :sage_alert_actions do %>
    <%= sage_component SageLink, {
      url: "#href-for-link-1",
      label: "Link 1",
      launch: false,
      help_link: false,
      show_label: true,
      style: "secondary",
      remove_underline: true,
    } %>
    <%= sage_component SageLink, {
      url: "#href-for-link-1",
      label: "Link 2",
      launch: false,
      help_link: false,
      show_label: true,
      style: "secondary",
      remove_underline: true,
    } %>
  <% end %>
<% end %>


<script>
(function() {
  window.addEventListener("sage.alert.dismiss", function (evt) {
    console.log("local dismiss click", evt);
  });
})();
</script>