<Layouts.app flash={@flash} current_scope={@current_scope}>
  <div class="mx-auto max-w-sm space-y-4">
    <div class="text-center">
      <.header>
        <p>{gettext("Log in")}</p>
        <:subtitle>
          <%= if @current_scope do %>
            {gettext("You need to reauthenticate to perform sensitive actions on your account.")}
          <% else %>
            {gettext("Don't have an account?")}
            <.link
              navigate={~p"/users/register"}
              class="font-semibold text-brand hover:underline"
              phx-no-format
            >{gettext("Sign up")}</.link>
            {gettext("for an account now.")}
          <% end %>
        </:subtitle>
      </.header>
    </div>

    <div :if={local_mail_adapter?()} class="alert alert-info">
      <.icon name="hero-information-circle" class="size-6 shrink-0" />
      <div>
        <p>{gettext("You are running the local mail adapter.")}</p>
        <p>
          {gettext("To see sent emails, visit")}
          <.link href="/dev/mailbox" class="underline">{gettext("the mailbox page")}</.link>.
        </p>
      </div>
    </div>

    <.form
      for={@magic_link_form}
      id="magic-link-fragment-form"
      action={~p"/users/log-in?_action=confirmed"}
      hidden
    >
      <input
        id="magic-link-fragment-token"
        type="hidden"
        name={@magic_link_form[:token].name}
        value=""
      />
      <p class="alert alert-info mb-4">
        {gettext("Your secure email link is ready. Continue to sign in.")}
      </p>
      <.button
        id="remember-login-button"
        name={@magic_link_form[:remember_me].name}
        value="true"
        phx-disable-with={gettext("Confirming...")}
        class="btn btn-primary w-full"
      >
        {gettext("Confirm and stay logged in")}
      </.button>
      <.button
        phx-disable-with={gettext("Confirming...")}
        class="btn btn-primary btn-soft w-full mt-2"
      >
        {gettext("Confirm and log in only this time")}
      </.button>
    </.form>

    <div id="standard-login-options">
      <.form
        :if={!@current_scope}
        for={%{}}
        as={:google_login}
        action={~p"/auth/google/login"}
        id="google_login_form"
      >
        <.google_auth_button
          label={gettext("Continue with Google")}
          disabled={!@google_auth_enabled}
        />
        <p :if={!@google_auth_enabled} class="mt-2 text-center text-xs text-base-content/55">
          {gettext("Google sign-in will be available after the operator configures it.")}
        </p>
      </.form>

      <div :if={!@current_scope} class="divider">{gettext("or use email")}</div>

      <p
        :if={@pending_google_email && !@current_scope}
        class="mb-4 rounded-2xl bg-base-200 p-4 text-sm text-base-content/70"
      >
        {gettext(
          "Sign in to %{email} once to connect Google. You can use the email link or your existing password.",
          email: @pending_google_email
        )}
      </p>

      <.form :let={f} for={@form} as={:user} id="login_form_magic" action={~p"/users/log-in"}>
        <.input
          readonly={!!@current_scope}
          field={f[:email]}
          type="email"
          label={gettext("Email")}
          autocomplete="username"
          spellcheck="false"
          required
          phx-mounted={JS.focus()}
        />
        <p class="mb-3 text-xs text-base-content/60">
          {gettext("We will send a one-time sign-in link. No password is required.")}
        </p>
        <.button class="btn btn-primary w-full">
          {gettext("Email me a sign-in link")} <span aria-hidden="true">→</span>
        </.button>
      </.form>

      <details class="collapse collapse-arrow mt-4 rounded-2xl border border-base-300">
        <summary class="collapse-title font-semibold">
          {gettext("Use a password instead")}
        </summary>
        <div class="collapse-content">
          <p class="mb-3 text-xs text-base-content/60">
            {gettext("This works only if you previously added a password in account settings.")}
          </p>
          <.form
            :let={f}
            for={@form}
            as={:user}
            id="login_form_password"
            action={~p"/users/log-in"}
          >
            <.input
              readonly={!!@current_scope}
              field={f[:email]}
              type="email"
              label={gettext("Email")}
              autocomplete="username"
              spellcheck="false"
              required
            />
            <.input
              field={f[:password]}
              type="password"
              label={gettext("Password")}
              autocomplete="current-password"
              spellcheck="false"
              required
            />
            <.button class="btn btn-primary w-full" name={@form[:remember_me].name} value="true">
              {gettext("Log in and stay logged in")} <span aria-hidden="true">→</span>
            </.button>
            <.button class="btn btn-primary btn-soft w-full mt-2">
              {gettext("Log in only this time")}
            </.button>
          </.form>
        </div>
      </details>
    </div>
  </div>
</Layouts.app>
