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

        <title>{{ config('app.name', 'Collabs') }}</title>

        <x-pwa.head />

        @vite(['resources/css/app.css', 'resources/js/app.js'])
    </head>
    <body class="font-sans antialiased bg-background text-foreground min-h-[100dvh] @auth mobile-floating-nav-pad @endauth">
        <div class="flex min-h-[100dvh] flex-col bg-background">
            <livewire:layout.navigation />

            @if (isset($header))
                <header class="shrink-0 border-b border-border/50 bg-background/90 backdrop-blur-xl">
                    <div class="max-w-3xl mx-auto py-5 sm:py-6 px-4 sm:px-6">
                        {{ $header }}
                    </div>
                </header>
            @endif

            <main id="pwa-scroll-root" class="relative flex-1 min-h-0 overflow-x-hidden overflow-y-auto overscroll-y-contain">
                <div
                    id="pwa-pull-indicator"
                    class="pwa-pull-indicator pointer-events-none absolute left-1/2 top-0 z-10 flex h-10 w-10 -translate-x-1/2 items-center justify-center rounded-full border border-border/50 bg-card/90 opacity-0 shadow-md ring-1 ring-black/[0.04] backdrop-blur-md transition-opacity dark:ring-white/[0.06]"
                    aria-hidden="true"
                >
                    <svg class="h-5 w-5 text-muted-foreground" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="m6 9 6 6 6-6"/></svg>
                </div>
                <div class="pointer-events-none absolute inset-0 -z-10 overflow-hidden" aria-hidden="true">
                    <div class="absolute -top-24 left-1/2 h-[28rem] w-[min(100%,48rem)] -translate-x-1/2 rounded-full bg-accent/[0.06] blur-3xl dark:bg-accent/[0.09]"></div>
                    <div class="absolute top-[40%] right-[-10%] h-64 w-64 rounded-full bg-foreground/[0.03] blur-3xl dark:bg-foreground/[0.06]"></div>
                </div>
                {{ $slot }}
            </main>

            <footer class="shrink-0 border-t border-border/40 py-4 px-4">
                <x-layout.brand-credit />
            </footer>

            <x-mobile-floating-nav />
            <x-pwa.install-banner />
        </div>
    </body>
</html>
