Application.put_env(:sample, Example.Endpoint,
  http: [ip: {127, 0, 0, 1}, port: 5001],
  server: true,
  live_view: [signing_salt: "aaaaaaaa"],
  secret_key_base: String.duplicate("a", 64)
)

Mix.install([
  {:plug_cowboy, "~> 2.5"},
  {:jason, "~> 1.0"},
  {:phoenix, "~> 1.7"},
  # please test your issue using the latest version of LV from GitHub!
  {:phoenix_live_view,
   github: "phoenixframework/phoenix_live_view", branch: "main", override: true},
  {:ecto, "~> 3.11"},
  {:phoenix_ecto, "~> 4.5"}
])

# build the LiveView JavaScript assets (this needs mix and npm available in your path!)
path = Phoenix.LiveView.__info__(:compile)[:source] |> Path.dirname() |> Path.join("../")
System.cmd("mix", ["deps.get"], cd: path, into: IO.binstream())
System.cmd("npm", ["install"], cd: Path.join(path, "./assets"), into: IO.binstream())
System.cmd("mix", ["assets.build"], cd: path, into: IO.binstream())

defmodule Example.ErrorView do
  def render(template, _), do: Phoenix.Controller.status_message_from_template(template)
end

defmodule Example.HomeLive do
  use Phoenix.LiveView, layout: {__MODULE__, :live}

  defp changeset(params) do
    data = %{}
    types = %{items: {:array, :string}, name: :string, radio: :string, select: :string}

    {data, types}
    |> Ecto.Changeset.cast(params, Map.keys(types))
    |> Ecto.Changeset.validate_required(:items)
    |> Ecto.Changeset.validate_length(:items, min: 1)
    |> Ecto.Changeset.validate_required(:radio)
    |> Ecto.Changeset.validate_required(:select)
  end

  def mount(_params, _session, socket) do
    {:ok, assign(socket, form: to_form(changeset(%{}), as: :foo), payload: nil)}
  end

  def handle_event("validate", %{"foo" => params}, socket) do
    changeset = changeset(params)

    {:noreply,
     assign(socket, form: to_form(changeset, as: :foo, action: :validate), payload: params)}
  end

  def handle_event("submit", %{"foo" => params}, socket) do
    changeset = changeset(params)

    {:noreply,
     assign(socket, form: to_form(changeset, as: :foo, action: :submit), payload: params)}
  end

  def render("live.html", assigns) do
    ~H"""
    <script src="/assets/phoenix/phoenix.js">
    </script>
    <script src="/assets/phoenix_live_view/phoenix_live_view.js">
    </script>
    <%!-- uncomment to use enable tailwind --%>
    <script src="https://cdn.tailwindcss.com">
    </script>
    <script>
      let liveSocket = new window.LiveView.LiveSocket("/live", window.Phoenix.Socket)
      liveSocket.connect()
    </script>
    {@inner_content}
    """
  end

  def render(assigns) do
    ~H"""
    <.form
      for={@form}
      id="foo"
      phx-change="validate"
      phx-submit="submit"
      class="max-w-lg p-8 flex flex-col gap-4"
    >
      <.input type="text" field={@form[:name]} />

      <hr />

      <fieldset>
        <input type="hidden" name={@form[:radio].name} value="" />
        <legend>Radio example:</legend>

        <div>
          <input
            type="radio"
            id="huey"
            name={@form[:radio].name}
            value="huey"
            checked={@form[:radio].value === "huey"}
          />
          <label for="huey">Huey</label>
        </div>

        <div>
          <input
            type="radio"
            id="dewey"
            name={@form[:radio].name}
            value="dewey"
            checked={@form[:radio].value === "dewey"}
          />
          <label for="dewey">Dewey</label>
        </div>

        <div>
          <input
            type="radio"
            id="louie"
            name={@form[:radio].name}
            value="louie"
            checked={@form[:radio].value === "louie"}
          />
          <label for="louie">Louie</label>
        </div>

        <%= if used_input?(@form[:radio]) do %>
          <.error :for={msg <- @form[:radio].errors}>{inspect(msg)}</.error>
        <% end %>
      </fieldset>

      <hr />

      <p>Select multiple example:</p>

      <input type="hidden" value="" name={@form[:items].name <> "[]"} />
      <.input field={@form[:items]} type="select" multiple options={["foo", "bar", "baz"]} />

      <p>Select example:</p>

      <.input
        field={@form[:select]}
        type="select"
        required
        prompt="Choose an item"
        options={["foo", "bar", "baz"]}
      />

      <button type="submit">Submit</button>

      <hr />

      <div class="flex flex-col gap-4">
        <p>Payload:</p>
        <pre><%= inspect(@payload) %></pre>
        <p>Selected items: {inspect(@form[:items].value)}</p>
        <p>Selected radio: {inspect(@form[:radio].value)}</p>
        <p>Used input @form[:name]: {used_input?(@form[:name])}</p>
        <p>Used input @form[:radio]: {used_input?(@form[:radio])}</p>
        <p>Used input @form[:items]: {used_input?(@form[:items])}</p>
        <p>Form errors: {inspect(@form.errors)}</p>
      </div>
    </.form>
    """
  end

  @doc """
  Renders an input with label and error messages.

  A `Phoenix.HTML.FormField` may be passed as argument,
  which is used to retrieve the input name, id, and values.
  Otherwise all attributes may be passed explicitly.

  ## Types

  This function accepts all HTML input types, considering that:

    * You may also set `type="select"` to render a `<select>` tag

    * `type="checkbox"` is used exclusively to render boolean values

    * For live file uploads, see `Phoenix.Component.live_file_input/1`

  See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input
  for more information. Unsupported types, such as hidden and radio,
  are best written directly in your templates.

  ## Examples

      <.input field={@form[:email]} type="email" />
      <.input name="my-input" errors={["oh no!"]} />
  """
  attr :id, :any, default: nil
  attr :name, :any
  attr :label, :string, default: nil
  attr :value, :any

  attr :type, :string,
    default: "text",
    values: ~w(checkbox color date datetime-local email file month number password
               range search select tel text textarea time url week)

  attr :field, Phoenix.HTML.FormField,
    doc: "a form field struct retrieved from the form, for example: @form[:email]"

  attr :errors, :list, default: []
  attr :checked, :boolean, doc: "the checked flag for checkbox inputs"
  attr :prompt, :string, default: nil, doc: "the prompt for select inputs"
  attr :options, :list, doc: "the options to pass to Phoenix.HTML.Form.options_for_select/2"
  attr :multiple, :boolean, default: false, doc: "the multiple flag for select inputs"

  attr :rest, :global,
    include: ~w(accept autocomplete capture cols disabled form list max maxlength min minlength
                multiple pattern placeholder readonly required rows size step)

  slot :inner_block

  def input(%{field: %Phoenix.HTML.FormField{} = field} = assigns) do
    errors = if Phoenix.Component.used_input?(field), do: field.errors, else: []

    assigns
    |> assign(field: nil, id: assigns.id || field.id)
    |> assign(:errors, errors)
    |> assign_new(:name, fn -> if assigns.multiple, do: field.name <> "[]", else: field.name end)
    |> assign_new(:value, fn -> field.value end)
    |> input()
  end

  def input(%{type: "checkbox"} = assigns) do
    assigns =
      assign_new(assigns, :checked, fn ->
        Phoenix.HTML.Form.normalize_value("checkbox", assigns[:value])
      end)

    ~H"""
    <div>
      <label class="flex items-center gap-4 text-sm leading-6 text-zinc-600">
        <input type="hidden" name={@name} value="false" />
        <input
          type="checkbox"
          id={@id}
          name={@name}
          value="true"
          checked={@checked}
          class="rounded border-zinc-300 text-zinc-900 focus:ring-0"
          {@rest}
        />
        {@label}
      </label>
      <.error :for={msg <- @errors}>{inspect(msg)}</.error>
    </div>
    """
  end

  def input(%{type: "select"} = assigns) do
    ~H"""
    <div>
      <.label for={@id}>{@label}</.label>
      <select
        id={@id}
        name={@name}
        class="mt-2 block w-full rounded-md border border-gray-300 bg-white shadow-sm focus:border-zinc-400 focus:ring-0 sm:text-sm"
        multiple={@multiple}
        {@rest}
      >
        <option :if={@prompt} value="" selected>{@prompt}</option>
        {Phoenix.HTML.Form.options_for_select(@options, @value)}
      </select>
      <.error :for={msg <- @errors}>{inspect(msg)}</.error>
    </div>
    """
  end

  def input(%{type: "textarea"} = assigns) do
    ~H"""
    <div>
      <.label for={@id}>{@label}</.label>
      <textarea
        id={@id}
        name={@name}
        class={[
          "mt-2 block w-full rounded-lg text-zinc-900 focus:ring-0 sm:text-sm sm:leading-6 min-h-[6rem]",
          @errors == [] && "border-zinc-300 focus:border-zinc-400",
          @errors != [] && "border-rose-400 focus:border-rose-400"
        ]}
        {@rest}
      ><%= Phoenix.HTML.Form.normalize_value("textarea", @value) %></textarea>
      <.error :for={msg <- @errors}>{inspect(msg)}</.error>
    </div>
    """
  end

  # All other inputs text, datetime-local, url, password, etc. are handled here...
  def input(assigns) do
    ~H"""
    <div>
      <.label for={@id}>{@label}</.label>
      <input
        type={@type}
        name={@name}
        id={@id}
        value={Phoenix.HTML.Form.normalize_value(@type, @value)}
        class={[
          "mt-2 block w-full border rounded-lg text-zinc-900 focus:ring-0 sm:text-sm sm:leading-6",
          @errors == [] && "border-zinc-300 focus:border-zinc-400",
          @errors != [] && "border-rose-400 focus:border-rose-400"
        ]}
        {@rest}
      />
      <.error :for={msg <- @errors}>{inspect(msg)}</.error>
    </div>
    """
  end

  @doc """
  Renders a label.
  """
  attr :for, :string, default: nil
  slot :inner_block, required: true

  def label(assigns) do
    ~H"""
    <label for={@for} class="block text-sm font-semibold leading-6 text-zinc-800">
      {render_slot(@inner_block)}
    </label>
    """
  end

  @doc """
  Generates a generic error message.
  """
  slot :inner_block, required: true

  def error(assigns) do
    ~H"""
    <p class="mt-3 flex gap-3 text-sm leading-6 text-rose-600">
      {render_slot(@inner_block)}
    </p>
    """
  end
end

defmodule Example.Router do
  use Phoenix.Router
  import Phoenix.LiveView.Router

  pipeline :browser do
    plug(:accepts, ["html"])
  end

  scope "/", Example do
    pipe_through(:browser)

    live("/", HomeLive, :index)
  end
end

defmodule Example.Endpoint do
  use Phoenix.Endpoint, otp_app: :sample
  socket("/live", Phoenix.LiveView.Socket)

  plug Plug.Static, from: {:phoenix, "priv/static"}, at: "/assets/phoenix"
  plug Plug.Static, from: {:phoenix_live_view, "priv/static"}, at: "/assets/phoenix_live_view"

  plug(Example.Router)
end

{:ok, _} = Supervisor.start_link([Example.Endpoint], strategy: :one_for_one)
Process.sleep(:infinity)

Application.put_env(:sample, Example.Endpoint,
  http: [ip: {127, 0, 0, 1}, port: 5001],
  server: true,
  live_view: [signing_salt: "aaaaaaaa"],
  secret_key_base: String.duplicate("a", 64)
)

Mix.install([
  {:plug_cowboy, "~> 2.5"},
  {:jason, "~> 1.0"},
  {:phoenix, "~> 1.7"},
  # please test your issue using the latest version of LV from GitHub!
  {:phoenix_live_view,
   github: "phoenixframework/phoenix_live_view", branch: "main", override: true},
  {:ecto, "~> 3.11"},
  {:phoenix_ecto, "~> 4.5"}
])

# build the LiveView JavaScript assets (this needs mix and npm available in your path!)
path = Phoenix.LiveView.__info__(:compile)[:source] |> Path.dirname() |> Path.join("../")
System.cmd("mix", ["deps.get"], cd: path, into: IO.binstream())
System.cmd("npm", ["install"], cd: Path.join(path, "./assets"), into: IO.binstream())
System.cmd("mix", ["assets.build"], cd: path, into: IO.binstream())

defmodule Example.ErrorView do
  def render(template, _), do: Phoenix.Controller.status_message_from_template(template)
end

defmodule Example.BadgeForm do
  use Phoenix.LiveComponent

  def mount(socket) do
    socket =
      socket
      |> assign(:type, :huey)

    {:ok, socket}
  end

  def update(assigns, socket) do
    socket =
      socket
      |> assign(:form, assigns.form)

    {:ok, socket}
  end

  def render(assigns) do
    ~H"""
    <div>
      <.form
        for={@form}
        id="foo"
        class="max-w-lg p-8 flex flex-col gap-4"
        phx-change="change"
        phx-submit="submit"
      >
        <.radios type={@type} form={@form} myself={@myself} />
      </.form>
    </div>
    """
  end

  defp radios(assigns) do
    ~H"""
    <fieldset>
      <legend>Radio example:</legend>
      <%= for type <- [:huey, :dewey] do %>
        <div
          phx-click="change-type"
          phx-value-type={type}
          phx-target={@myself}
        >
          <input
            type="radio"
            id={type}
            name="type"
            value={type}
            checked={(@type == type) |> IO.inspect(label: "checked")}
          />
          <label for={type}>{type}</label>
        </div>
      <% end %>
    </fieldset>
    """
  end

  def handle_event("change-type", %{"type" => type}, socket) do
    type = String.to_existing_atom(type)
    socket = assign(socket, :type, type)
    {:noreply, socket}
  end
end

defmodule Example.HomeLive do
  use Phoenix.LiveView, layout: {__MODULE__, :live}

  defp changeset(params) do
    data = %{}

    types = %{
      type: :string
    }

    {data, types}
    |> Ecto.Changeset.cast(params, Map.keys(types))
    |> Ecto.Changeset.validate_required(:type)
  end

  def mount(_params, _session, socket) do
    {:ok, assign(socket, form: to_form(changeset(%{}), as: :foo), payload: nil)}
  end

  def render("live.html", assigns) do
    ~H"""
    <script src="/assets/phoenix/phoenix.js">
    </script>
    <script src="/assets/phoenix_live_view/phoenix_live_view.js">
    </script>
    <%!-- uncomment to use enable tailwind --%>
    <script src="https://cdn.tailwindcss.com">
    </script>
    <script>
      let liveSocket = new window.LiveView.LiveSocket("/live", window.Phoenix.Socket)
      liveSocket.connect()
    </script>
    {@inner_content}
    """
  end

  def render(assigns) do
    ~H"""
    <.live_component
      id="badge_form"
      module={Example.BadgeForm}
      action={@live_action}
      form={@form}
    />
    """
  end

  def handle_event("change", params, socket) do
    {:noreply, socket}
  end

  def handle_event("submit", params, socket) do
    {:noreply, socket}
  end
end

defmodule Example.Router do
  use Phoenix.Router
  import Phoenix.LiveView.Router

  pipeline :browser do
    plug(:accepts, ["html"])
  end

  scope "/", Example do
    pipe_through(:browser)

    live("/", HomeLive, :index)
  end
end

defmodule Example.Endpoint do
  use Phoenix.Endpoint, otp_app: :sample
  socket("/live", Phoenix.LiveView.Socket)

  plug(Plug.Static, from: {:phoenix, "priv/static"}, at: "/assets/phoenix")
  plug(Plug.Static, from: {:phoenix_live_view, "priv/static"}, at: "/assets/phoenix_live_view")

  plug(Example.Router)
end

{:ok, _} = Supervisor.start_link([Example.Endpoint], strategy: :one_for_one)
Process.sleep(:infinity)