@php
	$theme = auth()->check() ? auth()->user()->preferences['theme'] ?? 'light' : 'light';
@endphp
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" class="{{ $theme === 'dark' ? 'dark' : '' }}">

	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>{{ $title ?? config('app.name') }}</title>
		<link rel="icon" href="/favicon.ico" sizes="any">
		<link rel="icon" href="/favicon.svg" type="image/svg+xml">
		<link rel="apple-touch-icon" href="/apple-touch-icon.png">
		<link rel="preconnect" href="https://fonts.bunny.net">
		<link href="https://fonts.bunny.net/css?family=instrument-sans:400,500,600" rel="stylesheet" />
		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" />
		@vite(['resources/css/app.css', 'resources/js/app.js'])
		<script>
			(function() {
				var key = 'app.theme';
				var fluxKey = 'flux.appearance';
				var theme = @json($theme);
				var stored = window.localStorage.getItem(key) || theme;
				if (stored !== 'light' && stored !== 'dark') stored = 'light';
				window.localStorage.setItem(key, stored);
				window.localStorage.setItem(fluxKey, stored);
				if (stored === 'dark') document.documentElement.classList.add('dark');
				else document.documentElement.classList.remove('dark');
			})();
		</script>
		@livewireStyles
	</head>

	<body class="min-h-screen bg-background text-foreground antialiased">
		<div class="min-h-screen bg-background flex flex-col items-center justify-center p-6 max-w-lg mx-auto">
			<a href="{{ route('home') }}" class="flex flex-col items-center gap-2 font-medium mb-6" wire:navigate>
				<span class="text-2xl font-bold text-foreground">{{ config('app.name') }}</span>
				<span class="sr-only">{{ config('app.name') }}</span>
			</a>
			<div class="w-full flex flex-col gap-6">
				@yield('content')
			</div>
		</div>
		<script>
			document.addEventListener('livewire:init', () => {
				Livewire.on('theme-changed', ({
					theme
				}) => {
					document.documentElement.classList.toggle('dark', theme === 'dark');
					if (window.localStorage) {
						window.localStorage.setItem('app.theme', theme);
						window.localStorage.setItem('flux.appearance', theme);
					}
				});
			});
		</script>
		@livewireScripts
	</body>

</html>
