<script lang="ts">
	import { DateTime } from "luxon";
	import type { ActionData, PageData } from "./$types";
	import ErrorAlert from "$components/ErrorAlert.svelte";
	import { Icon } from "@sveltestrap/sveltestrap";
	import { t } from "$lib/i18n";
	import { enhance } from "$app/forms";

	type Props = { data: PageData; form: ActionData };
	let { data, form }: Props = $props();

	let expiresAt = $derived.by(() => {
		if (!data.expiresAt) return null;
		return DateTime.fromISO(data.expiresAt);
	});
</script>

<div class="mx-auto w-lg-75">
	<h3>{$t("settings.export-title")}</h3>

	{#if form?.ok}
		<p class="text-success-emphasis">
			<Icon name="check-circle-fill" />
			{$t("settings.export-request-success")}
		</p>
	{:else if form?.error}
		<ErrorAlert error={form.error} />
	{/if}

	<p>
		{$t("settings.export-info")}
	</p>

	<form method="POST" use:enhance>
		<div class="btn-group">
			<button type="submit" class="btn btn-primary" disabled={!data.canExport}>
				{$t("settings.export-request-button")}
			</button>
			{#if data.url}
				<a href={data.url} target="_blank" class="btn btn-success">
					{$t("settings.export-download")}
					{#if expiresAt}
						{$t("settings.export-expires-at", { expiresAt: expiresAt.toRelative() })}
					{/if}
				</a>
			{/if}
		</div>
	</form>
</div>
