index.html.heex

<.header>
  Listing Items
  <:actions>
    <.link href={~p"/items/new"}>
      <.button>New Item</.button>
    </.link>
  </:actions>
</.header>

<.table id="items" rows={@items} row_click={&JS.navigate(~p"/items/#{&1}")}>
  <:col :let={item} label="Text"><%= item.text %></:col>
  <:col :let={item} label="Person"><%= item.person_id %></:col>
  <:col :let={item} label="Status"><%= item.status %></:col>
  <:action :let={item}>
    <div class="sr-only">
      <.link navigate={~p"/items/#{item}"}>Show</.link>
    </div>
    <.link navigate={~p"/items/#{item}/edit"}>Edit</.link>
  </:action>
  <:action :let={item}>
    <.link href={~p"/items/#{item}"} method="delete" data-confirm="Are you sure?">
      Delete
    </.link>
  </:action>
</.table>

<section class="todoapp">
  <header class="header">
    <h1>todos</h1>
    <!-- I want to embed it here  -->
    <input class="new-todo" placeholder="What needs to be done?" autofocus="" />
  </header>
  <section class="main" style="display: block;">
    <input id="toggle-all" class="toggle-all" type="checkbox" />
    <label for="toggle-all">Mark all as complete</label>
    <ul class="todo-list">
    <%= for item <- @items do %>

      <li data-id={item.id} class={complete(item)}>
        <div class="view">
          <input class="toggle" type="checkbox" checked={item.status}/>
          <label><%= item.text %></label>
          <.link
            class="destroy"
            navigate={~p"/items/#{item.id}"}
            method="delete"
            data-confirm="Are you sure?"
          >
          </.link>
        </div>
      </li>

      <% end %>
    </ul>
  </section>
  <footer class="footer" style="display: block;">
    <span class="todo-count"><strong>1</strong> item left</span>
    <ul class="filters">
      <li>
        <a href="#/" class="selected">All</a>
      </li>
      <li>
        <a href="#/active">Active</a>
      </li>
      <li>
        <a href="#/completed">Completed</a>
      </li>
    </ul>
    <button class="clear-completed" style="display: block;">
      Clear completed
    </button>
  </footer>
</section>