<section class="mx-auto w-96 space-y-6">
  <.live_component module={SupportComponent} id="support-component" />
  <div
    :if={@show_authentication?}
    id="authentication"
    class="grid gap-4 bg-gray-50 ring-1 ring-gray-200 shadow-lg p-6 rounded-lg"
  >
    <p>Sign into an <strong>existing</strong> account:</p>

    <.live_component
      disabled={false}
      module={AuthenticationComponent}
      id="authentication-component"
      class={[
        "bg-gray-200 hover:bg-gray-300 hover:text-black rounded transition",
        "ring ring-transparent focus:ring-gray-400 focus:outline-none",
        "flex gap-2 items-center justify-center px-4 py-2 w-full",
        "disabled:cursor-not-allowed disabled:opacity-25"
      ]}
    />

    <.link navigate={~p"/sign-up"} class="underline">Create a new account</.link>
  </div>

  <%= "<#{inspect(@web_pascal_case)}.PasskeyComponents.guidance />" %>

  <%= "<#{inspect(@web_pascal_case)}.PasskeyComponents.token_form form={@token_form} />" %>
</section>
