<!DOCTYPE html>
<html lang="{{ app()->getLocale() }}">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    @if($useUnifiedSeo ?? false)
        @include('partials.seo.head', ['seo' => $seo ?? null])
    @else
        <title>{{ $page_title ?? 'Skinbase' }}</title>
        <meta name="description" content="{{ $page_meta_description ?? '' }}">
        <meta name="keywords" content="{{ $page_meta_keywords ?? '' }}">
        @isset($page_canonical)
            <link rel="canonical" href="{{ $page_canonical }}" />
        @endisset
    @endif

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" />
    <link rel="shortcut icon" href="/favicon.ico">

    @vite(['resources/css/app.css','resources/scss/nova.scss','resources/js/nova.js'])
    @stack('head')
</head>
<body class="bg-nova-900 text-white min-h-screen flex flex-col">

<div id="topbar-root"></div>
@include('layouts.nova.toolbar')

<main class="flex-1 pt-16">
    <div class="mx-auto w-full max-w-7xl px-4 py-6 md:px-6 lg:px-8">
        @hasSection('sidebar')
            <div class="grid grid-cols-1 gap-6 xl:grid-cols-[minmax(0,1fr)_20rem]">
                <section class="min-w-0">
                    @yield('content')
                </section>
                <aside class="xl:sticky xl:top-24 xl:self-start">
                    @yield('sidebar')
                </aside>
            </div>
        @else
            <section class="min-w-0">
                @yield('content')
            </section>
        @endif
    </div>
</main>

@include('layouts.nova.footer')

@stack('toolbar')
@stack('scripts')

</body>
</html>
