<PhoenixKitWeb.Components.AuthPageWrapper.auth_page_wrapper
  flash={@flash}
  phoenix_kit_current_scope={assigns[:phoenix_kit_current_scope]}
  page_title={"#{@project_title} - Sign in"}
>
  <h1 class="text-2xl font-bold text-center mb-6">
    {@project_title} {gettext("Sign in")}
  </h1>
  <.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">
      <legend class="fieldset-legend sr-only">{gettext("Login with Password")}</legend>

      <label class="label" for="user_email_or_username">
        <span class="label-text flex items-center">
          <PhoenixKitWeb.Components.Core.Icons.icon_user_profile class="w-4 h-4 mr-2" />
          {gettext("Email or Username")}
        </span>
      </label>
      <input
        id="user_email_or_username"
        name="user[email_or_username]"
        type="text"
        class="input w-full transition-colors focus:input-primary"
        placeholder={gettext("Enter your email or username")}
        value={@form.params["email_or_username"] || ""}
        autocomplete="username"
        required
      />

      <label class="label" for="user_password">
        <span class="label-text flex items-center">
          <PhoenixKitWeb.Components.Core.Icons.icon_lock class="w-4 h-4 mr-2" /> {gettext(
            "Password"
          )}
        </span>
      </label>
      <input
        id="user_password"
        name="user[password]"
        type="password"
        class="input w-full transition-colors focus:input-primary"
        placeholder={gettext("Enter your password")}
        autocomplete="current-password"
        required
      />

      <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 %>

  <%!-- Language Switcher --%>
  <%= if @show_language_switcher do %>
    <div class="flex justify-center mt-4">
      <.language_switcher_dropdown current_path="/users/log-in" show_current={true} />
    </div>
  <% end %>

  <%!-- Development Mode Notice --%>
  <.dev_mailbox_notice />
</PhoenixKitWeb.Components.AuthPageWrapper.auth_page_wrapper>
