<!DOCTYPE html>
<html
    lang="{{ str_replace('_', '-', app()->getLocale()) }}"
    x-data="{ darkMode: $persist(false) }"
    :class="{'dark': darkMode}"
    x-init="
        if (!('darkMode' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches) {
          localStorage.setItem('darkMode', JSON.stringify(true));
        }
        darkMode = JSON.parse(localStorage.getItem('darkMode'));
        $watch('darkMode', value => localStorage.setItem('darkMode', JSON.stringify(value)))"
>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        @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">
        @persist('theme-switcher')
            <x-theme-switcher />
        @endpersist
        {{ $slot }}

        <x-menu />
    </body>
</html>
