<.header>
  Listing Deepl accounts
  <:actions>
    <.link patch={~p"/deepl_accounts/new"}>
      <.button>New Deepl account</.button>
    </.link>
  </:actions>
</.header>

<.table id="deepl_accounts" rows={@deepl_accounts} row_click={&JS.navigate(~p"/deepl_accounts/#{&1}")}>
  <:col :let={deepl_account} label="Name"><%= deepl_account.name %></:col>
  <:col :let={deepl_account} label="Description"><%= deepl_account.description %></:col>
  <:col :let={deepl_account} label="Auth key"><%= deepl_account.auth_key %></:col>
  <:col :let={deepl_account} label="Character limit"><%= deepl_account.character_limit %></:col>
  <:col :let={deepl_account} label="Character count"><%= deepl_account.character_count %></:col>
  <:col :let={deepl_account} label="Our character count"><%= deepl_account.our_character_count %></:col>
  <:action :let={deepl_account}>
    <div class="sr-only">
      <.link navigate={~p"/deepl_accounts/#{deepl_account}"}>Show</.link>
    </div>
    <.link patch={~p"/deepl_accounts/#{deepl_account}/edit"}>Edit</.link>
  </:action>
  <:action :let={deepl_account}>
    <.link phx-click={JS.push("delete", value: %{id: deepl_account.id})} data-confirm="Are you sure?">
      Delete
    </.link>
  </:action>
</.table>

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