{gettext("Magic Link Login")}

{gettext("Enter your email to receive a secure login link")}

<.form for={@form} id="magic_link_form" phx-submit="send_magic_link" phx-change="validate" > <%!-- `min-w-0` overrides

's default `min-width: min-content` so a long-content child doesn't push the form past the card. --%>

{@error}

{gettext( "Email" )} <.input field={@form[:email]} type="email" placeholder="you@example.com" autocomplete="email" class="transition-colors focus:input-primary" required /> <%!-- `@loading` already swaps the button content; redundant `phx-disable-with` was removed because the double swap broke the DOM merge. `min-w-0 max-w-full` belt-and- suspenders for the fieldset overflow fix. --%>

{gettext("Magic link sent!")}

{gettext("Check your email for a secure login link. The link will expire in 15 minutes.")}

{gettext("Prefer a password?")} <.link navigate={Routes.path("/users/log-in")} class="font-semibold text-primary hover:underline" > {gettext("Sign in with password")}

{gettext("Don't have an account?")} <.link navigate={Routes.path("/users/register")} class="font-semibold text-primary hover:underline" > {gettext("Create an account")}