<.phx_form_for for={%{}} as={:story} :let={f} class="h-48">
  <.select_input_group
    form={f}
    id="select-single-single-select"
    label="Please select a shop kind"
    options={[%{value: "Hair dresser"}, %{value: "Barbershop"}, %{value: "Restaurant"}]}
    field={:select}
    placeholder="Pick a value"
   />
</.phx_form_for>

<.phx_form_for for={%{}} as={:story} :let={f} class="h-48">
  <.select_input_group
    form={f}
    id="select-single-single-select-with-label-and-placeholder"
    label="Please select a shop kind"
    value={1}
    options={[%{id: 0, value: "Barbershop", icon: "fa fa-scissors"}, %{id: 1, value: "Restaurant", icon: "fa fa-fork-knife"}, %{id: 2, value: "Garage", icon: "fa fa-car-wrench"}]}
    field={:select}
   />
</.phx_form_for>

<.phx_form_for for={%{}} as={:story} :let={f} class="h-48">
  <.select_input_group
    form={f}
    id="select-single-single-select-with-dropdown-above"
    label="Please select a shop kind"
    value={1}
    options={[%{id: 0, value: "Barbershop", icon: "fa fa-scissors"}, %{id: 1, value: "Restaurant", icon: "fa fa-fork-knife"}, %{id: 2, value: "Garage", icon: "fa fa-car-wrench"}]}
    field={:select}
    dropdown_placement={:above}
   />
</.phx_form_for>

<.phx_form_for for={%{}} as={:story} :let={f} class="h-48">
  <.select_input_group
    form={f}
    disabled
    id="select-single-single-select-disabled-with-value"
    label="Please select a shop kind"
    value={1}
    options={[%{id: 0, value: "Barbershop"}, %{id: 1, value: "Restaurant"}, %{id: 2, value: "Garage"}]}
    field={:select}
    hint="You can't do anything"
   />
</.phx_form_for>

<.phx_form_for for={%{}} as={:story} :let={f} class="h-48">
  <.select_input_group
    form={f}
    id="select-single-multiple-select"
    label="Please select numbers"
    value={[0]}
    mode={:multiple}
    options={[%{id: 0, value: "0"}, %{id: 1, value: "1"}, %{id: 2, value: "2"}]}
    field={:select}
    placeholder="Pick one or multiple values"
   />
</.phx_form_for>

<.phx_form_for for={%{}} as={:story} :let={f} class="h-48">
  <.select_input_group
    form={f}
    id="select-single-invalid-options"
    label="Those are broken!"
    value={[0, 1, 2]}
    mode={:multiple}
    options={[%{id: 0, value: 0}, %{id: 1, value: ""}, %{id: 2, value: nil}]}
    field={:select}
   />
</.phx_form_for>

<.phx_form_for for={%{}} as={:story} :let={f} class="h-48">
  <.select_input_group
    form={f}
    id="select-single-multiple-select-with-value"
    label="Please select shop kinds"
    value={[0, 1, 2]}
    mode={:multiple}
    options={[%{id: 0, value: "With really really really long options"}, %{id: 1, value: "this component will automatically", color: "#FBBF24"}, %{id: 2, value: "wrap to next line.", color: "#FBBF24"}]}
    field={:select}
   />
</.phx_form_for>

<.phx_form_for for={%{}} as={:story} :let={f} class="h-48">
  <.select_input_group
    form={f}
    disabled
    id="select-single-multiple-disabled-with-values"
    value={1}
    mode={:multiple}
    options={[%{id: 1, value: "Barbershop"}]}
    field={:select}
    placeholder="Please select a shop kind"
   />
</.phx_form_for>

<.phx_form_for for={%{}} as={:story} :let={f} class="h-48">
  <.select_input_group
    form={f}
    disabled
    id="select-single-single-select-disabled-without-value"
    options={[]}
    field={:select}
    placeholder="Please select a shop kind"
   />
</.phx_form_for>

<.phx_form_for for={%{}} as={:story} :let={f} class="h-48">
  <.select_input_group
    form={f}
    disabled
    id="select-single-multiple-disabled-without-values"
    value={nil}
    mode={:multiple}
    options={[]}
    field={:select}
    placeholder="Please select a shop kind"
   />
</.phx_form_for>