<h3 class="<%= SageClassnames::TYPE::HEADING_6 %>">Default</h3>
<%= sage_component SageFormSelect, {
  name: "Characters",
  id: "characters",
  select_options: [
    {
      text: "-- Please Select a Character --",
      value: "",
    },
    {
      text: "(None Specified)",
      value: "",
    },
    {
      text: "Mario",
      value: "mario",
    },
    {
      text: "Luigi",
      value: "luigi",
    },
    {
      text: "Princess Peach",
      value: "princess-peach",
    },
    {
      text: "Daisy",
      value: "daisy",
    },
    {
      text: "Toad",
      value: "toad",
    },
  ],
  message: "This is a message"
} %>

<h3 class="<%= SageClassnames::TYPE::HEADING_6 %>">Error state with message and disabled option</h3>
<%= sage_component SageFormSelect, {
  name: "Pets",
  has_error: true,
  select_options: [
    {
      text: "-- Please Select a Pet --",
      value: "",
    },
    {
      text: "(None Specified)",
      value: "",
      selected: true
    },
    {
      text: "Dog",
      value: "dog",
    },
    {
      text: "Cat",
      value: "cat",
    },
    {
      text: "Hamster",
      value: "hamster",
    },
    {
      text: "Parrot",
      value: "parrot",
    },
    {
      text: "Spider",
      value: "spider",
      disabled: true
    },
    {
      text: "Goldfish",
      value: "goldfish",
    },
  ],
  message: "This is a message"
} %>

<h3 class="<%= SageClassnames::TYPE::HEADING_6 %>">Disabled (with pre-selected option)</h3>
<%= sage_component SageFormSelect, {
  name: "Sports",
  disabled: true,
  select_options: [
    {
      text: "Basketball",
      value: "basketball"
    },
    {
      text: "Football",
      value: "football"
    },
    {
      text: "Lacrosse",
      value: "lacrosse"
    },
    {
      text: "Baseball",
      value: "baseball",
      selected: true
    },
    {
      text: "Blitzball",
      value: "blitzball"
    },
  ]
} %>

<h3 class="<%= SageClassnames::TYPE::HEADING_6 %>">Optgroup use</h3>
<%= sage_component SageFormSelect, {
  name: "Sports!",
  select_options: [
    {
      text: "Bowling",
      value: "bowling",
    },
    {
      group_label: "Hand Sports",
      group_options: [
        {
          text: "Football",
          value: "football",
        },
        {
          text: "Basketball",
          value: "basketball",
        },
      ],
    },
    {
      text: "Nascar",
      value: "nascar",
      selected: true,
    },
    {
      group_label: "Foot Sports",
      group_options: [
        {
          text: "Soccer",
          value: "soccer",
        },
      ],
    },
  ]
} %>

<script>
  const handleOnChange = (consoles) => {
    var selectedText = consoles.options[consoles.selectedIndex].innerHTML;
    var selectedVal = consoles.value;
    alert("Selected Text: " + selectedText + " Value: " + selectedVal);
  }
</script>
<h3 class="<%= SageClassnames::TYPE::HEADING_6 %>">Example on how to pass additional attributes to the component</h3>
<%= sage_component SageFormSelect, {
  name: "Consoles",
  component_attributes: {
    onChange: "handleOnChange(this)",
    "my-attribute": "hello"
  },
  select_options: [
    {
      text: "X-Box",
      value: "x-box"
    },
    {
      text: "PlayStation",
      value: "playstation"
    },
    {
      text: "Nintendo Switch",
      value: "switch"
    },
  ]
} %>

<p><strong>Note:</strong> For a fully styled dropdown selector, see the Dropdown component.</p>