<script lang="ts">
	import { login } from '$lib/auth';
	import * as m from '$lib/paraglide/messages';
</script>

<div class="flex h-screen items-center justify-center bg-background">
	<div class="max-w-sm px-6 text-center">
		<h1 class="mb-2 text-[20px] font-semibold tracking-[-0.01em] text-slate-900 dark:text-slate-50">
			{m.logged_out_title()}
		</h1>
		<p class="mb-6 text-sm text-text-secondary">{m.logged_out_subtitle()}</p>
		<button
			onclick={() => login()}
			class="rounded-md bg-slate-900 px-4 py-2 text-sm font-semibold text-white hover:opacity-90 dark:bg-slate-50 dark:text-slate-900"
		>
			{m.logged_out_sign_in()}
		</button>
	</div>
</div>
