<Layouts.app flash={@flash} current_scope={@current_scope}>
  <div class="mx-auto max-w-sm space-y-5">
    <div class="text-center">
      <.header>
        {gettext("Register for an account")}
        <:subtitle>
          {gettext("Already registered?")}
          <.link navigate={~p"/users/log-in"} class="font-semibold text-brand hover:underline">
            {gettext("Log in")}
          </.link>
          {gettext("to your account now.")}
        </:subtitle>
      </.header>
    </div>

    <p class="rounded-2xl bg-base-200 p-4 text-sm text-base-content/70">
      {gettext(
        "A password is not required. We will email a one-time confirmation link. You can add a password later in account settings."
      )}
    </p>

    <.form
      for={%{}}
      as={:google_registration}
      action={~p"/auth/google/register"}
      id="google_registration_form"
      class="space-y-3"
    >
      <input
        type="hidden"
        name="google_registration[locale]"
        value={Gettext.get_locale(WhoNeedHelpWeb.Gettext)}
      />
      <.input
        type="checkbox"
        id="google_registration_terms"
        name="google_registration[terms_accepted]"
        value="false"
        label={gettext("I am 18 or older and accept the safety rules")}
        required
      />
      <.google_auth_button
        label={gettext("Sign up with Google")}
        disabled={!@google_auth_enabled}
      />
      <p :if={!@google_auth_enabled} class="text-center text-xs text-base-content/55">
        {gettext("Google sign-in will be available after the operator configures it.")}
      </p>
    </.form>

    <div class="divider">{gettext("or sign up with email")}</div>

    <.form
      :let={f}
      for={@changeset}
      action={~p"/users/register"}
      id="email_registration_form"
    >
      <input
        type="hidden"
        name={f[:locale].name}
        value={Gettext.get_locale(WhoNeedHelpWeb.Gettext)}
      />
      <.input
        field={f[:email]}
        type="email"
        label={gettext("Email")}
        autocomplete="username"
        spellcheck="false"
        required
      />

      <.input
        field={f[:display_name]}
        type="text"
        label={gettext("Display name")}
        autocomplete="name"
        required
      />

      <p class="mt-2 text-xs text-base-content/60">
        {gettext("Read the")}
        <.link href={~p"/safety"} class="link font-semibold">{gettext("safety rules")}</.link>
        {gettext("before confirming.")}
      </p>

      <.input
        field={f[:terms_accepted]}
        type="checkbox"
        label={gettext("I am 18 or older and accept the safety rules")}
        required
      />

      <p class="my-4 text-xs text-base-content/60">
        {gettext(
          "Who Need Help is not an emergency or medical service. Medicine requests are limited to pickup of legal items already purchased or reserved."
        )}
      </p>

      <.button phx-disable-with={gettext("Sending link...")} class="btn btn-primary w-full">
        {gettext("Create account and email me a link")}
      </.button>
    </.form>
  </div>
</Layouts.app>
