memEx/lib/memex_web/live/note_live/index.html.heex

<div class="mx-auto flex flex-col justify-center items-start space-y-4 max-w-3xl">
  <h1 class="text-xl">
    <%= gettext("notes") %>
  </h1>

  <.form
    :let={f}
    for={%{}}
    as={:search}
    phx-change="search"
    phx-submit="search"
    class="self-stretch flex flex-col items-stretch"
  >
    <%= text_input(f, :search_term,
      class: "input input-primary",
      value: @search,
      role: "search",
      phx_debounce: 300,
      placeholder: gettext("search")
    ) %>
  </.form>

  <%= if @notes |> Enum.empty?() do %>
    <h1 class="self-center text-primary-500">
      <%= gettext("no notes found") %>
    </h1>
  <% else %>
    <.live_component
      module={MemexWeb.Components.NotesTableComponent}
      id="notes-index-table"
      current_user={@current_user}
      notes={@notes}
    >
      <:actions :let={note}>
        <.link
          :if={Notes.is_owner?(note, @current_user)}
          patch={Routes.note_index_path(@socket, :edit, note.slug)}
          aria-label={dgettext("actions", "edit %{note_slug}", note_slug: note.slug)}
        >
          <%= dgettext("actions", "edit") %>
        </.link>
        <.link
          :if={Notes.is_owner_or_admin?(note, @current_user)}
          href="#"
          phx-click="delete"
          phx-value-id={note.id}
          data-confirm={dgettext("prompts", "are you sure?")}
          aria-label={dgettext("actions", "delete %{note_slug}", note_slug: note.slug)}
        >
          <%= dgettext("actions", "delete") %>
        </.link>
      </:actions>
    </.live_component>
  <% end %>

  <.link
    :if={@current_user}
    patch={Routes.note_index_path(@socket, :new)}
    class="self-end btn btn-primary"
  >
    <%= dgettext("actions", "new note") %>
  </.link>
</div>

<.modal :if={@live_action in [:new, :edit]} return_to={Routes.note_index_path(@socket, :index)}>
  <.live_component
    module={MemexWeb.NoteLive.FormComponent}
    id={@note.id || :new}
    current_user={@current_user}
    title={@page_title}
    action={@live_action}
    note={@note}
    return_to={Routes.note_index_path(@socket, :index)}
  />
</.modal>