<PhoenixKitWeb.Components.LayoutWrapper.app_layout
  flash={@flash}
  phoenix_kit_current_scope={assigns[:phoenix_kit_current_scope]}
  page_title="{@project_title} - Sign in"
>
  <div class="flex items-center justify-center py-8 min-h-[80vh]">
    <div class="card bg-base-100 w-full max-w-sm shadow-2xl">
      <div class="card-body">
        <h1 class="text-2xl font-bold text-center mb-6">
          {@project_title} Sign in
        </h1>
        <.form
          for={@form}
          id="login_form"
          action={Routes.path("/users/log-in")}
          phx-update="ignore"
        >
          <fieldset class="fieldset">
            <legend class="fieldset-legend sr-only">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" />
                Email or Username
              </span>
            </label>
            <input
              id="user_email_or_username"
              name="user[email_or_username]"
              type="text"
              class="input input-bordered w-full transition-colors focus:input-primary"
              placeholder="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" /> Password
              </span>
            </label>
            <input
              id="user_password"
              name="user[password]"
              type="password"
              class="input input-bordered w-full transition-colors focus:input-primary"
              placeholder="Enter your password"
              autocomplete="current-password"
              required
            />

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

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

            <button
              type="submit"
              phx-disable-with="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" /> 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">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" />
                  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>New to {@project_title}? </span>
            <.link
              navigate={Routes.path("/users/register")}
              class="font-semibold text-primary hover:underline"
            >
              Create an account
            </.link>
          </div>
        <% end %>

        <%!-- Development Mode Notice --%>
        <div :if={show_dev_notice?()} class="alert alert-info text-sm mt-4">
          <PhoenixKitWeb.Components.Core.Icons.icon_info class="stroke-current shrink-0 h-6 w-6" />
          <span>
            Development mode: Check
            <.link href="/dev/mailbox" class="font-semibold underline">mailbox</.link>
            for confirmation emails
          </span>
        </div>
      </div>
    </div>
  </div>
</PhoenixKitWeb.Components.LayoutWrapper.app_layout>
