How to pass values to a modal?

Can show one help me to pass the values of the item to the modal when i click edit button

defmodule ZomatoWeb.Restraurents.RestraurentMenuLive do
  alias Zomato.Shops
  alias Zomato.Items
  alias Zomato.Item
  use ZomatoWeb, :live_view
  alias ZomatoWeb.NavbarComponent

  @impl true
  def mount(_params, %{"restraurent_token" => restraurent_token}=_session, socket) do
    restaurant = Shops.get_restraurent_by_session_token(restraurent_token)  # Assuming you have a way to get the restaurant ID from the session
    items = Zomato.Items.list_items_by_restaurant(restaurant.id)
    item = Items.change_item(%Item{})  # Create an empty changeset
    {:ok, assign(socket, items: items, restaurant_id: restaurant.id, item: item)}
  end

  @impl true
  def handle_event("save", %{"item" => item_params}, socket) do

    case Items.create_item(item_params, socket.assigns.restaurant_id) do
      {:ok, _item} ->
        {:noreply,
         socket
         |> Phoenix.LiveView.put_flash(:info, "Item created successfully.")
         |> Phoenix.LiveView.redirect(to: ~p"/restraurents/menu")}

      {:error, %Ecto.Changeset{} = changeset} ->
        {:noreply, assign(socket, changeset: changeset)}
    end
  end

  def handle_event("cancel", _, socket) do
    {:noreply, assign(socket, show_edit_modal: false, item: %{})}
  end


  @impl true
  def render(assigns) do
    ~H"""
    <div class="bg-gray-100">
      <div class="flex-col flex h-screen">
        <.live_component module={NavbarComponent} id={0}/>

        <div class="flex-1 p-6">
          <h2 class="text-3xl font-semibold mb-6">Menu Items</h2>

          <div class="mb-4">
            <button phx-click={show_modal("create_item")} class="bg-green-600 text-white font-bold py-2 px-4 rounded hover:bg-green-700">
              Add Item
            </button>
          </div>

          <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-6">
            <%= for item <- @items do %>
              <div class="bg-white rounded-lg shadow-md p-4">
                <div class="mb-4">
                  <img id="item-image" src="https://via.placeholder.com/150" alt="Menu Item Image" class="w-full h-32 object-cover rounded-md mb-2" />
                </div>
                <p class="text-gray-600 mb-4"><%= item.description %></p>
                <h3 class="text-xl font-semibold mb-2"><%= item.name %></h3>

                <div class="flex justify-between">
                  <button phx-click={show_modal("edit_item")} class="bg-blue-600 text-white py-1 px-3 rounded hover:bg-blue-700">Edit</button>
                  <button phx-click={show_modal("delete_item")} class="bg-red-600 text-white py-1 px-3 rounded hover:bg-red-700">Delete</button>
                </div>
              </div>
            <% end %>
          </div>
        </div>
      </div>
    </div>

    <.modal id="delete_item">
            <h2 class="text-2xl font-bold mb-4">Confirm Deletion</h2>
            <p class="mb-4">Are you sure you want to delete this item?</p>
            <div class="flex justify-between">
              <button phx-click="confirm_delete"  class="bg-red-500 text-white px-4 py-2 rounded hover:bg-red-700">
                Yes, Delete
              </button>
              <button phx-click="cancel"  class="bg-gray-500 text-white px-4 py-2 rounded hover:bg-gray-700">
                Cancel
              </button>
            </div>
    </.modal>

    <.modal id="create_item" >
        <h2 class="text-2xl font-semibold mb-4 text-center">Add Item Details</h2>
        <form phx-submit="save">
          <div class="mb-4">
            <label for="item_name" class="block text-sm font-medium text-gray-700">Item Name</label>
            <input type="text" name="item[name]" id="item_name" class="mt-1 block w-full border border-gray-300 rounded-md p-2" required />
          </div>

          <div class="mb-4">
            <label for="item_description" class="block text-sm font-medium text-gray-700">Description</label>
            <textarea name="item[description]" id="item_description" rows="3" class="mt-1 block w-full border border-gray-300 rounded-md p-2" required></textarea>
          </div>

          <div class="mb-4">
            <label for="item_price" class="block text-sm font-medium text-gray-700">Price</label>
            <input type="number" name="item[price]" id="item_price" step="0.01" class="mt-1 block w-full border border-gray-300 rounded-md p-2" required />
          </div>

          <div class="mb-4">
            <label for="item_category" class="block text-sm font-medium text-gray-700">Category</label>
            <input type="text" name="item[category]" id="item_category" step="0.01" class="mt-1 block w-full border border-gray-300 rounded-md p-2" required />
          </div>

          <div class="mb-4">
            <label for="item_image" class="block text-sm font-medium text-gray-700">Upload Image</label>
            <input type="file" name="item[image]" id="item_image" class="mt-1 block w-full border border-gray-300 rounded-md p-2" />
          </div>

          <button type="submit" class="mt-4 w-full bg-blue-600 text-white rounded-md py-2 hover:bg-blue-700">Add Item</button>
        </form>

    </.modal>

    <.modal id="edit_item">
        <h2 class="text-2xl font-bold mb-4">Edit Item</h2>
          <form phx-submit="save_changes" >
            <div class="mb-4">
              <label for="item_name" class="block text-sm font-medium text-gray-700">Item Name</label>
              <input type="text" id="item_name" name="item_name" value={"Ashish"} class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm p-2" required />
            </div>
            <div class="mb-4">
              <label for="item_description" class="block text-sm font-medium text-gray-700">Description</label>
              <textarea id="item_description" name="item_description" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm p-2" required>Descrip lik do</textarea>
            </div>  alias ZomatoWeb.CoreComponents

            <div class="mb-4">
              <label for="item_price" class="block text-sm font-medium text-gray-700">Price</label>
              <input type="number" id="item_price" name="item_price" value={55} class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm p-2" required />
            </div>
            <div class="flex justify-between">
              <button type="submit" class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700">Save Changes</button>
              <button phx-click="cancel" class="bg-gray-500 text-white px-4 py-2 rounded hover:bg-gray-700">Cancel</button>
            </div>
          </form>

    </.modal>


    """
  end




end

please give me hint