<script lang="ts">
	import { t } from 'svelte-i18n';
	import type { PageData } from './$types.js';
	import SettingsForm from '$lib/components/admin/SettingsForm.svelte';
	import BackupPanel from '$lib/components/admin/BackupPanel.svelte';
	import DiscoveryPanel from '$lib/components/admin/DiscoveryPanel.svelte';

	let { data }: { data: PageData } = $props();

	let dockerSocketPath = $state(data.discoveryConfig?.dockerSocketPath ?? '/var/run/docker.sock');
	let traefikApiUrl = $state(data.discoveryConfig?.traefikApiUrl ?? '');
</script>

<svelte:head>
	<title>{$t('admin.system_settings')} — {$t('admin.panel')}</title>
</svelte:head>

<div class="space-y-8">
	<div class="mb-6">
		<h1 class="text-2xl font-bold text-card-foreground">{$t('admin.system_settings')}</h1>
		<p class="mt-1 text-sm text-muted-foreground">{$t('admin.settings_description')}</p>
	</div>

	<SettingsForm form={data.form} bind:dockerSocketPath bind:traefikApiUrl />

	<DiscoveryPanel bind:dockerSocketPath bind:traefikApiUrl />

	<BackupPanel />
</div>
