<% dropdown_items = [
  {
    value: "Edit",
    icon: "pen",
    attributes: { "href": "#" },
  },
  {
    value: "Disabled link w/ tooltip",
    icon: "pen",
    modifiers: ["disabled"],
    attributes: {
      "href": "https://kajabi.com",
      "data-js-tooltip": "Tooltip",
      "data-js-tooltip-position": "right",
    }
  },
  {
    value: "New",
    icon: "add",
    style: "primary",
    attributes: { "href": "#" },
  }, {
    value: "Share Element",
    icon: "url",
    modifiers: ["border-before"],
    attributes: { "href": "#" },
  }, {
    value: "Take A Dangerous Action",
    icon: "remove-circle",
    style: "danger",
    attributes: { "href": "#" },
  }, {
    value: "Disabled w/ Tooltip",
    icon: "users",
    attributes: {
      "data-js-tooltip": "Tooltip",
      "data-js-tooltip-position": "right"
      },
    modifiers: ["disabled"]
  }
] %>

<%= md("
  Toolbars currently support secondary buttons, checkboxes, dropdowns, search, and plain text.
  Each of these can also be placed inside a nested `SageToolbarGroup` to merge items with borders.
", use_sage_type: true) %>

<h3 class="<%= SageClassnames::TYPE::HEADING_6 %>">Basic toolbar</h3>

<%= sage_component SageToolbar, {} do %>
  <%= sage_component SageSearch, {
    id: "search-basic",
    hide_label: true,
    placeholder: "Search Products",
    value: nil,
    contained: true,
    label_text: "Search"
  } %>

  <%= sage_component SageButton, {
    value: "Edit",
    style: "secondary",
    icon: {
      name: "pen",
      style: "only",
    },
  } %>

  <%= sage_component SageCheckbox, {
    name: "checkbox-basic",
    id: "checkbox-basic",
    label_text: "Checked",
    value: "Edit",
  } %>

  <%= sage_component SageDropdown, { items: dropdown_items, align: "right" } do %>
    <% content_for :sage_dropdown_trigger, flush: true do %>
      <%= sage_component SageButton, {
        style: "secondary",
        value: "Menu",
        icon: {
          style: "right",
          name: "menu"
        }
      } %>
    <% end %>
  <% end %>

  <p>Plain text</p>
<% end %>

<h3 class="<%= SageClassnames::TYPE::HEADING_6 %>"><%= md("Button toolbar in a `SageToolbarGroup`") %></h3>
<%= sage_component SageToolbar, {} do %>
  <%= sage_component SageToolbarGroup, {} do %>
    <%= sage_component SageButton, {
      value: "Button",
      style: "secondary",
    } %>
    <%= sage_component SageButton, {
      value: "Another button",
      style: "secondary",
    } %>
    <%= sage_component SageButton, {
      value: "Ayy one more button",
      style: "secondary",
    } %>
  <% end %>
<% end %>

<h3 class="<%= SageClassnames::TYPE::HEADING_6 %>"><%= md("Search field with dropdown in a `SageToolbarGroup`") %></h3>
<%= sage_component SageToolbar, {} do %>
  <%= sage_component SageToolbarGroup, {} do %>
    <%= sage_component SageDropdown, { items: dropdown_items } do %>
      <% content_for :sage_dropdown_trigger, flush: true do %>
        <%= sage_component SageButton, {
            style: "secondary",
            value: "Search options",
            icon: {
              style: "right",
              name: "caret-down"
            }
          } %>
      <% end %>
    <% end %>
    <%= sage_component SageSearch, {
      id: "search-options",
      hide_label: true,
      placeholder: "Search…",
      value: nil,
      contained: true,
      label_text: "Search",
    } %>
  <% end %>
<% end %>

<h3 class="<%= SageClassnames::TYPE::HEADING_6 %>"><%= md("Mixed content toolbar in a `SageToolbarGroup`") %></h3>
<%= sage_component SageToolbar, {} do %>
  <%= sage_component SageToolbarGroup, {} do %>
    <%= sage_component SageFormInput, {
      id: "custom-input-field-email",
      hide_label: true,
      input_type: "email",
      label_text: "Email address",
      placeholder: "Email address",
      required: true,
      disabled: false,
      has_error: false,
      name: "custom_input_field",
    } %>
    <%= sage_component SageButton, {
      value: "Sign Up",
      style: "primary",
    } %>
  <% end %>
  <%= sage_component SageToolbarGroup, {} do %>
    <%= sage_component SageDropdown, { items: dropdown_items } do %>
      <% content_for :sage_dropdown_trigger, flush: true do %>
        <%= sage_component SageButton, {
          style: "secondary",
          value: "Dropdown",
          icon: {
            name: "gear",
            style: "only"
          }
        } %>
      <% end %>
    <% end %>

    <%= sage_component SageSearch, {
      id: "search-2",
      hide_label: true,
      placeholder: "Search Products",
      value: nil,
      contained: true,
      label_text: "Search",
    } %>

    <%= sage_component SageButton, {
      value: "Remove",
      style: "secondary",
    } %>
  <% end %>
<% end %>