<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title inertia>Admin Panel</title>

        <!-- Fonts -->
        <link rel="preconnect" href="https://fonts.bunny.net">
        <link href="https://fonts.bunny.net/css?family=figtree:400,500,600&display=swap" rel="stylesheet" />

        <!-- Scripts -->
        @routes
        @viteReactRefresh
        @vite(['resources/js/admin.jsx', "resources/js/Admin/Pages/{$page['component']}.jsx"])
        @inertiaHead

        <style id="dynamic-appearance">
            html:root {
                --primary: {{ $appearance['appearance_light_primary_h'] ?? '220.9' }} {{ $appearance['appearance_light_primary_s'] ?? '39.3%' }} {{ $appearance['appearance_light_primary_l'] ?? '11%' }};
                --primary-foreground: {{ $appearance['appearance_light_primary_fg_h'] ?? '210' }} {{ $appearance['appearance_light_primary_fg_s'] ?? '20%' }} {{ $appearance['appearance_light_primary_fg_l'] ?? '98%' }};
                --radius: {{ $appearance['appearance_radius'] ?? '0.5rem' }};
            }
            html.dark {
                --primary: {{ $appearance['appearance_dark_primary_h'] ?? '210' }} {{ $appearance['appearance_dark_primary_s'] ?? '20%' }} {{ $appearance['appearance_dark_primary_l'] ?? '98%' }};
                --primary-foreground: {{ $appearance['appearance_dark_primary_fg_h'] ?? '220.9' }} {{ $appearance['appearance_dark_primary_fg_s'] ?? '39.3%' }} {{ $appearance['appearance_dark_primary_fg_l'] ?? '11%' }};
            }
        </style>
        
    </head>
    <body class="font-sans antialiased">
        @inertia
    </body>
</html>