<Layouts.app flash={@flash} timezone={@timezone}>
  <div class="max-w-2xl mx-auto">
    <div class="mb-6">
      <.link
        navigate={~p"/orgs/#{@current_organization.slug}/agents/#{@agent_token.id}"}
        class="text-sm font-medium text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300"
      >
        <span class="hero-arrow-left h-4 w-4 inline"></span> Back to agent
      </.link>
    </div>

    <div class="bg-white dark:bg-zinc-900 shadow rounded-lg">
      <div class="px-6 py-5 border-b border-zinc-200 dark:border-zinc-800">
        <h3 class="text-lg font-medium text-zinc-900 dark:text-zinc-100">
          Edit Agent
        </h3>
        <p class="mt-1 text-sm text-zinc-600 dark:text-zinc-400">
          Update the agent name. The authentication token cannot be changed.
        </p>
      </div>

      <.form
        for={@form}
        id="edit-agent-form"
        phx-change="validate"
        phx-submit="save"
        class="px-6 py-5"
      >
        <div class="space-y-6">
          <div>
            <.input
              field={@form[:name]}
              type="text"
              label="Agent Name"
              placeholder="e.g., Datacenter Agent"
              required
            />
            <p class="mt-2 text-sm text-zinc-600 dark:text-zinc-400">
              A descriptive name to identify this agent in your organization.
            </p>
          </div>
        </div>

        <div class="mt-6 flex items-center justify-end gap-x-4">
          <.link
            navigate={~p"/orgs/#{@current_organization.slug}/agents/#{@agent_token.id}"}
            class="text-sm font-semibold text-zinc-700 dark:text-zinc-300 hover:text-zinc-900 dark:hover:text-zinc-100"
          >
            Cancel
          </.link>
          <.button type="submit" phx-disable-with="Saving...">
            Save Changes
          </.button>
        </div>
      </.form>
    </div>
  </div>
</Layouts.app>
