Form works fine when user is in edit mode.

When the mode is toggled, and the user starts typing, form fields disappear.

defmodule PortalWeb.ClientLive.ProfileLive do
  @moduledoc """
  profile page for clients.
  they can set up their profile along with
  """
  alias Portal.Clients
  import PortalWeb.UI.Button

  use PortalWeb, :live_view_client

  def mount(_params, _session, socket) do
    client = socket.assigns.current_client

    profile_basics_form =
      Clients.update_profile_basics_changeset(client) |> to_form(as: "profile-basics")

    {:ok,
     socket
     |> assign(:trigger_submit, false)
     |> assign(:view_mode, false)
     |> assign(:profile_basics_form, profile_basics_form)}
  end

  def handle_event("toggle_form_mode", _params, socket) do
    mode = socket.assigns.view_mode
    {:noreply, assign(socket, :view_mode, !mode)}
  end

  defp card(assigns) do
    ~H"""
    <article class="grid gap-1">
      <span class="text-base font-normal text-neutral-800"><%= @title %></span>
      <span class="text-lg font-medium text-black">
        <%= if @value == "", do: "-", else: @value %>
      </span>
    </article>
    """
  end

  def handle_event("validate_profile_basics", %{"profile-basics" => params}, socket) do
    client = socket.assigns.current_client

    # Return the updated socket with the updated form and validation action
    {:noreply,
     socket
     |> assign(
       :profile_basics_form,
       client
       |> Clients.update_profile_basics_changeset(params)
       |> to_form(as: "profile-basics")
     )}
  end

  def handle_event("update_profile_basics", %{"profile-basics" => params}, socket) do
    client = socket.assigns.current_client

    case Clients.update_profile_basics(client, params) do
      {:ok, _client} ->
        {:noreply, socket |> put_flash(:info, "profile has been updated")}

      {:error, %Ecto.Changeset{} = changeset} ->
        {:noreply,
         assign(socket,
           profile_basics_form: Clients.update_profile_basics_changeset(changeset) |> to_form()
         )}
    end
  end

  def render(assigns) do
    ~H"""
    <div class=" bg-brand/5 pt-20 pb-10">
      <div class="w-container grid grid-cols-3">
        <div class="col-span-1">
          <div class="sticky top-0 grid gap-2 pt-6">
            <span class="text-2xl font-semibold text-brand">Profile details</span>
            <span>Basic details regarding your profile and company</span>
          </div>
        </div>
        <div class="col-span-2 border-1 border-solid bg-white border-brand/10 rounded-xl overflow-hidden">
          <div class="flex  items-center justify-between gap-3 p-4 bg-brand/10">
            <span class="text-xl font-medium text-brand">Basics</span>
            <button
              type="button"
              phx-click="toggle_form_mode"
              class="hover:bg-brand/10 transition-all duration-150 ease-in-out p-1 h-8 w-8 grid place-content-center rounded-full "
            >
              <%= if @view_mode do %>
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  fill="none"
                  viewBox="0 0 24 24"
                  stroke-width="1.5"
                  stroke="currentColor"
                  class="size-4"
                >
                  <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L6.832 19.82a4.5 4.5 0 0 1-1.897 1.13l-2.685.8.8-2.685a4.5 4.5 0 0 1 1.13-1.897L16.863 4.487Zm0 0L19.5 7.125"
                  />
                </svg>
              <% else %>
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  fill="none"
                  viewBox="0 0 24 24"
                  stroke-width="1.5"
                  stroke="currentColor"
                  class="size-4"
                >
                  <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
                </svg>
              <% end %>
            </button>
          </div>
          <%= if @view_mode do %>
            <div class="p-6  rounded-b-md">
              <div class="grid grid-cols-2 gap-4 pb-4">
                <%= card(%{title: "Company's name", value: @profile_basics_form[:name].value}) %>
                <%= card(%{title: "Founded in", value: @profile_basics_form[:founded_year].value}) %>
                <%= card(%{title: "Tagline", value: @profile_basics_form[:tagline].value}) %>
                <%= card(%{title: "Website", value: @profile_basics_form[:website].value}) %>
              </div>
              <%= card(%{title: "Description", value: @profile_basics_form[:description].value}) %>
            </div>
          <% else %>
            <div class="p-6 rounded-b-md">
              <.simple_form
                novalidate
                for={@profile_basics_form}
                id="profile_basics_form"
                phx-submit="update_profile_basics"
                phx-change="validate_profile_basics"
                phx-trigger-action={false}
              >
                <.input field={@profile_basics_form[:name]} type="text" label="Company name" required />
                <div class="grid gap-6 md:grid-cols-2">
                  <.input
                    field={@profile_basics_form[:website]}
                    type="text"
                    label="Website"
                    required
                    placeholder="https://example.com"
                  />
                  <.input
                    field={@profile_basics_form[:founded_year]}
                    type="number"
                    placeholder="19XX"
                    label="Year founded"
                    required
                  />
                </div>
                <.input
                  field={@profile_basics_form[:tagline]}
                  placeholder="enter company's tagline"
                  type="text"
                  label="Company tagline"
                  required
                />
                <div>
                  <.input
                    rows="7"
                    type="textarea"
                    field={@profile_basics_form[:description]}
                    placeholder="descripe about your company"
                    label="Description"
                  />
                </div>

                <:actions>
                  <div class="w-full grid place-content-end">
                    <.button phx-disable-with="Updating...">Update profile</.button>
                  </div>
                </:actions>
              </.simple_form>
            </div>
          <% end %>
        </div>
      </div>
    </div>
    """
  end
end