<PhoenixKitWeb.Components.AuthPageWrapper.auth_page_wrapper
  flash={@flash}
  phoenix_kit_current_scope={assigns[:phoenix_kit_current_scope]}
  page_title={"#{@project_title} - #{gettext("Sign in")}"}
  current_path={assigns[:url_path] || "/users/log-in"}
  dev_mailbox_message={gettext("confirmation emails")}
>
  <h1 class="text-2xl font-bold text-center mb-2">{gettext("Welcome back")}</h1>
  <p class="text-center text-base-content/60 text-sm mb-6">
    {gettext("Sign in to %{project_title}", project_title: @project_title)}
  </p>
  <.form
    for={@form}
    id="login_form"
    action={Routes.path("/users/log-in")}
    phx-update="ignore"
  >
    <input :if={@return_to} type="hidden" name="user[return_to]" value={@return_to} />
    <fieldset class="fieldset min-w-0">
      <legend class="fieldset-legend sr-only">{gettext("Login with Password")}</legend>

      <label class="label" for="user_email_or_username">
        <span class="label-text">{gettext("Email or Username")}</span>
      </label>
      <.input
        type="text"
        id="user_email_or_username"
        name="user[email_or_username]"
        value={@form.params["email_or_username"] || ""}
        autocomplete="username"
        required
      >
        <:icon>
          <PhoenixKitWeb.Components.Core.Icons.icon_user_profile class="h-[1em] w-[1em] opacity-50" />
        </:icon>
      </.input>

      <label class="label" for="user_password">
        <span class="label-text">{gettext("Password")}</span>
      </label>
      <.input
        type="password"
        id="user_password"
        name="user[password]"
        value=""
        autocomplete="current-password"
        required
      >
        <:icon>
          <PhoenixKitWeb.Components.Core.Icons.icon_lock class="h-[1em] w-[1em] opacity-50" />
        </:icon>
      </.input>

      <div class="form-control mt-4">
        <.checkbox
          id="user_remember_me"
          name="user[remember_me]"
          label={gettext("Keep me logged in")}
        />
      </div>

      <div class="text-center mt-2">
        <.link
          navigate={Routes.path("/users/reset-password")}
          class="text-sm font-semibold text-primary hover:underline"
        >
          {gettext("Forgot your password?")}
        </.link>
      </div>

      <button
        type="submit"
        phx-disable-with={gettext("Logging in...")}
        class="btn btn-primary w-full mt-4 transition-all hover:scale-[1.02] active:scale-[0.98]"
      >
        <PhoenixKitWeb.Components.Core.Icons.icon_login class="w-5 h-5 mr-2" /> {gettext("Log in")}
        <span aria-hidden="true">→</span>
      </button>
    </fieldset>
  </.form>

  <%!-- Alternative authentication methods --%>
  <%!-- Only show this section if at least one alternative method is available --%>
  <%= if @magic_link_enabled or PhoenixKit.Users.OAuthAvailability.oauth_available?() do %>
    <div class="mt-6">
      <div class="relative">
        <div class="absolute inset-0 flex items-center">
          <div class="w-full border-t border-base-300" />
        </div>
        <div class="relative flex justify-center text-sm">
          <span class="px-2 bg-base-100 text-base-content/60">
            {gettext("Or continue with")}
          </span>
        </div>
      </div>

      <div class="mt-4 space-y-2">
        <%!-- Magic Link authentication --%>
        <%= if @magic_link_enabled do %>
          <.link
            navigate={Routes.path("/users/magic-link")}
            class="btn btn-outline w-full transition-all hover:scale-[1.02] active:scale-[0.98] hover:shadow-lg"
          >
            <PhoenixKitWeb.Components.Core.Icons.icon_email class="w-5 h-5 mr-2" />
            {gettext("Sign in with Magic Link")}
          </.link>
        <% end %>
        <%!-- OAuth authentication --%>
        <PhoenixKitWeb.Components.OAuthButtons.oauth_buttons show_divider={false} />
      </div>
    </div>
  <% end %>

  <%!-- Registration link --%>
  <%= if @allow_registration do %>
    <div class="text-center mt-4 text-sm">
      <span>{gettext("New to %{project_title}?", project_title: @project_title)}</span>
      <.link
        navigate={Routes.path("/users/register")}
        class="font-semibold text-primary hover:underline"
      >
        {gettext("Create an account")}
      </.link>
    </div>
  <% end %>
</PhoenixKitWeb.Components.AuthPageWrapper.auth_page_wrapper>
