<div>
  <%= pb_rails("form_group") do %>
    <%= pb_rails("text_input", props: { label: "First Name", placeholder: "Enter First Name", id: "first-name" }) %>
    <%= pb_rails("text_input", props: { label: "Middle Initial", placeholder: "Enter Middle Initial", id: "middle-initial" }) %>
    <%= pb_rails("text_input", props: { label: "Last Name", placeholder: "Enter Last Name", id: "last-name" }) %>
  <% end %>
</div>

<div>
  <%= pb_rails("form_group") do %>
    <%= pb_rails("text_input", props: { label: "with label", placeholder: "Search", id: "search-with-label" }) %>
    <%= pb_rails("button", props: { text: "Submit", variant: "secondary" }) %>
  <% end %>
  <br/>
  <br/>
  <%= pb_rails("form_group") do %>
    <%= pb_rails("text_input", props: { placeholder: "Search" }) %>
    <%= pb_rails("button", props: { text: "Submit", variant: "secondary" }) %>
  <% end %>
</div>

<div>
  <%= pb_rails("form_group", props: { full_width: true }) do %>
    <%= pb_rails("text_input", props: { label: "First Name", placeholder: "Enter First Name", id: "first-name-full-width" }) %>
    <%= pb_rails("text_input", props: { label: "Middle Initial", placeholder: "Enter Middle Initial", id: "middle-initial-full-width" }) %>
    <%= pb_rails("text_input", props: { label: "Last Name", placeholder: "Enter Last Name", id: "last-name-full-width" }) %>
  <% end %>
  <br/>
  <br/>
  <%= pb_rails("form_group", props: { full_width: true }) do %>
    <%= pb_rails("text_input", props: { placeholder: "Search" }) %>
    <%= pb_rails("button", props: { text: "Submit", variant: "secondary" }) %>
  <% end %>
</div>

<div>
  <%= pb_rails("form_group") do %>
    <%= pb_rails("text_input", props: { label: "Event", placeholder: "Event Name", id: "event-name" }) %>
    <%= pb_rails("date_picker", props: { label: "Event Date", picker_id: "date-picker-default" }) %>
  <% end %>
</div>

<%= pb_rails("flex", props: {orientation: "column", row_gap:"md"}) do %>
  <%= pb_rails("form_group") do %>
    <%= pb_rails("text_input", props: { placeholder: "Enter Artist Name" }) %>
    <%= pb_rails("select", props: {
      blank_selection: "Genre",
      options: [
        { value: "Country" },
        { value: "Pop" },
        { value: "Rock" },
        { value: "Hip-Hop/Rap" },
        { value: "Classical" },
        { value: "Gospel" },
        { value: "Alternative" },
        { value: "Indie" },
        { value: "Other" },
      ]
    }) %>
  <% end %>
  <%= pb_rails("form_group") do %>
    <%= pb_rails("select", props: {
        blank_selection: "Phone",
        options: [
          { value: "Cell" },
          { value: "Work" },
          { value: "Home" },
        ]
      }) %>
      <%= pb_rails("phone_number_input", props: {
        id: "phone"
    }) %>
  <% end %>
  <%= pb_rails("form_group") do %>
      <%= pb_rails("phone_number_input", props: {
        id: "phone2"
      }) %>
      <%= pb_rails("select", props: {
        blank_selection: "Phone",
        options: [
          { value: "Cell" },
          { value: "Work" },
          { value: "Home" },
        ]
      }) %>
  <% end %>
<% end %>

<div>
  <%= pb_rails("form_group") do %>
    <%= pb_rails("selectable_card", props: {
        input_id: "cat1",
        name: "animal",
        value: "cat",
        multi: false
      }) do %>
        Cat
      <% end %>

    <%= pb_rails("selectable_card", props: {
      input_id: "dog1",
      name: "animal",
      value: "dog",
      multi: false
    }) do %>
      Dog
    <% end %>
  <% end %>
</div>

<div>
  <%= pb_rails("form_group") do %>
    <%= pb_rails("selectable_card_icon", props: {
      icon: "basketball-ball",
      title_text: "Basketball",
      input_id: 7,
      multi: false,
      name: "select",
    }) %>

    <%= pb_rails("selectable_card_icon", props: {
      icon: "football-ball",
      title_text: "Football",
      input_id: 8,
      multi: false,
      name: "select",
    }) %>
  <% end %>
</div>