<.header>
  API Keys
  <:actions>
    <.link patch={~p"/api-keys/new"}>
      <.button>New API Key</.button>
    </.link>
  </:actions>
</.header>

<.table
  id="api_keys"
  rows={@streams.api_keys}
  row_click={fn {_id, api_key} -> JS.navigate(~p"/api-keys/#{api_key}") end}
>
  <:col :let={{_id, api_key}} label="Name"><%= api_key.name %></:col>
  <:col :let={{_id, api_key}} label="Created">
    <%= Calendar.strftime(api_key.inserted_at, "%Y-%m-%d %H:%M:%S") %>
  </:col>
  <:action :let={{_id, api_key}}>
    <div class="sr-only">
      <.link navigate={~p"/api-keys/#{api_key}"}>Show</.link>
    </div>
  </:action>
  <:action :let={{id, api_key}}>
    <.link
      phx-click={JS.push("delete", value: %{id: api_key.id}) |> hide("##{id}")}
      data-confirm="Are you sure?"
    >
      Delete
    </.link>
  </:action>
</.table>

<.modal
  :if={@live_action in [:new, :edit]}
  id="api-key-modal"
  show
  on_cancel={JS.patch(~p"/api-keys")}
>
  <.live_component
    module={ZoeyscomputerWeb.ApiKeyLive.FormComponent}
    current_user={@current_user}
    id={@api_key.id || :new}
    title={@page_title}
    action={@live_action}
    api_key={@api_key}
    patch={~p"/api-keys"}
  />
</.modal>
