Autocomplete

<.autocomplete
  name="provider"
  label="Watch Provider"
  options={[
    {"Netflix", "netflix"},
    {"Amazon Prime Video", "amazon"},
    {"HBO Max", "hbo"}
  ]}
/>

<.autocomplete
  name="provider"
  label="Watch Provider"
  options={[
    {"Netflix", "netflix"},
    {"Amazon Prime Video", "amazon"},
    {"HBO Max", "hbo"}
  ]}
/>

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

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

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

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

<.autocomplete
  name="contains_search"
  label="Contains Search"
  search_mode="contains"
  placeholder="Type any part of the movie title..."
  options={[
    {"The Dark Knight", "dark_knight"},
    {"Batman Begins", "batman_begins"},
    {"The Dark Knight Rises", "dark_knight_rises"}
  ]}
/>

<.autocomplete
  name="starts_with_search"
  label="Starts With Search"
  search_mode="starts-with"
  placeholder="Type beginning of movie title..."
  options={[
    {"The Dark Knight", "dark_knight"},
    {"The Avengers", "avengers"},
    {"The Matrix", "matrix"}
  ]}
/>

<.autocomplete
  name="threshold_0"
  label="Immediate Search"
  search_threshold={0}
  placeholder="Search immediately..."
  options={[
    {"Robert Downey Jr.", "rdj"},
    {"Chris Evans", "chris_evans"},
    {"Scarlett Johansson", "scarlett"}
  ]}
/>

<.autocomplete
  name="threshold_3"
  label="3 Character Minimum"
  search_threshold={3}
  placeholder="Type 3+ characters..."
  options={[
    {"Christian Bale", "christian_bale"},
    {"Margot Robbie", "margot_robbie"},
    {"Ryan Gosling", "ryan_gosling"}
  ]}
/>

<.autocomplete
  name="genre"
  label="Genre"
  search_mode="starts-with"
  options={[
    {"Action", "action"},
    {"Comedy", "comedy"},
    {"Drama", "drama"},
    # ...
  ]}
/>

<.autocomplete
  name="movie"
  label="Movies"
  class="max-w-[400px] max-h-[400px]"
  options={Enum.map(@movies, &{&1.title, &1.id})}
  on_search="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
-->

<.autocomplete
  name="location_search"
  label="Filming Location"
  placeholder="Search filming locations..."
  debounce={1000}
  options={@location_options}
  on_search="search_locations"
/>

<!--
def handle_event("search_locations", %{"query" => query}, socket) do
  send(self(), {:search_locations, query})
  {:noreply, socket |> assign(searching_locations: true)}
end

def handle_info({:search_locations, query}, socket) do
  locations = YourApp.Movies.search_locations(query)
  {:noreply, socket |> assign(location_options: locations, searching_locations: false)}
end
-->

<.autocomplete
  name="company"
  label="Production Company"
  options={[
    {"United States",
     [
       {"Walt Disney Pictures", "disney"},
       {"Warner Bros. Pictures", "warner"},
       ...
     ]},
    {"United Kingdom",
     [
       {"Working Title Films", "working_title"},
       {"BBC Films", "bbc"},
       ...
     ]}
  ]}
/>

<.autocomplete
  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>
</.autocomplete>

<.autocomplete
  name="with_outer_prefix"
  label="Outer Prefix (Button)"
  placeholder="Search streaming services..."
  options={[
    {"Netflix", "netflix"},
    {"Disney+", "disney"},
    {"HBO Max", "hbo"}
  ]}
>
  <:outer_prefix>
    <.button class="ml-1">
      <.icon name="hero-question-mark-circle" class="icon" /> Help
    </.button>
  </:outer_prefix>
</.autocomplete>

<.autocomplete
  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>
</.autocomplete>

<.autocomplete
  name="with_outer_suffix"
  label="Outer Suffix (Text)"
  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>
</.autocomplete>

<.autocomplete
  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>
</.autocomplete>

<.autocomplete
  name="studio"
  label="Film Studio"
  options={[
    {"Warner Bros.", "warner"},
    {"Universal Pictures", "universal"},
    # ...
  ]}
>
  <:header class="p-2 text-sm text-gray-500 pb-0">
    <.button size="xs" class="rounded-full">Major Studios</.button>
    <.button size="xs" class="rounded-full">Independent</.button>
    <.button size="xs" class="rounded-full">Animation</.button>
  </:header>
  <:footer class="p-2 border-t text-center">
    <.button type="button" size="sm" class="w-full">
      <.icon name="hero-plus" class="icon" /> Add Studio
    </.button>
  </:footer>
</.autocomplete>

<.autocomplete field={f[:user_id]} options={Enum.map(@users, &{&1.full_name, &1.id})} on_search="search_users">
  <:option :let={{label, value}}>
    <div class="flex items-center gap-3 p-2 rounded-lg in-data-highlighted:bg-zinc-100 in-data-selected:bg-blue-100">
      <img src={"https://i.pravatar.cc/150?u=#{value}"} class="size-8 rounded-full" />
      <div>
        <div class="font-medium text-sm">{label}</div>
        <div class="text-xs text-zinc-500">{user_by_id(value, @users).email}</div>
      </div>
    </div>
  </:option>
</.autocomplete>

<.modal id="new-department">
  <!-- form submits to save_department -->
</.modal>

<.form for={@form} phx-submit="save">
  <.autocomplete
    field={@form[:department]}
    label="Department"
    placeholder="Select a department"
    description="Search company departments"
    options={@departments}
  >
    <:empty_state>
      <.button class="w-full" variant="ghost" size="sm" type="button" phx-click={Fluxon.open_dialog("new-department")}>
        <.icon name="hero-plus" class="size-4" /> Create new department
      </.button>
    </:empty_state>
  </.autocomplete>
</.form>

<!--
def handle_event("save_department", %{"name" => name}, socket) do
  departments = [...] # Save and update the list to include the new department.
  form = to_form(...) # Update the form to reflect the newly created department.

  {:noreply,
    socket
    |> assign(departments: departments, form: form)
    |> Fluxon.close_dialog("new-department")}
end
-->

<.autocomplete
  name="disabled"
  label="Disabled Autocomplete"
  placeholder="Cannot interact..."
  disabled
  options={[
    {"Academy Award", "oscar"},
    {"Golden Globe", "golden_globe"},
    {"BAFTA", "bafta"}
  ]}
/>

<.autocomplete
  name="director"
  label="Director"
  value="nolan"
  clearable
  options={[
    {"Christopher Nolan", "nolan"},
    {"Steven Spielberg", "spielberg"},
    {"Quentin Tarantino", "tarantino"},
    # ...
  ]}
/>

<.autocomplete
  name="cinematographer"
  label="Cinematographer"
  open_on_focus
  options={
    [
      {"Roger Deakins", "deakins"},
      {"Emmanuel Lubezki", "lubezki"},
      {"Robert Richardson", "richardson"}
      # ...
    ]
  }
/>

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

  <.autocomplete
    field={f[:studio]}
    label="Production Studio"
    options={@studios}
    placeholder="Choose studio..."
  />

  <.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
-->

<.autocomplete
  name="with_error"
  label="Movie Rating"
  placeholder="Select rating..."
  options={[
    {"G - General Audiences", "g"},
    {"PG - Parental Guidance", "pg"},
    {"PG-13 - Parents Strongly Cautioned", "pg13"}
  ]}
  errors={["This field is required"]}
/>

<.autocomplete
  name="multiple_errors"
  label="Content Advisory"
  placeholder="Choose carefully..."
  options={[
    {"No Advisory", "none"},
    {"Mild Language", "mild"},
    {"Strong Language", "strong"}
  ]}
  errors={["This field is required", "Please select a valid content advisory"]}
/>