Select

<.select
  field={f[:country]}
  options={[{"United States", "US"}, {"Canada", "CA"}]}
/>

<.select
  name="genre_xs"
  size="xs"
  label="Genre (XS)"
  placeholder="Extra small size"
  options={[
    {"Action", "action"},
    {"Comedy", "comedy"},
    {"Drama", "drama"}
  ]}
/>

<.select
  name="genre_lg"
  size="lg"
  label="Genre (LG)"
  placeholder="Large size"
  options={[
    {"Action", "action"},
    {"Comedy", "comedy"},
    {"Drama", "drama"}
  ]}
/>

<.select
  name="string_options"
  label="Movie Themes (String)"
  placeholder="Search themes..."
  options={[
    "Love",
    "Revenge",
    "Redemption",
    "Coming of Age",
    "Good vs Evil"
  ]}
/>

<.select
  name="tuple_options"
  label="Movie Franchises (Tuple)"
  placeholder="Search franchises..."
  options={[
    {"Marvel Cinematic Universe", "mcu"},
    {"DC Extended Universe", "dceu"},
    {"Star Wars", "star_wars"}
  ]}
/>

<.select
  name="keyword_options"
  label="Movie Languages (Keyword)"
  placeholder="Search languages..."
  options={[
    english: "en",
    spanish: "es",
    french: "fr",
    german: "de"
  ]}
/>

<.select
  name="with_inner_prefix"
  label="Inner Prefix"
  placeholder="Search streaming services..."
  options={[
    {"Netflix", "netflix"},
    {"Disney+", "disney"},
    {"HBO Max", "hbo"}
  ]}
>
  <:inner_prefix>
    <.icon name="hero-magnifying-glass" class="icon" />
  </:inner_prefix>
</.select>

<.select
  name="with_outer_prefix"
  label="Outer Prefix (Text)"
  placeholder="Search streaming services..."
  options={[
    {"Netflix", "netflix"},
    {"Disney+", "disney"},
    {"HBO Max", "hbo"}
  ]}
>
  <:outer_prefix class="px-2 font-semibold text-foreground bg-accent/50">
    Service
  </:outer_prefix>
</.select>

<.select
  name="with_inner_suffix"
  label="Inner Suffix"
  placeholder="Choose streaming service..."
  options={[
    {"Netflix", "netflix"},
    {"Disney+", "disney"},
    {"HBO Max", "hbo"}
  ]}
>
  <:inner_suffix>
    <.icon name="hero-tv" class="icon" />
  </:inner_suffix>
</.select>

<.select
  name="with_outer_suffix"
  label="Outer Suffix (Button)"
  placeholder="Choose streaming service..."
  options={[
    {"Netflix", "netflix"},
    {"Disney+", "disney"},
    {"HBO Max", "hbo"}
  ]}
>
  <:outer_suffix>
    <.button>
      <.icon name="hero-plus" class="icon" /> Add
    </.button>
  </:outer_suffix>
</.select>

<.select
  name="with_both_inner_affixes"
  label="Both Inner Affixes"
  placeholder="Search movie platforms..."
  options={[
    {"Netflix", "netflix"},
    {"Disney+", "disney"},
    {"HBO Max", "hbo"}
  ]}
>
  <:inner_prefix>
    <.icon name="hero-magnifying-glass" class="icon" />
  </:inner_prefix>
  <:inner_suffix>
    <.icon name="hero-play" class="icon" />
  </:inner_suffix>
</.select>

<.select
  native
  field={f[:country]}
  options={[{"United States", "US"}, {"Canada", "CA"}]}
/>

<.select
  field={f[:country]}
  options={@options}
  placeholder="Select your delivery country"
  label="Country of Residence"
  sublabel="Required for shipping"
  description="Select your delivery country"
  help_text="Shipping rates and times vary by country"
/>

<.select
  label="Country"
  field={f[:country]}
  placeholder="Select a country"
  options={[
    {"United States", "US"},
    {"Canada", "CA"}
    # ...
  ]}
/>

<.select
  multiple
  field={f[:countries]}
  options={[
    {"United States", "US"},
    {"Canada", "CA"},
    {"Mexico", "MX"}
    # ...
  ]}
/>

<.select
  multiple
  max={2}
  field={f[:countries]}
  options={[{"United States", "US"}, {"Canada", "CA"}]}
/>

<.select
  searchable
  field={f[:country]}
  options={[{"United States", "US"}, {"Canada", "CA"}]}
/>

<.select
  field={f[:movie]}
  label="Movies"
  class="max-w-[400px] max-h-[400px]"
  options={Enum.map(@movies, &{&1.title, &1.id})}
  on_search="search_movies"
  searchable
  placeholder="Search movies..."
/>

<!--
# LiveView implementation example:
def mount(socket) do
  {:ok, movies} = MyApp.Movies.search("batman")
  {:ok, socket |> assign(movies: movies)}
end

def handle_event("search_movies", %{"query" => query}, socket) do
  {:ok, movies} = MyApp.Movies.search(query)
  {:noreply, socket |> assign(movies: movies)}
end
-->

<.select
  clearable
  placeholder="Select a country"
  field={f[:country]}
  options={[
    {"United States", "US"},
    {"Canada", "CA"}
    # ...
  ]}
/>

<.select
  class="max-h-72"
  name="select"
  options={
    [
      {"Canada", "CA"},
      {"United States", "US"},
      # ...
    ]
  }
/>

<.select
  name="country"
  label="Country"
  options={
    [
      {"United States", "US"},
      {"Canada", "CA"}
      # ...
    ]
  }
>
  <:header class="p-2 text-sm text-gray-500 pb-0">
    <.button size="xs" class="rounded-full">Americas</.button>
    <.button size="xs" class="rounded-full">Europe</.button>
    <.button size="xs" class="rounded-full">Asia-Pacific</.button>
  </:header>
  <:footer class="p-2 border-t text-center">
    <.button type="button" size="sm" class="w-full">
      <.icon name="hero-plus" class="icon" /> Request New Country
    </.button>
  </:footer>
</.select>

<.select
  field={f[:country]}
  animation_enter="scale-100 opacity-100"
  animation_leave="scale-90 opacity-0"
  options={[
    {"United States", "US"},
    {"Canada", "CA"}
    # ...
  ]}
/>

<.select
  field={f[:role]}
  placeholder="Role"
  options={Enum.map(@roles, fn role -> {role.value, role.name} end)}
>
  <:option :let={{value, label}}>
    <div class="cursor-default px-3 py-2 rounded-lg in-data-highlighted:bg-blue-500 [[data-highlighted]_&]:flx-focus:bg-blue-500">
      <div class="font-medium text-sm/6 in-data-highlighted:text-white"><%= label %></div>
      <div class="text-zinc-500 text-xs in-data-highlighted:text-zinc-100">
        <%= Enum.find(@roles, fn r -> r.value == value end).description %>
      </div>
    </div>
  </:option>
</.select>


<.select
  field={f[:country]}
  options={Enum.map(@countries, fn country -> {country.iso, country.name} end)}
>
  <:option :let={{value, label}}>
    <div class="cursor-default in-data-highlighted:bg-zinc-100 px-2 py-1 rounded-sm flx-selected:bg-blue-500 [[data-highlighted]_&]:flx-selected:bg-blue-500">
      <.icon name={icon_name(value)} class="rounded-xs mr-1 shadow-sm w-4" />
      <span class="flx-selected:text-white"><%= label %></span>
    </div>
  </:option>
</.select>

<.select
  field={f[:country]}
  placeholder="Select a country"
  options={[
    {"North America",
     [
       {"United States", "US"},
       {"Canada", "CA"},
       {"Mexico", "MX"}
     ]},
    {"South America",
     [
       {"Brazil", "BR"},
       {"Argentina", "AR"},
       {"Chile", "CL"}
     ]}
  ]}
>
  <:option :let={{label, value}}>
    <div class="flex items-center gap-x-2 p-2 text-sm in-data-highlighted:bg-blue-50 rounded-lg">
      {label}
      <.badge class="ml-auto">{get_area(value)}</.badge>
    </div>
  </:option>
</.select>

<.select
  name="with_value"
  label="Pre-selected Rating"
  value="pg13"
  options={[
    {"G - General Audiences", "g"},
    {"PG - Parental Guidance", "pg"},
    {"PG-13 - Parents Strongly Cautioned", "pg13"}
  ]}
/>

<.select
  name="custom_placeholder"
  label="Custom Placeholder"
  placeholder="🎬 Choose your movie rating"
  options={[
    {"G - Family Friendly ⭐", "g"},
    {"PG - Mild Content 📺", "pg"},
    {"PG-13 - Teen Content 🎥", "pg13"}
  ]}
/>

<.select
  name="country"
  value="US"
  options={[{"United States", "US"}, {"Canada", "CA"}]}
  disabled
/>

<.select
  value="fr"
  name="language"
  options={[{"English", "en"}, {"Spanish", "es"}, {"French", "fr"}]}
  errors={["Language not supported"]}
/>

<.form :let={f} for={@form} phx-change="validate" phx-submit="save">
  <.select
    field={f[:genre]}
    label="Movie Genre"
    options={@genres}
    placeholder="Select genre..."
    clearable
    searchable
  />

  <.select
    field={f[:rating]}
    label="Movie Rating"
    options={@ratings}
    placeholder="Choose rating..."
    clearable
  />

  <.button type="submit">Save Movie</.button>
</.form>

<!--
def handle_event("validate", params, socket) do
  changeset = MyApp.Movies.change_movie(%MyApp.Movies.Movie{}, params)
  {:noreply, assign(socket, changeset: changeset)}
end
-->