<script lang="ts">
	import BaseCard from '$lib/components/ui/cards/BaseCard.svelte';
	import Button from '$lib/components/ui/form-elements/Button.svelte';
	import Toggle from '$lib/components/ui/form-elements/Toggle.svelte';
	import { quickLinks } from '$lib/quick-links.svelte';
	import { prefs } from '$lib/preferences.svelte';
</script>

<section class="page-body">
	<BaseCard header={'Display Settings'}>
		<section class="card-content">
			<Button onclick={() => quickLinks.reset()}>Reset QuickLinks</Button>
			<div class="toggle-container">
				<Toggle
					label={'Show stations near to you'}
					id={'toggle-nearby-stations'}
					checked={prefs.current.NearToMe}
					onchange={(checked) => prefs.toggleNearToMe(checked)}
				/>
				<Toggle
					label={'Show passsing trains on boards'}
					id={'toggle-passing-trains'}
					checked={prefs.current.ShowPassingTrains}
					onchange={(checked) => prefs.toggleShowPassingTrains(checked)}
				/>
				<Toggle
					label={'Keep screen awake on live pages'}
					id={'toggle-board-wake-lock'}
					checked={prefs.current.BoardWakeLock}
					onchange={(checked) => prefs.toggleBoardWakeLock(checked)}
				/>
				<Toggle
					label={'Auto-refresh data'}
					id={'toggle-auto-refresh'}
					checked={prefs.current.AutoRefresh}
					onchange={(checked) => prefs.toggleAutoRefresh(checked)}
				/>
			</div>
		</section>
	</BaseCard>
</section>

<style>
	.page-body {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 1rem 0 1rem 0;
	}

	.card-content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 1rem;
		padding: 5px 0 5px 0;
	}

	.toggle-container {
		display: flex;
		flex-direction: column;
		gap: 0.5rem;
	}
</style>
