<%= for note <- @notes do %>
<%= live_patch to: Routes.live_path(@socket, NotesEditLive, note.id) do %>
<%= note.title %>
<%= note.body %>
<% end %>
<% end %>
<%= live_patch "+", to: Routes.live_path(@socket, NotesNewLive), class: "floating-button" %>
"""
```
* This HTML code has lots of styling which you can copy from the `assets/app.css` file in the project repo of this blog.
* Rest displaying the logic of the list of notes is simple, we are just iterating over the `@notes` variable and displaying it under the `notes-list-item` div.
* There is `live_patch` `helper` defined twice in the view. One is used to navigate to the detail page of the particular note. The other navigate to the `create` page.
* This function takes the `Route.live_path` value which says where we are going to navigate and its associated params.
* So we are passing the `NotesEditLive` and `NotesNewLive` as value to these helpers.
### Add detail page for note along with edit ✄ and delete ✕ action
* Detail page is where we are going to display detail of the note title and its body.
* We have a separate LiveView file for it as well i.e `NotesEditLive`.
* We are going to add two actions `update` and `delete` in the view.
* We have these two methods in our `NoteServer` module as well.
* If you remember we added `live_patch` link to naviate to the details page. We passed `Routes.live_path(@socket, NotesEditLive, note.id)` to the `live_patch` helper.
* The `note.id` in the `live_path` function is nothing but path param for the detail page which generates URL something like this `notes/1/edit`.
* Inside the `details` LiveView mount function we are going to fetch this `id` from the `params` parameter of the mount function.
* Using this `id` we are going to fetch a particular note.
* In file `lib/note_app_web/live/notes_new_live.ex` we are going to add following `mount` function.
```sql
defmodule NoteAppWeb.NotesEditLive do
alias NoteAppWeb.NotesIndexLive
use NoteAppWeb, :live_view
alias NoteApp.Notes.NoteServer
def mount(%{"id" => id}, _session, socket) do
note = NoteServer.get_note(String.to_integer(id))
{:ok, assign(socket, :note, note)}
end
```
* Similarly, we are going to add our view in the `render` function. There we have added the form with some `handle_events` like `phx-change` to manage change in the inputs and `phx-submit` to submit the form. (Check References for these handle\_events)
* We have added the `Delete` button with the `phx-click` event which handles the logic to delete the note.
```sql
def handle_event("delete_note", _value, socket) do
NoteServer.delete_note(socket.assigns.note.id)
{:noreply,
socket
|> redirect(to: "/")
}
end
```
* Finally, we have `phx-submit` event that gets called on clicking the `Done` button, and logic for updating the note is called.
```sql
def handle_event("save_note", _value, socket) do
NoteServer.update_note(socket.assigns.note)
{:noreply,
socket
|> redirect(to: "/")
}
end
```
* The final working code for the Notes detail Liveview is below.
```sql
defmodule NoteAppWeb.NotesEditLive do
alias NoteAppWeb.NotesIndexLive
use NoteAppWeb, :live_view
alias NoteApp.Notes.NoteServer
def mount(%{"id" => id}, _session, socket) do
note = NoteServer.get_note(String.to_integer(id))
{:ok, assign(socket, :note, note)}
end
def render(assigns) do
~L"""