<.header>
  API Key Details
  <:actions>
    <.link patch={~p"/api-keys"}>
      <.button>Back to API keys</.button>
    </.link>
  </:actions>
</.header>

<.list>
  <:item title="Name"><%= @api_key.name %></:item>
  <:item title="Token">
    <div class="flex items-center gap-2">
      <code class="bg-ctp-crust border border-ctp-mauve p-2 rounded" id="api-token">
        <%= @api_key.token %>
      </code>
      <button
        type="button"
        class="text-sm text-ctp-mauve hover:text-ctp-pink"
        phx-click={JS.dispatch("phx:copy", to: "#{@api_key.token}")}
      >
        Copy
      </button>
    </div>
  </:item>
  <:item title="Created">
    <%= Calendar.strftime(@api_key.inserted_at, "%Y-%m-%d %H:%M:%S") %>
  </:item>
</.list>

<.back navigate={~p"/api-keys"}>Back to api_keys</.back>

<.modal
  :if={@live_action == :edit}
  id="api_key-modal"
  show
  on_cancel={JS.patch(~p"/api-keys/#{@api_key}")}
>
  <.live_component
    module={ZoeyscomputerWeb.ApiKeyLive.FormComponent}
    id={@api_key.id}
    title={@page_title}
    action={@live_action}
    api_key={@api_key}
    patch={~p"/api-keys/#{@api_key}"}
  />
</.modal>
