<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script>
        const darkMode = localStorage.getItem('darkMode') || matchMedia('(prefers-color-scheme: light)').matches;
        document.documentElement.dataset.dark = darkMode;
    </script>

    @vite('resources/css/app.css')
    @vite('resources/js/app.js')
    <title>{{ $title ?? config('app.name') }}</title>
</head>

<body class="bg-white dark:bg-gray-800 min-h-screen flex flex-col px-12 py-12 px-24">
    <livewire:menu :title="$title ?? ''"></livewire:menu>

    {{ $slot }} 
</body>

</html>