<script lang="ts">
	import { t } from 'svelte-i18n';
	import type { PageData } from './$types.js';
	import { enhance } from '$app/forms';
	import { invalidateAll } from '$app/navigation';
	import DraggableBoard from '$lib/components/board/DraggableBoard.svelte';
	import BoardAccessControl from '$lib/components/board/BoardAccessControl.svelte';
	import CustomCssEditor from '$lib/components/settings/CustomCssEditor.svelte';


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

	let showAddSection = $state(false);
	let addWidgetSectionId = $state<string | null>(null);
	let errorMessage = $state('');
	let wallpaperUploading = $state(false);
	let boardCustomCss = $state(data.board.customCss ?? '');

	async function handleWallpaperUpload(event: Event) {
		const input = event.target as HTMLInputElement;
		const file = input.files?.[0];
		if (!file) return;

		wallpaperUploading = true;
		errorMessage = '';

		try {
			const formData = new FormData();
			formData.set('file', file);

			const res = await fetch('/api/wallpaper', {
				method: 'POST',
				body: formData
			});

			if (!res.ok) {
				const json = await res.json();
				errorMessage = json.error ?? 'Failed to upload wallpaper';
				return;
			}

			const json = await res.json();
			const wallpaperUrl = json.data?.path;

			if (wallpaperUrl) {
				// Save wallpaper URL to board
				const updateRes = await fetch(`/api/boards/${data.board.id}`, {
					method: 'PATCH',
					headers: { 'Content-Type': 'application/json' },
					body: JSON.stringify({ wallpaperUrl })
				});

				if (updateRes.ok) {
					await invalidateAll();
				} else {
					errorMessage = 'Wallpaper uploaded but failed to save to board';
				}
			}
		} catch {
			errorMessage = 'Network error uploading wallpaper';
		} finally {
			wallpaperUploading = false;
		}
	}

	function handleToggleAddWidget(sectionId: string) {
		addWidgetSectionId = addWidgetSectionId === sectionId ? null : sectionId;
	}

	async function handleDeleteSection(sectionId: string) {
		const formData = new FormData();
		formData.set('sectionId', sectionId);

		try {
			await fetch(`?/deleteSection`, {
				method: 'POST',
				body: formData
			});
			await invalidateAll();
		} catch (err) {
			errorMessage = err instanceof Error ? err.message : 'Failed to delete section';
		}
	}

	async function handleAddWidget(sectionId: string, widgetData: string) {
		// widgetData is a JSON string with type and type-specific fields
		let parsed: Record<string, unknown>;
		try {
			parsed = JSON.parse(widgetData);
		} catch {
			// Legacy: treat as appId directly
			parsed = { type: 'app', appId: widgetData };
		}

		const formData = new FormData();
		formData.set('sectionId', sectionId);
		formData.set('type', (parsed.type as string) || 'app');

		if (parsed.type === 'app' && parsed.appId) {
			formData.set('appId', parsed.appId as string);
		} else if (parsed.type === 'bookmark') {
			formData.set('configJson', JSON.stringify({
				url: parsed.url,
				label: parsed.label,
				icon: parsed.icon || undefined,
				description: parsed.description || undefined
			}));
		} else if (parsed.type === 'note') {
			formData.set('configJson', JSON.stringify({
				content: parsed.content,
				format: parsed.format || 'markdown'
			}));
		} else if (parsed.type === 'embed') {
			formData.set('configJson', JSON.stringify({
				url: parsed.url,
				height: Number(parsed.height) || 300,
				sandbox: parsed.sandbox || undefined
			}));
		} else if (parsed.type === 'status') {
			formData.set('configJson', JSON.stringify({
				appIds: parsed.appIds,
				label: parsed.label || undefined
			}));
		}

		try {
			await fetch(`?/addWidget`, {
				method: 'POST',
				body: formData
			});
			addWidgetSectionId = null;
			await invalidateAll();
		} catch (err) {
			errorMessage = err instanceof Error ? err.message : 'Failed to add widget';
		}
	}

	async function handleUpdateSection(sectionId: string, sectionData: Record<string, unknown>) {
		const formData = new FormData();
		formData.set('sectionId', sectionId);
		for (const [key, value] of Object.entries(sectionData)) {
			if (value != null) {
				formData.set(key, String(value));
			}
		}

		try {
			await fetch(`?/updateSection`, {
				method: 'POST',
				body: formData
			});
			await invalidateAll();
		} catch (err) {
			errorMessage = err instanceof Error ? err.message : 'Failed to update section';
		}
	}

	async function handleDeleteWidget(widgetId: string) {
		const formData = new FormData();
		formData.set('widgetId', widgetId);

		try {
			await fetch(`?/deleteWidget`, {
				method: 'POST',
				body: formData
			});
			await invalidateAll();
		} catch (err) {
			errorMessage = err instanceof Error ? err.message : 'Failed to delete widget';
		}
	}
</script>

<svelte:head>
	<title>{$t('board.edit_board')}: {data.board.name}</title>
</svelte:head>

<div class="p-6">
	<div class="mx-auto max-w-4xl">
		{#if errorMessage}
			<div class="mb-4 rounded-lg border border-destructive bg-destructive/10 p-3">
				<p class="text-sm text-destructive">{errorMessage}</p>
				<button type="button" onclick={() => { errorMessage = ''; }} class="mt-1 text-xs text-destructive underline">
					{$t('common.dismiss') ?? 'Dismiss'}
				</button>
			</div>
		{/if}

		<!-- Inline edit mode banner -->
		<div class="mb-4 flex items-center gap-3 rounded-xl border border-primary/30 bg-primary/5 p-4">
			<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="shrink-0 text-primary">
				<path d="M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z" /><path d="m15 5 4 4" />
			</svg>
			<div class="flex-1">
				<p class="text-sm font-medium text-foreground">{$t('board.try_inline_edit') ?? 'Try the new inline edit mode!'}</p>
				<p class="text-xs text-muted-foreground">{$t('board.inline_edit_description') ?? 'Edit your board directly with live preview. Press Ctrl+E on the board page.'}</p>
			</div>
			<a
				href="/boards/{data.board.id}?edit=true"
				class="shrink-0 rounded-lg bg-primary px-3 py-1.5 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90"
			>
				{$t('board.open_inline_edit') ?? 'Open Inline Edit'}
			</a>
		</div>

		<div class="mb-6 flex items-center justify-between">
			<h1 class="text-2xl font-bold text-foreground">{$t('board.edit_board')} <span class="text-sm font-normal text-muted-foreground">({$t('board.advanced') ?? 'Advanced'})</span></h1>
			<a
				href="/boards/{data.board.id}"
				class="rounded-lg border border-border px-4 py-2 text-sm text-foreground transition-colors hover:bg-accent"
			>
				{$t('board.back_to_board')}
			</a>
		</div>

		<!-- Board Properties -->
		<section class="mb-8 rounded-xl border border-border bg-card p-6 shadow-sm">
			<h2 class="mb-4 text-lg font-semibold text-card-foreground">{$t('board.properties')}</h2>
			<form method="POST" action="?/updateBoard" use:enhance>
				<div class="grid gap-4 sm:grid-cols-2">
					<div>
						<label for="board-name" class="mb-1 block text-sm font-medium text-foreground">{$t('common.name')}</label>
						<input
							id="board-name"
							name="name"
							type="text"
							value={data.board.name}
							class="w-full rounded-lg border border-input bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground transition-colors focus:border-primary focus:outline-none focus:ring-2 focus:ring-ring/30"
							required
						/>
					</div>
					<div>
						<label for="board-icon" class="mb-1 block text-sm font-medium text-foreground">{$t('app.icon')}</label>
						<input
							id="board-icon"
							name="icon"
							type="text"
							value={data.board.icon ?? ''}
							class="w-full rounded-lg border border-input bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground transition-colors focus:border-primary focus:outline-none focus:ring-2 focus:ring-ring/30"
							placeholder="e.g. layout-dashboard"
						/>
					</div>
					<div class="sm:col-span-2">
						<label for="board-desc" class="mb-1 block text-sm font-medium text-foreground">{$t('common.description')}</label>
						<textarea
							id="board-desc"
							name="description"
							rows="2"
							class="w-full rounded-lg border border-input bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground transition-colors focus:border-primary focus:outline-none focus:ring-2 focus:ring-ring/30"
						>{data.board.description ?? ''}</textarea>
					</div>
					<div class="flex items-center gap-4">
						<label class="flex items-center gap-2 text-sm text-foreground">
							<input
								type="checkbox"
								name="isDefault"
								checked={data.board.isDefault}
								class="h-4 w-4 rounded border-input accent-primary"
							/>
							{$t('board.default_board')}
						</label>
					</div>
				</div>
				<div class="mt-4">
					<button
						type="submit"
						class="rounded-lg bg-primary px-4 py-2 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90"
					>
						{$t('board.save')}
					</button>
				</div>
			</form>
		</section>

		<!-- Board Theme -->
		<section class="mb-8 rounded-xl border border-border bg-card p-6 shadow-sm">
			<h2 class="mb-4 text-lg font-semibold text-card-foreground">{$t('board.theme_settings') ?? 'Theme Settings'}</h2>
			<form method="POST" action="?/updateBoard" use:enhance>
				<!-- Pass required board name so the form is valid -->
				<input type="hidden" name="name" value={data.board.name} />

				<div class="grid gap-4">
					<!-- Hue Slider -->
					<div>
						<label for="board-hue" class="mb-1 block text-sm font-medium text-foreground">{$t('settings.hue') ?? 'Hue'}</label>
						<div class="flex items-center gap-3">
							<input
								id="board-hue"
								name="themeHue"
								type="range"
								min="0"
								max="360"
								step="1"
								value={data.board.themeHue ?? 220}
								class="h-3 w-full cursor-pointer appearance-none rounded-full bg-gradient-to-r from-red-500 via-green-500 via-blue-500 to-red-500 [&::-webkit-slider-thumb]:h-5 [&::-webkit-slider-thumb]:w-5 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:border-2 [&::-webkit-slider-thumb]:border-white [&::-webkit-slider-thumb]:bg-primary [&::-webkit-slider-thumb]:shadow-md"
							/>
							<span class="w-10 text-center text-sm text-muted-foreground">{data.board.themeHue ?? 220}</span>
						</div>
					</div>

					<!-- Saturation Slider -->
					<div>
						<label for="board-sat" class="mb-1 block text-sm font-medium text-foreground">{$t('settings.saturation') ?? 'Saturation'}</label>
						<div class="flex items-center gap-3">
							<input
								id="board-sat"
								name="themeSaturation"
								type="range"
								min="0"
								max="100"
								step="1"
								value={data.board.themeSaturation ?? 70}
								class="h-3 w-full cursor-pointer appearance-none rounded-full bg-gradient-to-r from-gray-500 to-primary [&::-webkit-slider-thumb]:h-5 [&::-webkit-slider-thumb]:w-5 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:border-2 [&::-webkit-slider-thumb]:border-white [&::-webkit-slider-thumb]:bg-primary [&::-webkit-slider-thumb]:shadow-md"
							/>
							<span class="w-10 text-center text-sm text-muted-foreground">{data.board.themeSaturation ?? 70}%</span>
						</div>
					</div>

					<!-- Background Type -->
					<div>
						<label class="mb-1 block text-sm font-medium text-foreground">{$t('settings.background') ?? 'Background'}</label>
						<div class="flex flex-wrap gap-1 rounded-lg border border-border bg-muted/50 p-1">
							{#each ['mesh', 'particles', 'aurora', 'wallpaper', 'none'] as bg (bg)}
								<label class="flex-1">
									<input type="radio" name="backgroundType" value={bg} checked={data.board.backgroundType === bg} class="peer sr-only" />
									<span class="block cursor-pointer rounded-md px-3 py-2 text-center text-sm font-medium text-muted-foreground transition-colors peer-checked:bg-background peer-checked:text-foreground peer-checked:shadow-sm hover:text-foreground">
										{bg}
									</span>
								</label>
							{/each}
						</div>
					</div>

					<!-- Card Size -->
					<div>
						<label class="mb-1 block text-sm font-medium text-foreground">{$t('board.card_size') ?? 'Card Size'}</label>
						<div class="flex gap-1 rounded-lg border border-border bg-muted/50 p-1">
							{#each ['compact', 'medium', 'large'] as size (size)}
								<label class="flex-1">
									<input type="radio" name="cardSize" value={size} checked={(data.board.cardSize ?? 'medium') === size} class="peer sr-only" />
									<span class="block cursor-pointer rounded-md px-3 py-2 text-center text-sm font-medium text-muted-foreground transition-colors peer-checked:bg-background peer-checked:text-foreground peer-checked:shadow-sm hover:text-foreground">
										{size}
									</span>
								</label>
							{/each}
						</div>
					</div>
				</div>

				<div class="mt-4">
					<button
						type="submit"
						class="rounded-lg bg-primary px-4 py-2 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90"
					>
						{$t('board.save')}
					</button>
				</div>
			</form>
		</section>

		<!-- Wallpaper Settings -->
		<section class="mb-8 rounded-xl border border-border bg-card p-6 shadow-sm">
			<h2 class="mb-4 text-lg font-semibold text-card-foreground">{$t('board.wallpaper') ?? 'Wallpaper'}</h2>
			<div class="grid gap-4">
				<!-- Current wallpaper preview -->
				{#if data.board.wallpaperUrl}
					<div class="relative overflow-hidden rounded-lg border border-border">
						<img
							src={data.board.wallpaperUrl}
							alt="Board wallpaper"
							class="h-32 w-full object-cover"
						/>
						<div class="absolute inset-0" style="background: rgba(0,0,0,{data.board.wallpaperOverlay ?? 0.3}); backdrop-filter: blur({data.board.wallpaperBlur ?? 0}px);"></div>
					</div>
				{/if}

				<!-- Upload -->
				<div>
					<label for="wallpaper-upload" class="mb-1 block text-sm font-medium text-foreground">
						{$t('board.upload_wallpaper') ?? 'Upload wallpaper'}
					</label>
					<input
						id="wallpaper-upload"
						type="file"
						accept="image/png,image/jpeg,image/webp"
						onchange={handleWallpaperUpload}
						disabled={wallpaperUploading}
						class="w-full rounded-lg border border-input bg-background px-3 py-2 text-sm text-foreground file:mr-4 file:rounded file:border-0 file:bg-primary file:px-4 file:py-1 file:text-sm file:font-medium file:text-primary-foreground"
					/>
					<p class="mt-1 text-xs text-muted-foreground">{$t('board.wallpaper_hint') ?? 'PNG, JPG, or WebP. Max 5MB.'}</p>
					{#if wallpaperUploading}
						<p class="mt-1 text-xs text-primary">{$t('common.uploading') ?? 'Uploading...'}</p>
					{/if}
				</div>

				<!-- Or URL input -->
				<form method="POST" action="?/updateBoard" use:enhance>
					<input type="hidden" name="name" value={data.board.name} />
					<div>
						<label for="wallpaper-url" class="mb-1 block text-sm font-medium text-foreground">
							{$t('board.wallpaper_url') ?? 'Or enter URL'}
						</label>
						<input
							id="wallpaper-url"
							name="wallpaperUrl"
							type="url"
							value={data.board.wallpaperUrl ?? ''}
							placeholder="https://images.unsplash.com/..."
							class="w-full rounded-lg border border-input bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground transition-colors focus:border-primary focus:outline-none focus:ring-2 focus:ring-ring/30"
						/>
					</div>

					<!-- Blur slider -->
					<div class="mt-3">
						<label for="wallpaper-blur" class="mb-1 block text-sm font-medium text-foreground">
							{$t('board.blur') ?? 'Blur'}: {data.board.wallpaperBlur ?? 0}px
						</label>
						<input
							id="wallpaper-blur"
							name="wallpaperBlur"
							type="range"
							min="0"
							max="20"
							step="1"
							value={data.board.wallpaperBlur ?? 0}
							class="h-2 w-full cursor-pointer appearance-none rounded-full bg-muted [&::-webkit-slider-thumb]:h-4 [&::-webkit-slider-thumb]:w-4 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-primary"
						/>
					</div>

					<!-- Overlay opacity slider -->
					<div class="mt-3">
						<label for="wallpaper-overlay" class="mb-1 block text-sm font-medium text-foreground">
							{$t('board.overlay_opacity') ?? 'Overlay opacity'}: {Math.round((data.board.wallpaperOverlay ?? 0.3) * 100)}%
						</label>
						<input
							id="wallpaper-overlay"
							name="wallpaperOverlay"
							type="range"
							min="0"
							max="1"
							step="0.05"
							value={data.board.wallpaperOverlay ?? 0.3}
							class="h-2 w-full cursor-pointer appearance-none rounded-full bg-muted [&::-webkit-slider-thumb]:h-4 [&::-webkit-slider-thumb]:w-4 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-primary"
						/>
					</div>

					<!-- Parallax toggle -->
					<div class="mt-3">
						<label class="flex items-center gap-2 text-sm text-foreground">
							<input
								type="checkbox"
								name="wallpaperParallax"
								checked={false}
								class="h-4 w-4 rounded border-input accent-primary"
							/>
							{$t('board.parallax') ?? 'Parallax effect'}
						</label>
						<p class="mt-1 text-xs text-muted-foreground">{$t('board.parallax_hint') ?? 'Adds subtle depth movement to the wallpaper background'}</p>
					</div>

					<div class="mt-4">
						<button
							type="submit"
							class="rounded-lg bg-primary px-4 py-2 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90"
						>
							{$t('board.save')}
						</button>
					</div>
				</form>
			</div>
		</section>

		<!-- Board Custom CSS -->
		<section class="mb-8 rounded-xl border border-border bg-card p-6 shadow-sm">
			<h2 class="mb-4 text-lg font-semibold text-card-foreground">{$t('board.custom_css') ?? 'Custom CSS'}</h2>
			<form method="POST" action="?/updateBoard" use:enhance>
				<input type="hidden" name="name" value={data.board.name} />
				<input type="hidden" name="customCss" value={boardCustomCss} />
				<CustomCssEditor
					value={boardCustomCss}
					onchange={(css) => { boardCustomCss = css; }}
					label={$t('board.custom_css_label') ?? 'Board-scoped CSS'}
				/>
				<div class="mt-4">
					<button
						type="submit"
						class="rounded-lg bg-primary px-4 py-2 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90"
					>
						{$t('board.save')}
					</button>
				</div>
			</form>
		</section>

		<!-- Guest Access -->
		<section class="mb-8 rounded-xl border border-border bg-card p-6 shadow-sm">
			<h2 class="mb-4 text-lg font-semibold text-card-foreground">{$t('board.guest_access_title')}</h2>
			<div class="rounded-lg border border-border bg-muted/30 p-4">
				<form method="POST" action="?/updateBoard" use:enhance>
					<input type="hidden" name="name" value={data.board.name} />
					<input type="hidden" name="isDefault" value={data.board.isDefault ? 'on' : ''} />
					<label class="flex items-start gap-3 text-sm text-foreground">
						<input
							type="checkbox"
							name="isGuestAccessible"
							checked={data.board.isGuestAccessible}
							class="mt-0.5 h-4 w-4 rounded border-input accent-primary"
						/>
						<div>
							<span class="font-medium">{$t('board.guest_accessible')}</span>
							<p class="mt-1 text-xs text-muted-foreground">{$t('board.guest_access_description')}</p>
							{#if data.board.isGuestAccessible}
								<p class="mt-1 flex items-center gap-1 text-xs text-green-500">
									<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
										<circle cx="12" cy="12" r="10" />
										<line x1="2" y1="12" x2="22" y2="12" />
										<path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z" />
									</svg>
									{$t('board.guest_access_enabled')}
								</p>
							{:else}
								<p class="mt-1 flex items-center gap-1 text-xs text-muted-foreground">
									<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
										<rect x="3" y="11" width="18" height="11" rx="2" ry="2" />
										<path d="M7 11V7a5 5 0 0 1 10 0v4" />
									</svg>
									{$t('board.guest_access_disabled')}
								</p>
							{/if}
						</div>
					</label>
					<div class="mt-3">
						<button
							type="submit"
							class="rounded-lg bg-primary px-4 py-2 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90"
						>
							{$t('board.save')}
						</button>
					</div>
				</form>
			</div>
		</section>

		<!-- Permissions -->
		{#if data.canManagePermissions}
			<section class="mb-8 rounded-xl border border-border bg-card p-6 shadow-sm">
				<h2 class="mb-4 text-lg font-semibold text-card-foreground">{$t('board.permissions_title')}</h2>
				<p class="mb-4 text-sm text-muted-foreground">{$t('board.permissions_description')}</p>
				<BoardAccessControl
					boardId={data.board.id}
					users={data.users}
					groups={data.groups}
				/>
			</section>
		{/if}

		<!-- Sections with Drag-and-Drop -->
		<section class="mb-8">
			<div class="mb-4 flex items-center justify-between">
				<h2 class="text-lg font-semibold text-foreground">{$t('section.sections')}</h2>
				<button
					type="button"
					onclick={() => (showAddSection = !showAddSection)}
					class="rounded-lg bg-primary px-3 py-1.5 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90"
				>
					{showAddSection ? $t('common.cancel') : $t('section.add')}
				</button>
			</div>

			{#if showAddSection}
				<div class="mb-4 rounded-xl border border-border bg-card p-4 shadow-sm">
					<form
						method="POST"
						action="?/addSection"
						use:enhance={() => {
							return async ({ update }) => {
								await update();
								showAddSection = false;
							};
						}}
					>
						<div class="grid gap-3 sm:grid-cols-2">
							<div>
								<label for="section-title" class="mb-1 block text-sm font-medium text-foreground">{$t('section.title_label')}</label>
								<input
									id="section-title"
									name="title"
									type="text"
									class="w-full rounded-lg border border-input bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground transition-colors focus:border-primary focus:outline-none focus:ring-2 focus:ring-ring/30"
									required
								/>
							</div>
							<div>
								<label for="section-icon" class="mb-1 block text-sm font-medium text-foreground">{$t('section.icon_label')}</label>
								<input
									id="section-icon"
									name="icon"
									type="text"
									class="w-full rounded-lg border border-input bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground transition-colors focus:border-primary focus:outline-none focus:ring-2 focus:ring-ring/30"
									placeholder={$t('section.icon_placeholder')}
								/>
							</div>
						</div>
						<div class="mt-3">
							<button
								type="submit"
								class="rounded-lg bg-primary px-3 py-1.5 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90"
							>
								{$t('section.create')}
							</button>
						</div>
					</form>
				</div>
			{/if}

			<DraggableBoard
				boardId={data.board.id}
				sections={data.board.sections}
				apps={data.apps}
				{addWidgetSectionId}
				onToggleAddWidget={handleToggleAddWidget}
				onDeleteSection={handleDeleteSection}
				onAddWidget={handleAddWidget}
				onDeleteWidget={handleDeleteWidget}
				onUpdateSection={handleUpdateSection}
			/>
		</section>
	</div>
</div>
