<div class="flex flex-col justify-center items-stretch mx-auto space-y-4 max-w-3xl">
  <h1 class="text-xl">
    {@note.slug}
  </h1>

  <div class="flex flex-wrap space-x-1">
    <.link :for={tag <- @note.tags} navigate={~p"/notes/#{tag}"} class="link">
      {tag}
    </.link>
  </div>

  <.note_content note={@note} />

  <div
    :if={@note_backlinks ++ @context_backlinks ++ @pipeline_backlinks != []}
    class="flex flex-wrap justify-end items-center self-end"
  >
    <p>{gettext("Backlinked by:")}</p>
    <.link
      :for={backlink <- @note_backlinks}
      class="m-1 hover:underline"
      patch={~p"/note/#{backlink}"}
    >
      {gettext("[%{slug}]", slug: backlink.slug)}
    </.link>
    <.link
      :for={backlink <- @context_backlinks}
      class="m-1 hover:underline"
      patch={~p"/context/#{backlink}"}
    >
      {gettext("[[%{slug}]]", slug: backlink.slug)}
    </.link>
    <.link
      :for={backlink <- @pipeline_backlinks}
      class="m-1 hover:underline"
      patch={~p"/pipeline/#{backlink}"}
    >
      {gettext("[[[%{slug}]]]", slug: backlink.slug)}
    </.link>
  </div>

  <p class="self-end">
    {gettext("Visibility: %{visibility}", visibility: @note.visibility)}
  </p>

  <div class="flex self-end space-x-4">
    <.link :if={@current_user} class="btn btn-primary" patch={~p"/note/#{@note}/edit"}>
      {dgettext("actions", "edit")}
    </.link>
    <button
      :if={@current_user}
      type="button"
      class="btn btn-primary"
      phx-click="delete"
      data-confirm={dgettext("prompts", "are you sure?")}
      aria-label={dgettext("actions", "delete %{note_slug}", note_slug: @note.slug)}
    >
      {dgettext("actions", "delete")}
    </button>
  </div>
</div>

<.modal :if={@live_action == :edit} return_to={~p"/note/#{@note}"}>
  <.live_component
    module={MemexWeb.NoteLive.FormComponent}
    id={@note.id}
    current_user={@current_user}
    title={@page_title}
    action={@live_action}
    note={@note}
    return_to={~p"/note/#{@note}"}
  />
</.modal>
