<.header>
  <a href={@article.url}><%= @article.title %></a>
  <:subtitle>
    <div class="flex">
      <div class="p-4"><%= @article.author.name %></div>
      <div class="p-4"><%= @article.date %></div>
    </div>
  </:subtitle>
  <:actions>
    <.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).id}")}>
  <:col :let={translation} label="Language"><%= translation.language %></:col>
  <:col :let={translation} label="Title"><%= translation.title %></:col>
  <:col :let={translation} label="Teaser"><%= translation.teaser |> tidy_raw %></: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.id}"}>Show</.link>
    </div>
    <.link navigate={~p"/translations/#{translation.id}/edit"}>Edit</.link>
  </:action>
  <:action :let={translation}>
    <.link phx-click={JS.push("delete_translation", 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="hide-link" phx-click={JS.remove_class("show-boundary", to: ".article")}>hide boundaries</a>
  <.render_doc tree={@article_content} />
</div>
<div class="h-10" />

<.link class="text-sm font-semibold" navigate={~p"/translations/new?article_id=#{@article.id}"}>New Translation</.link>

<.back navigate={~p"/authors/#{@article.author}"}>Back to author</.back>

<.modal :if={@live_action == :edit} id="article-modal" show on_cancel={JS.patch(~p"/articles/#{@article}")}>
  <.live_component
    module={OutlookWeb.ArticleLive.FormComponent}
    id={@article.id}
    title={@page_title}
    action={@live_action}
    article={@article}
    navigate={~p"/articles/#{@article}"}
  />
</.modal>
