Add listing translation with article

lib/outlook/articles.ex

@@ -40,6 +40,12 @@ defmodule Outlook.Articles do
     |> Repo.preload([:author])
   end
 
+  def get_article_with_translations!(id) do
+    Repo.get!(Article, id)
+    |> Repo.preload([:author])
+    |> Repo.preload([:translations])
+  end
+
   @doc """
   Creates a article.
 

lib/outlook_web/live/article_live/show.ex

@@ -14,7 +14,7 @@ defmodule OutlookWeb.ArticleLive.Show do
     {:noreply,
      socket
      |> assign(:page_title, page_title(socket.assigns.live_action))
-     |> assign(:article, Articles.get_article!(id))}
+     |> assign(:article, Articles.get_article_with_translations!(id))}
   end
 
   defp page_title(:show), do: "Show Article"

lib/outlook_web/live/article_live/show.html.heex

@@ -10,13 +10,35 @@
     <.link patch={~p"/articles/#{@article}/show/edit"} phx-click={JS.push_focus()}>
       <.button>Edit article</.button>
     </.link>
+    <.link patch={~p"/translations/new?article_id=#{@article}"}>
+      <.button>New Translation</.button>
+    </.link>
   </:actions>
 </.header>
 
+<.table id="translations" rows={@article.translations} row_click={&JS.navigate(~p"/translations/#{&1}")}>
+  <:col :let={translation} label="Lang"><%= translation.lang %></:col>
+  <:col :let={translation} label="Title"><%= translation.title %></:col>
+  <:col :let={translation} label="Teaser"><%= translation.teaser %></:col>
+  <:col :let={translation} label="Date"><%= translation.date %></:col>
+  <:col :let={translation} label="Public"><%= translation.public %></:col>
+  <:action :let={translation}>
+    <div class="sr-only">
+      <.link navigate={~p"/translations/#{translation}"}>Show</.link>
+    </div>
+    <.link navigate={~p"/translations/#{translation}/edit"}>Edit</.link>
+  </:action>
+  <%!-- <:action :let={translation}>
+    <.link phx-click={JS.push("delete", value: %{id: translation.id})} data-confirm="Are you sure?">
+      Delete
+    </.link>
+  </:action> --%>
+</.table>
+
 <div class="article">
-<a href="#" class="show-link" phx-click={JS.add_class("show-boundary", to: ".article")}>show boundaries</a>
+  <a href="#" class="show-link" phx-click={JS.add_class("show-boundary", to: ".article")}>show boundaries</a>
-<a href="#" class="hide-link" phx-click={JS.remove_class("show-boundary", to: ".article")}>hide boundaries</a>
+  <a href="#" class="hide-link" phx-click={JS.remove_class("show-boundary", to: ".article")}>hide boundaries</a>
-  <%= InternalTree.render_html(@article.content) |> raw %>
+  <.render_doc tree={@article.content} />
 </div>
 
 <.link navigate={~p"/translations/new?article_id=#{@article.id}"}>New Translation</.link>