<script lang="ts">
	let { form }: { form?: { error?: string } } = $props();
</script>

<svelte:head>
	<title>Login — YAUM</title>
</svelte:head>

<div class="flex min-h-screen items-start justify-center pt-36">
	<div class="w-full max-w-sm">
		<div class="mb-8 text-center">
			<h1 class="text-xl font-semibold tracking-tight text-white">YAUM</h1>
			<p class="mt-1 text-sm text-[var(--text-muted)]">Yet Another Uptime Monitor</p>
		</div>

		<div class="rounded-2xl border border-[var(--border-color)] bg-[var(--bg-card)] p-6">
			<form method="POST" class="space-y-4">
				<div>
					<label for="username" class="mb-1.5 block text-xs font-medium text-[var(--text-secondary)]">Usuário</label>
					<input
						id="username"
						name="username"
						type="text"
						required
						autocomplete="username"
						placeholder="admin"
						class="w-full rounded-xl border border-[var(--border-color)] bg-[var(--bg-secondary)] px-3.5 py-2.5 text-sm text-white outline-none transition-all placeholder:text-[var(--text-muted)] focus:border-[var(--green)]/50 focus:ring-1 focus:ring-[var(--green)]/20"
					/>
				</div>

				<div>
					<label for="password" class="mb-1.5 block text-xs font-medium text-[var(--text-secondary)]">Senha</label>
					<input
						id="password"
						name="password"
						type="password"
						required
						autocomplete="current-password"
						placeholder="••••••••"
						class="w-full rounded-xl border border-[var(--border-color)] bg-[var(--bg-secondary)] px-3.5 py-2.5 text-sm text-white outline-none transition-all placeholder:text-[var(--text-muted)] focus:border-[var(--green)]/50 focus:ring-1 focus:ring-[var(--green)]/20"
					/>
				</div>

				{#if form?.error}
					<p class="rounded-lg bg-[var(--red)]/5 px-3 py-2 text-xs text-[var(--red)]">{form.error}</p>
				{/if}

				<button
					type="submit"
					class="w-full rounded-xl border border-[var(--green)]/50 bg-[var(--green)]/10 px-4 py-2.5 text-sm font-medium text-[var(--green)] transition-all hover:bg-[var(--green)]/20"
				>
					Entrar
				</button>
			</form>
		</div>

		<p class="mt-6 text-center text-xs text-[var(--text-muted)]">
			<a href="/" class="underline transition-colors hover:text-white">← Voltar ao Dashboard</a>
		</p>
	</div>
</div>
