<.header>
  Listing Articles
  <:actions>
  </:actions>
</.header>

<.table id="articles" rows={@articles} row_click={&JS.navigate(~p"/articles/#{&1}")}>
  <:col :let={article} label="Title"><%= article.title %></:col>
  <%!-- <:col :let={article} label="Content"><%= article.content %></:col> --%>
  <:col :let={article} label="Url"><%= article.url %></:col>
  <:col :let={article} label="Language"><%= article.language %></:col>
  <:col :let={article} label="Date"><%= article.date %></:col>
  <:action :let={article}>
    <div class="sr-only">
      <.link navigate={~p"/articles/#{article}"}>Show</.link>
    </div>
    <.link patch={~p"/articles/#{article}/edit"}>Edit</.link>
    <.link navigate={~p"/translations/new?article_id=#{article}"}>New Translation</.link>
  </:action>
  <:action :let={article}>
    <.link phx-click={JS.push("delete", value: %{id: article.id})} data-confirm="Are you sure?">
      Delete
    </.link>
  </:action>
</.table>

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