live_select

<div
  id={@id}
  class={class(@style, :container, @container_class, @container_extra_class)}
  name="live-select"
  phx-hook="LiveSelect"
  phx-target={@myself}
>
  <%= if @mode == :tags && Enum.any?(@selection) do %>
    <div
      class={class(@style, :tags_container, @tags_container_class, @tags_container_extra_class)}
      name="tags-container"
    >
      <%= for {option, idx} <- Enum.with_index(@selection) do %>
        <div class={class(@style, :tag, @tag_class, @tag_extra_class)}>
          <%= option[:tag_label] || option[:label] %>
          <button type="button" phx-click="option_remove" phx-value-idx={idx} phx-target={@myself}>
            <.x class="cursor-pointer" />
          </button>
        </div>
      <% end %>
    </div>
  <% end %>
  <%= text_input(@form, @text_input_field,
    class:
      "#{class(@style, :text_input, @text_input_class, @text_input_extra_class)}#{if Enum.any?(@selection), do: " #{class(@style, :text_input_selected, @text_input_selected_class)}"}",
    phx_click: "click",
    placeholder: @placeholder,
    phx_debounce: @debounce,
    phx_keyup: "keyup",
    phx_target: @myself,
    phx_change: "change",
    disabled: @disabled,
    readonly: @mode == :single && Enum.any?(@selection),
    autocomplete: "off",
    phx_focus: "focus",
    phx_blur: "blur",
    value: label(@mode, @selection)
  ) %>
  <%= if @mode == :single do %>
    <!-- TODO: this can become a hidden input when this fix is released: https://github.com/phoenixframework/phoenix_live_view/commit/2d6495a4fd4e3cc9b67ee631102e65b1bc7912f1 -->
    <%= text_input(@form, @field,
      disabled: @disabled,
      style: "display: none;",
      class: "hidden",
      value: value(@selection)
    ) %>
  <% else %>
    <!-- TODO: the stuff below could be replaced with a single hidden, readonly multiselect, but updates don't quite work. So we resort to hidden inputs for now -->
    <%= if Enum.empty?(@selection) do %>
      <input
        type="hidden"
        name="live_select_empty_selection"
        id={"live_select_empty_selection_#{@myself}"}
        disabled={@disabled}
      />
    <% end %>
    <%= for {value, idx} <- values(@selection) |> Enum.with_index() do %>
      <input
        type="hidden"
        name={input_name(@form, @field) <> "[]"}
        id={input_id(@form, @field) <> "_#{idx}"}
        disabled={@disabled}
        value={value}
      />
    <% end %>
  <% end %>
  <ul
    class={class(@style, :dropdown, @dropdown_class, @dropdown_extra_class)}
    style={
      if Enum.empty?(@options) || @hide_dropdown, do: "display: none;", else: "display: block;"
    }
    name="live-select-dropdown"
  >
    <%= for {option, idx} <- Enum.with_index(@options) do %>
      <li class={
        if option in @selection || (@max_selectable > 0 && length(@selection) >= @max_selectable),
          do: class(@style, :selected_option, @selected_option_class)
      }>
        <div
          class={[
            class(@style, :option, @option_class, @option_extra_class),
            if(idx == @active_option, do: class(@style, :active_option, @active_option_class))
          ]}
          data-idx={unless option in @selection, do: idx}
        >
          <%= option.label %>
        </div>
      </li>
    <% end %>
  </ul>
</div>