package templates

import "backend/internal/web/ui"

// LoginPage renders the full /login page wrapped in AuthLayout.
// It delegates the form section to LoginFormFragment so HTMX can swap just the
// form on validation errors without re-rendering the surrounding shell.
templ LoginPage(form LoginForm, errs LoginErrors, csrfToken string, providers AuthProviderButtons) {
	@AuthLayout("Sign in to Xtablo", csrfToken) {
		<div class="auth-card-topbar"></div>
		<div class="brand-header">
			<img class="brand-logo" src="/static/logo_dark.png" alt="Xtablo"/>
		</div>
		<div class="title-group">
			<h1>Sign in to Xtablo</h1>
		</div>
		<div class="auth-body">
			@GoogleButton(providers.Google.StartURL, providers.Google.Configured)
			@AuthDivider()
			@LoginFormFragment(form, errs, csrfToken)
		</div>
	}
}

// LoginFormFragment is the bare form used for HTMX swaps.
// hx-post targets this component itself so the form can be replaced inline
// on validation failure (D-19, D-20).
// The outer id="login-form" must match the hx-target on this element.
templ LoginFormFragment(form LoginForm, errs LoginErrors, csrfToken string) {
	<form
		id="login-form"
		method="POST"
		action="/login"
		hx-post="/login"
		hx-target="#login-form"
		hx-swap="outerHTML"
		class="login-form"
	>
		@ui.CSRFField(csrfToken)
		@GeneralError(errs.General)
		@ui.FormField(ui.FormFieldProps{
			Label: "Email address",
			For:   "email",
			Field: ui.Input(ui.InputProps{
				ID:          "email",
				Name:        "email",
				Type:        "email",
				Placeholder: "you@example.com",
				Value:       form.Email,
				Required:    true,
				Attrs:       templ.Attributes{"autocomplete": "email"},
			}),
			Error: errs.Email,
		})
		@ui.FormField(ui.FormFieldProps{
			Label: "Password",
			For:   "password",
			Field: ui.Input(ui.InputProps{
				ID:          "password",
				Name:        "password",
				Type:        "password",
				Placeholder: "Your password",
				Required:    true,
				Attrs:       templ.Attributes{"autocomplete": "current-password"},
			}),
			Error: errs.Password,
		})
		@ui.Button(ui.ButtonProps{
			Label:   "Sign in to Xtablo",
			Variant: ui.ButtonVariantDefault,
			Tone:    ui.ButtonToneSolid,
			Size:    ui.SizeMD,
			Type:    "submit",
		})
		<p class="signup-copy">
			Don't have an account?
			<a class="signup-link" href="/signup">Sign up</a>
		</p>
	</form>
}
